Modifying the Image Gallery

GuildPortal admin site link to the original post


The Facebox popup isn't set up to allow for an easy way to add a previous and next button, but I found another method that should work - modifying the "Image Gallery" itself. I added this code to my "test-site3" so you can check it out.



Put this code into a free form text/HTML box on the page with your image gallery or add it to your footer (Control Panel > Style & Colors > Footer)

The Code

<style type="text/css">
#grpSlides {
 height: 170px;
 width: 152px;
 margin: 4px auto;
}
#slideBox {text-align:center;}
#slideDescription {font-size:14pt;}
</style>

<script type="text/javascript">
$(document).ready( function() {
 $("img[title*='- Click to advance to the next image.']").each(function(){
  $(this).attr("title",$(this).attr("title").replace(" - Click to advance to the next image.","")).parent().attr("target","").facebox();
 })
 var nextImg = '&gt;';
 var prevImg = '&lt;';
 var openGallery = 'Open Gallery';

$('a[id*="_lnkFullGallery"]').html(openGallery).parent().wrap("<div id='slideBox'></div>");
 var galleryLink = '<a href="#" id="slidePrev">'+prevImg+'</a> ' + $("#slideBox > span").html();
 galleryLink += ' <a href="#" id="slideNext">'+nextImg+'</a><div id="slideDescription"></div>';
 $("#slideBox").html(galleryLink);
 $('#grpSlides').unbind().cycle({
  fx:      'fade',
  speed:   'fast',
  timeout: 6000,
  next:    '#slideNext',
  prev:    '#slidePrev',
  after:   slideDes
 });
})
function slideDes() {
 $('#slideDescription').html($(this).find('img').attr('title'));
}
</script>

Customizing

• The CSS to control the appearance of the image gallery & description was added. Modify it to your liking, otherwise there really isn't anything to change except the description font size (in red).
  
  
• You can modify or replace the text for the next image ("&gt;") or previous image ("&lt;") in the code (in blue), these can also be replaced with an image if you desire, just include the entire image tag as follows.
  
   var nextImg = '<img src="my-next-image.jpg">';
   var prevImg = '<img src="my-prev-image.jpg">';
  
  
• Change the message "Open Full Gallery" with what ever you want by editing the openGallery variable text in blue:
  
   var openGallery = 'Open Gallery';
  
  
• If you don't want to include the image description, then add a "//" in front of the line in green. This comments out that line so it is ignored.
  
  
• The image gallery script also allows you to have different effects... the standard effect is "fade", but you can change this to others, including:
  
  

  blindX blindY blindZ cover curtainX curtainY fade fadeZoom growX growY scrollUp scrollDown scrollLeft scrollRight

  scrollHorz scrollVert shuffle slideX slideY toss turnUp turnDown turnLeft turnRight uncover wipe zoom

  
  There are numerous other effects you can try out, but be careful... check out the other things you can do here at the plugin page.
  
  
• The "timeout" variable (in red) adjusts the time between images in the slide show (time is in milliseconds, 6000 = 6 seconds).
  
  timeout: 6000,
  

Edited (1/14/2009): Fixed the facebox image popup. And did a major revision on the code above, I didn't add a new post since the older version didn't look as "clean" to me - YAY for OCD! [bunny]
Edited (1/17/2009): Fixed this code to work with the jQuery box... sorry it's a pain, but it's the only way this will work now.
Edited (1/19/2009): LOL ok back to the original version... no more jQuery box!

Jin'aya over on the admin boards requested to modify the image gallery to display full sized images instead of thumbnails. So I messed around with the code and I think this should work.

Full Sized Image Gallery

Make sure this code is added BELOW your image gallery into a free form text/HTML content box or into the Footer HTML.

<script type="text/javascript">
$(document).ready(function(){
 var minimumHeight = 500;
 var maximumWidth = 1000;
 $('#imgPlaceDiv').css({ 'min-height':minimumHeight, 'height':'', 'width':'' });
 $('#imgWrapperAnchor').css({ 'max-height':'', 'max-width':'' }).attr('title','');
 $('#imgGalleryImage').css({ 'max-height':'', 'max-width':maximumWidth }).unbind();
 $('#imgCaptionDiv').css({ 'text-align':'center', 'width':'' });
})
var showGalleryImage = function(sGalleryImgPath, sDescription) {
 $('#imgGalleryImage').fadeOut('slow', function(){
  $('#imgGalleryImage').attr('src', sGalleryImgPath.replace(/axst_/,'')).load(function(){
   $('#imgGalleryImage').fadeIn('slow');
   $('#imgCaptionDiv').html(sDescription);
  });
 });
}
</script>

Some notes about this script:

• It removes the size limits on the image gallery, but I added some variables (these won't work with IE, I don't think):
  
  
  
  • You can set the minimum height (minimumHeight) of the image area (when the image fades completely out, the box collapses to this height).
  
  
  • There is also a maximum width (maximumWidth) for those images that are so large they bump out your content box sides.
  
  
• The image now fades out like it should, but now will not fade back in until the image is completely loaded - it used to flicker out then in, then just replace the image.


• You can no longer click on the image to open a larger size.


• Hovering over the image, no longer pauses the gallery - I can add this back in if you want.


• You have no control over the image displayed... it's random and will always be 8 seconds between images - I can let you control this with some additional coding.

Edit (2/1/2010): Updated to display large images instead of thumbnails.

Sorry, but trying to set up GP with images and video's but having several problem. It's a free site so has restraints on it, I put in alot of free text HTML's in most spots I want to try to add too like (images,video,TS) but still having problems like when I went to TS and downloaded server/client also went to thier site for button for site to use as link to thier downloads, but it has the picture but no click function ??
Thx for any help you may be able to give me on this !!!
LG

Sorry, shoulda thought of that lol here's site:http://guildportal.com/Guild.aspx?GuildID=328772&TabID=2754916 
Thx LG

Yeah, I been trying to via upload and manager, but get error 404 each time, I'll try this link you put up for TS, at the TS link they got buttons there, but when I download them, copy then paste it's just either the image or HTML link and niether work when click them.
Thx for help, this is all new to me, but somehow I volentiered to help lol
LG