GuildPortal Mini Gallery

GuildPortal admin site link to the original post

A JSON feed was recently added which supplies the images contained in your gallery along with comments. I put this script together which allows you to view the gallery contents in an accordion ( you all know how much I love accordion menus  ) and then displays the image in a colorbox popup. Colorbox is really nice because I can group images together and play them in a slideshow. You can also use the keyboard arrow keys to navigate through the images or hit escape to close the popup.

Go to the Media tab on my Help Site to see it in action. Especially check out Test-site 4's gallery with the larger images.

Mini Gallery Layout		Colorbox popup

Setup

• Add a blank Widget
  
  
  • Go to Control Panel > Pages & Content (Widgets).
  • Pick a page where you are going to add this gallery and click on it.
  • Select the "Add Widget" tab.
  • Enter a title for your gallery.
  • Choose "Free Form Text/HTML" type of widget.
  • Ignore the "Location on Page" because you can move it easier after it has been added.
  • Click [ Add this Widget ] and the panel should switch to the "Widget/Content" tab.
    
    
• Add the gallery code
  
  
  • Find the Free Form Text/HTML widget you just added, and click the "Edit" link inside. A popup window will appear.
  • Inside the Content Editor, select the "Raw/Script" mode and the toolbars should disappear.
  • Select, then copy (Ctrl-C) the code below.
  • Paste it (Ctrl-V) into the editor.
  • Make any modifications to the CSS and/or script to get your desired setup. By default, this script will work without any modifications or customizing, so there is no need to rush to get this step done.
  • Click [ Save ].
  • Reload your site tab with your shiny and sparkly gallery and test it out.

<!--
*************************
 GuildPortal Mini Gallery
************************* -->
<div class="mBottom gpgToolbar">
 <span class="gpgTitle">Gallery:</span>
 <span class="SmallDisplay">
  <a id="gpgUploadImage" href="javascript:void(0);" class="tooltip" title="Approved member uploads are enabled by Guild administrators.  Click to upload.">Upload</a>
  <a id="gpgFullGallery" href="javascript:void(0);" class="tooltip" title="Opens the full image gallery." style="cursor:pointer;">Open</a>
 </span>
</div>
<!-- Help Site Gallery -->
<div id="wrapper" class="gpgallery"></div>

<!-- Test Site 4 Gallery -->
<div class="gpgTitle2">Help Site 4</div>
<div id="wrapper2" class="gpgallery"></div>

<div style="clear:both"></div>
<script type="text/javascript" src="http://www.axiomfiles.com/Files/258012/jquery.colorbox-min.js"></script>
<script type="text/javascript" src="http://www.axiomfiles.com/Files/258012/gpGallery.min.js"></script>

<link rel="stylesheet" href="http://www.axiomfiles.com/Files/258012/gallery-dark-colorbox.css" type="text/css" media="screen" />
<style type="text/css">
 /* toolbar (upload &  open gallery links)
  ******************** */
 .gpgTitle, .gpgTitle2 { font-size: 0.9em; height: 20px; } /* Toolbar "Gallery:" text styling (Title of gallery) */

 /* accordion menu
   ******************* */
 /* Title/Clickable bar, add a background color/image to over-ride the Forum Category Header style */
 .gpgallery h2 { background: #555; color: #aaa; font-size: 14px; }
 .gpgallery h2 span { color: #ddd; }

 /* selected title bar color, add a background color/image to over-ride the Forum Category Header style */
 .gpgallery h2.selected { background: #0c4000; color: #ddd; }
 .gpgallery h2.selected span { color: #fff; } /* color of accordion up arrow */

 /* gallery image size limitation */
 .gpgallery img { width: 50px; height: 50px; } /* thumbnail size */

 /* popup window (colorbox) options
   ******************* */
 /* Set the minimum image size of the popup window, if too small the image descript becomes unreadable (icons overlap it) */
 #cboxPhoto { min-width: 300px !important; min-height: 250px !important; }

 /* Comment styling (inside tooltip) */
 .gpgCommentTitle { font-weight: bold; }
  ul.gpgCommentBody span { font-weight: bold; }

 /* Stuff you shouldn't have to mess with, but is needed */
 .gpgTitle, .gpgTitle2 { clear: both; }
 .gpgToolbar { display: none; } /* hide toolbar until it has been updated */
 .gpgToolbar a { float: right; margin-left: 5px; } /* move toolbar links to the right */
 .gpgallery ul { list-style-type: none; padding: 0; margin: 4px 0; } /* image list */
 .gpgallery ul li { float: left; margin: 2px; } /* organize list into a grid */
 .gpgallery h2 { padding: 4px 0 4px 10px; margin: 2px 0 0 0; clear: both; cursor: pointer; border-radius: 1em; -moz-border-radius: 5px; -webkit-border-radius: 5px;}
 .gpgallery h2 span { float: right; padding-right: 10px; font-size: 0.8em; } /* accordion up/down arrows */
 #tooltip { z-index: 99999 !important; } /* increase tooltip z-index to be above the colorbox popup */
 ul.gpgCommentBody { list-style-type: none; padding: 0; }
</style>

<script type="text/javascript">
$(document).ready(function(){

 // Help Site Gallery
 $('#wrapper').gpGallery({
  toolbarText: 'Help Site'
 });

 // Test Site 4 Gallery - remove if you only want one gallery
 $('#wrapper2').gpGallery({
  guildID      :'278466',
  showTools    : false,
  startGallery : 0
 });
 // end Test Site 4 Gallery code

});
</script>

Customizing the HTML/CSS

• Gallery Layout
  This gallery is broken into six areas that can be customized. It sounds like a lot, but I've already done most of the work 
  
  
1. Gallery Toolbar
2. Gallery Body
3. Sub Gallery Header
4. Sub Gallery Content
5. Colorbox popup / Control panel
6. Comment tooltip
   
   
There are a whole bunch of options you can set to modify the gallery. I've listed them below in a nice big table for quick reference. So check out the "Customizing the Script" section for more details.


• Gallery Toolbar
  The toolbar starts out hidden. The script needs to add the correct links to the "Open Gallery" and "Upload" image icons, just in case someone clicks too fast. In the code above, it is the HTML that is at the very top.
  
  If you add a second gallery, like in the code above, it won't be associated with another toolbar. I didn't want to deal with security issues and admin rights to the second gallery. Anyway, the toolbar has two parts to it:
  
  
  1. Title:
     The script changes the Gallery title for you. Now that I think about it, I shouldn't have bothered since you can just modify the HTML yourself... LOL oh well. Anyway to style the Gallery Title use the following CSS. The second title ".gpgTitle2" is the title for the second gallery, which you can see in the code above is just a <div> (in purple). The following CSS reduces the font size (1em = 100%) and sets a height so the second title has some space between it and the gallery below. You could change the text color, and do whatever else you want.
     
     .gpgTitle, .gpgTitle2 { font-size: 0.9em; height: 20px; }
     
     
  2. Gallery Links/Icons:
     The script allows you to change the text of the "Open Gallery" and "Upload" links, but the CSS automatically replaces the text with icons. So if you want text instead of icons, you will have to download and modify either the "http://www.axiomfiles.com/Files/258012/gallery-dark-colorbox.css" (dark icon theme) or "http://www.axiomfiles.com/Files/258012/gallery-light-colorbox.css" (light icon theme). Hopefully I've labeled the CSS in that file well enough you can figure out how to remove it.
     
     There is CSS in the "Stuff you shouldn't have to mess with..." section to float the icons to the right side if you want to move them elsewhere.
     
     
• Gallery Body
  This is the empty <div></div> seen in the HTML of the code above. The default gallery (targets your own guild) is in light orange and the second gallery (targets a different guild site) is in purple. The script adds the gallery inside these divs, so you actually could put the second div on the other side of the page all by itself (just the purple HTML, not the purple script) if you so desired. Note that the div classes are the same, but the ID's are different. If you don't want to add a second gallery, just remove the HTML and script in purple (don't forget to remove the variables inside the purple script because they are white).
  
  default guild HTML
  <div id="wrapper" class="gpgallery"></div>
  
  Second guild gallery HTML
  <div class="gpgTitle2">Help Site 4</div>
  <div id="wrapper2" class="gpgallery"></div>
  
  There is no associated CSS styling for the gallery body "wrappers". They are going to expand/contract to fit inside whatever zone you put them into (left, center or right).


• Sub Gallery Header
  The headers are the clickable portion of the accordion. They are set up to toggle with each click, but close other selected sub galleries when one opens.
  
  By default the header uses the same class as the forum headers (ForumCategoryHeader), so it should match your site theme automatically.
  
  If you want to modify the header, you can use the following CSS styling, or change the actual class added by changing that option in the script.
  
  
  1. Unselected Header:
     The unselected header can be modified using the following CSS, I've added the background and text color properties. These are the grey bars seen in the screen shot above. The second line of CSS targets the arrow on the right side of the header. You can change the arrow using custom script options found in the Customize the Script section.
     
     .gpgallery h2 { background: #555; color: #aaa; font-size: 14px; }
     .gpgallery h2 span { color: #ddd; }
     
     
  2. Selected Header:
     The selected header can be modified with the CSS below. The light blue bar in the screen shot is the selected header. Target the arrow on the right side of the selected header with the second line of CSS:
     
     .gpgallery h2.selected { background: #0c4000; color: #ddd; }
     .gpgallery h2.selected span { color: #fff; }
     
     
• Sub Gallery Content
  The sub gallery is actually an unordered list styled using the CSS in the "Stuff you shouldn't have to mess with" section. But if you want to change the size of the images seen in the subgallery, adjust the following CSS as desired:
  

   .gpgallery img { width: 50px; height: 50px; }

  Note: The thumbnail images in the sub gallery are retrieved from the JSON feed, if no thumbnail URL is provided, then it will default to the full image. This image has the above CSS applied to it so if you have a lot of large images, you may notice that the thumbnails load a little slow. At the time of the writing of these instructions, there is no way to add a thumbnail image URL to the associated image.
  
  
• Colorbox Popup / Control Panel
  The colorbox plugin has a separate CSS file to add its stylings. You  can find it in the code above by looking for a <link> with an orange URL. I reformatted the CSS file and made two versions:
  
  
  • Default Themes
    All of the associated images have also been added to my guild files, so please feel free to use them.
  
  
  • http://www.axiomfiles.com/Files/258012/gallery-dark-colorbox.css (dark icon theme, seen in the screen shot above)
  • http://www.axiomfiles.com/Files/258012/gallery-light-colorbox.css (light icon theme)
    
    
  Each theme uses five images.
  
  
  1. border.png (dark|light) : top & bottom borders
  2. box.gif (dark|light) : side borders & corners
  3. controls.png (dark|light) : contains all of the icons used in both the gallery widget and the colorbox popup control bar
  4. loading.gif (dark|light) : animated loading graphic
  5. overlay.png (dark|light) : this is the image behind the popup window. It overlays the page so you can focus more on the popup window and reduces the noise... it is made semi-transparent by the script settings.
     
     
  • Custom Themes
    You'll need to download one of the default css themes above and modify that file yourself. I grouped together all of the CSS classes that used a single image sprite, so you should only have to change the URL of the six images above just once.
    
    Also, if you know how to use photoshop and want to change the popup or icon colors, I've made the .psd files available. I'm no pro at photoshop, so don't expect to find perfect buttons (hehe)... Here are the three files you will need: (1) gallery-border.psd (left and right sides), (2) gallery-box.psd (box corners) and (3) gallery-controls.psd (all of the icons used)
    
    One bit of CSS that you may need to use is the minimum image size. I included this because my avatars are pretty small images and a small colorbox popup window will overlap the image # and image description. Also some of the text may be partially hidden by the icons... it's not pretty. So I set a minimum image size to bypass this problem. The only problem with this CSS is that it stretches out the small images and they may appear blurry.

    #cboxPhoto { min-width: 300px !important; min-height: 250px !important; }

• Comment tooltip
  The currently displayed image will reveal a "Comments" icon when comments are available for an image. When you hover over the icon, the comments will show uo in a tooltip. You can modify the styling of the tooltip contents using the following CSS. The first line adds style to the "Comments" title and the second line adds style to the "Name: (date)" portion of the comment.
  

  .gpgCommentTitle { font-weight: bold; }
  ul.gpgCommentBody span { font-weight: bold; }
  
  

Customizing the Script

• Understanding the code and the options:
  
  The code above will run without any customization and show your own site gallery. But there are a bunch of options I've included so you can customize it to your liking. The way the function works is you. Options are added as follows:
  
  $('#wrapper').gpGallery({ key : value, key : value, key : value });
  
  ** NOTE ** the last "key: value" pair should NOT be followed by a comma or IE will puke up small chunks of the last spam e-mail you tried to delete (ok, not really, but it will fail).
  
  

  $('selector')	This points to the "<div id="wrapper"></div>" (in light orange) seen in the code above. You can see I added a second wrapper which is intended for the second gallery "<div id="wrapper2"></div>" (in purple). Note that selectors that point to an ID will begin with a hash sign "#".
  gpGallery({})	gpGallery is the name of the function that makes the gallery itself. When putting this together with the  $('selector') above, make sure there is a period separating them.
  key : value	This is called a key:value pair. The key is the name of the variable and the value is well, the value. For example, if I added someone named John Smith to my address book, I would look in my book and find "Last Name" and enter "Smith". Last name is the key and Smith is the value. Below is the list of key : value pairs that are recognized by this script, anything more will just be ignored.



• All of the options
  
  

  Key	Value (default shown)	Description
  arrowDown	'▼'	Triangular arrow shown when the associated sub-gallery is closed (can be text or HTML).
  arrowUp	'▲'	Triangular arrow shown when a sub-gallery is open (this can be text or HTML).
  classHeader	'ForumCategoryHeader'	Accordion header class.
  confirmation	'Delete this comment?'	Message you see when you click the delete comment icon to confirm your desire
  currentImage	'{current}/{total}'	Text for current image. "(current)" and "(total)" get replaced with numbers by the colorbox script.
  dateMonthFirst	true	If true, dates will show as 'mm/dd/yyyy'; false will show 'dd/mm/yyyy'
  guildID	getGroupId()	Default is a function that provides the current guild ID of the page. You can change this value to point to other galleries (public galleries or access permission required to work). You can get this guildID from the URL seen in your browser address bar.
  hiddenGallery	''	Add the title of the image gallery that shouldn't be displayed. If adding more than one, separate the titles with a comma
  instance	null	Add Gallery editor icon if admin provides ContentInstance number (see comment below)**
  maxHeight	'95%'	Sets the maximum image height. If not set, very tall images will require you to use the scrollbar to view it. If set, it resizes the image to make it viewable all at once.
  maxWidth	'100%'	Sets the maximum image width to prevent image scrolling to the right.
  noCommentsText	'No comments found'	Comment tooltip message displayed when no comments are found for an image
  openGallery	'Open'	Open Gallery Link Text (or HTML, but by default this is hidden using CSS) found in the gallery toolbar.
  showTime	true	Show comment time with date (date is always shown)
  showTools	true	Set to true or false. If true, it will show the Gallery toolbar (include text, upload and open gallery links).
  slideShow	true	Activates colorbox's slideshow ability.
  slideShowAuto	false	Set to true or false, If true, Colorbox will open with the slideshow playing.
  slideshowSpeed	2500	Sets the speed of the slideshow in milliseconds.
  speed	500	Time in milliseconds to slide open or close a sub-gallery in the widget.
  startGallery	0	This sets the sub gallery that is open on startup. The value starts from one, but use a zero (0) to start with all sub galleries closed.
  toolbarText	'Gallery:'	Gallery title. Found in the gallery toolbar and it can be set as eiher text or HTML.
  tooltipWidth	400	Set the comment tooltip width. But this only works with updated tooltip script.
  upload	'Upload'	Upload image to Gallery text found in the gallery toolbar. This can contain  text or HTML, but by default this is hidden using CSS).

  ** instance: This option adds a gallery editor icon to the mini gallery. In order to get the instance number you need, you will have to add an "Image Gallery" type widget to your site. Once you reload the page and see the gallery, click on the edit button at the bottom. A popup window should appear and reveal the following URL (group and contentInstance numbers will be seen in place of the hash marks (#)):
  

  http://www.guildportal.com/CExplorer/exDlgContentEditor.aspx?Group=######&ContentInstance=########

  Copy the number in red and add it to your key: value pair when you initialize the script - see the last example below. Once you are done, you can remove the Image Gallery widget, we only needed this number


• Examples:
  
  

  Action	Script	Notes:
  Change gallery toolbar header arrows	$('#wrapper').gpGallery({   arrowUp: '<img src="myUpArrow.gif"/>',   arrowDown: '[+]' });	Replace the arrows with HTML (like the <img> tag) or just plain text. Surround the new content with quotes.
  Change gallery header class	$('#wrapper').gpGallery({   classHeader: 'galleryHeader' });	The default "ForumCategoryHeader" class will be replaced by "galleryHeader" which you, hopefully, have styled in your CSS.
  Change colorbox current image display	$('#wrapper').gpGallery({   currentImage : 'Image {current} of {total}' });	If the replacement text includes "{current}" it will be replaced with the current image being viewed and the "{total}" will be replaced by the total number of images in that sub gallery. By default, you will see something like "1/5". In the example to the left, you will see "Image 1 of 5".
  View another site's gallery	$('#wrapper').gpGallery({   guildID : '258012' });	The guild ID can be obtained from the URL. If hover over this link.
  Change colorbox popup max height & width	$('#wrapper').gpGallery({   maxHeight : '500px',   maxWidth  : 500 });	Settimg the max height & width sets a limit to the colorbox popup size. Use a value (500, with no quotes it will be assigned as pixels), percentage ('50%', using quotes) or the size in pixels ('500px', in quotes).
  Change gallery toolbar text	$('#wrapper').gpGallery({   toolbarText : 'Our Site Gallery',   openGallery : 'Open default gallery',   upload      : 'Upload an image' });	This code will replace the gallery toolbar text. If you plan to do this, you will have to download, copy and modify the "gallery-dark-colorbox.css" or "gallery-light-colorbox.css" stylesheets, because the CSS there hides all text. Then upload your CSS & adjust the code above to point to your custom stylesheet.
  Hide gallery toolbar	$('#wrapper').gpGallery({   showTools : false });	This will hide the gallery toolbar.
  Turn off the Slideshow	$('#wrapper').gpGallery({   slideShow : false });	The false should not have quotes surrounding it.
  Open colorbox popup with the slideshow playing & make it change slide slower	$('#wrapper').gpGallery({   slideShowAuto  : true,   slideshowSpeed : 4000 });	These options will set the slideshow to autoplay when the colorbox popup opens and set the time to display each slide to 4000 milliseconds ( 4 seconds ).
  Set the speed of the accordion display	$('#wrapper').gpGallery({   speed : 1000 });	When you click on a sub gallery header, it will take 1000 millisecond ( 1 second ) for the slide effect to hide or show the sub gallery associated with it.
  Start the accordion with the second sub gallery open	$('#wrapper').gpGallery({   startGallery : 2 });	The second gallery (2) on the list will open. Set it to zero (0), to start with all sub galleries closed.
  Adjust the comment tooltip width & add an content instance number for the editor	$('#wrapper').gpGallery({   tooltipWidth : 500,   instance: 12345678 });	Sets the tooltip width of the comments (if available). But this will only work if you are using the updated tooltip script. Also assign a content instance number (see ** comment above this table)

Edit (7/2/2010): Added the ability to add and delete comments (if you have permission).

Hi, Mottie!

It's been awhile since you last updated this post so perhaps something has changed with the GP back-end code, but when I tried to use your code I ran into some trouble.
I was able to get it to work on my first attempt without further alteration, however when I tried to remove the link to the "Help Site 4" galleries, I was no longer able to see the images from our own site.  Instead, a new browser window opened telling me that I had no public galleries and that I would need to log in to see the images (despite being logged in as a super-user).  I looked at the file manager, thinking there might be a folder attribute that needed to be set, but finding no such option I removed the widget entirely and re-added it using the unedited code listed above.  This time, however, I was able to see only the help site images; our own images being unavailable due to the login restriction.

I'm at a bit of a loss here.  It worked, then, for reasons I don't understand, it stopped working and is telling me I need to log in.  Any advice you can offer will be greatly appreciated.

Mottie,

I've added the widget back to the site (top-right corner, labelled "Under Construction").
The only change I made was to remove this block of code:

 // Test Site 4 Gallery - remove if you only want one gallery
 $('#wrapper2').gpGallery({
  guildID      :'278466',
  showTools    : false,
  startGallery : 0
 });
 // end Test Site 4 Gallery code


As you can see, the words "Help Site 4" appear in the window, but nothing else.

Any insight you can offer will be appreciated!

Ah... It turns out I'm just a dumbass.  I have NoScript installed w/Firefox and it was blocking the axiomfiles scripts.  It's working now - thanks!