Sign Up! Login: Password: New User? Forgot? Support
Code 
 
 
Forums 
Forums : Multimedia > Modifying the Image Gallery
Mottie (SuperAdmin) 1/10/2009 3:35 AM EST : Modifying the Image Gallery
ACK!
Mottie
Posts: 3883

0
Like

0
Dislike

Modifying the Image Gallery

GuildPortal admin site link to the original post

***********************
This script is outdated!
Please read the next post
on how to change the new
image gallery
***********************

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!
    Characters: Mottie Motty Mortie Ooshiny Mot Fudgems
    TopBottom

    Mottie (SuperAdmin) 4/12/2009 4:52 PM EST : RE: Modifying the Image Gallery
    ACK!
    Mottie
    Posts: 3883

    0
    Like

    0
    Dislike

    Modifying the "New" Image Gallery

    Well the previous post about modifying the image gallery no longer applies as the code was completely changed... the "jQuery cycle" addon is no longer being used, so you can't change the type of fadeout or the timing between images. On a positive note, it does automatically make the image open in a facebox popup now and it shows the image description as well.



    Put this code into a free form text/HTML box on the page with your image gallery or add it to your footer.

    The Code
    <script type="text/javascript">
    $(document).ready(function(){
     var nextImg = '&gt;';
     var prevImg = '&lt;';
     var openGallery = 'Open Gallery';

     $("a[id*='lnkFullGallery']").html(openGallery).wrap("<div id='slideBox'></div>");
     var prevLink = '<a href="javascript:pickImage(false)">'+prevImg+'</a> ';
     var nextLink = ' <a href="javascript:pickImage(true)">'+nextImg+'</a>';
     $("#slideBox").prepend(prevLink).append(nextLink).parent().css('margin','');
    })
    function pickImage(nxt) {
     galleryPaused = true;
     var tmp = $("#imgCaptionDiv").html();
     var indx = 0;
     var imglen = imgList.length-1;
     for (k=0;k<imglen+1;k++){
      if (imgDescList[k]==tmp) indx = k;
     }
     if (nxt) { indx++ } else { indx-- }
     if (indx > imglen) indx = 0;
     if (indx < 0) indx = imglen;
     showGalleryImage(imgList[indx].toString(), imgDescList[indx].toString());
    }
    var showGalleryImage = function(sGalleryImgPath, sDescription){
     imgHolder.fadeOut('2500', function(){
      imgHolder.attr("src", sGalleryImgPath);
      imgHolder.bind("click", function(){jQuery.facebox('<center><img src="'+sGalleryImgPath+'"><br><br><div class="desc">'+sDescription+'</div>') });
      imgHolder.parent().attr("href", "javascript:void(0);");
      jQuery("#imgCaptionDiv").html(sDescription);
      imgHolder.fadeIn('1500', function() { } );
     });
    }
    </script>
    Customizing
    • 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';

    • I updated this script to replace the image popup from opening inside an editor window (which has a white background) to opening in a facebox window. If you only want that code, then read this post. Otherwise there is no change except you can use CSS to style the image description:

      #facebox .desc { color:#ffffff; font-weight:bold; font-size:18px; }
      #slideBox, #imgCaptionDiv { margin:0 auto; text-align:center }
    Edit (7/26/2009): Updated the code to replace the editor window popup with a facebox popup. Included CSS that will add style to the image caption.
    Edit (7/28/2009): Fixed an error in the code.
    Characters: Mottie Motty Mortie Ooshiny Mot Fudgems
    TopBottom

    Mottie (SuperAdmin) 8/10/2009 12:30 PM EST : Image Gallery - Removing image size restrictions
    ACK!
    Mottie
    Posts: 3883

    1
    Like

    0
    Dislike

    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.
    Characters: Mottie Motty Mortie Ooshiny Mot Fudgems
    TopBottom

    LG58 (Applicant) 10/12/2009 4:27 PM EST : RE: Modifying the Image Gallery
    LG58
    Posts: 44

    0
    Like

    0
    Dislike

    Hey Mottie, I tried this code on my GP in a HTML box, and it saved, but doesn't show anything it's empty box with just the edit box in it ??
    Any clues what I did wrong lol
    Thx LG !!
    TopBottom

    LG58 (Applicant) 10/12/2009 4:32 PM EST : RE: Modifying the Image Gallery
    LG58
    Posts: 44

    0
    Like

    0
    Dislike

    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
    TopBottom

    Mottie (SuperAdmin) 10/12/2009 5:05 PM EST : RE: Modifying the Image Gallery
    ACK!
    Mottie
    Posts: 3883

    1
    Like

    0
    Dislike

    Hi LG58!

    I'm not quite sure what you are asking me. Is it about a Team Speak status box? The site should provide an embed code that you add to a free form text/HTML type content box (paste it while in <> HTML mode). If the code isn't working, it would help me if you could share a link to your site.

    As for the script above, it only works if you already have a gallery set up. You'll need to add images and such. All the code in this post is modify the gallery.
    Characters: Mottie Motty Mortie Ooshiny Mot Fudgems
    TopBottom

    LG58 (Applicant) 10/12/2009 5:41 PM EST : RE: Modifying the Image Gallery
    LG58
    Posts: 44

    0
    Like

    0
    Dislike

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

    Mottie (SuperAdmin) 10/12/2009 8:46 PM EST : RE: Modifying the Image Gallery
    ACK!
    Mottie
    Posts: 3883

    1
    Like

    0
    Dislike

    Hi LG58!

    Ok, honestly I don't know much about TeamSpeak other than I really didn't like it in the past.

    I'm still not sure exactly what you want, but if you want a team speak box on your site I googled this one: http://www.tsviewer.com/

    After looking at your site, and as I said before, your gallery has no images in it so the script doesn't look like it's working. You need to add images.
    Characters: Mottie Motty Mortie Ooshiny Mot Fudgems
    TopBottom

    LG58 (Applicant) 10/13/2009 8:48 AM EST : RE: Modifying the Image Gallery
    LG58
    Posts: 44

    0
    Like

    0
    Dislike

    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
    TopBottom

    LG58 (Applicant) 10/15/2009 7:42 AM EST : RE: Modifying the Image Gallery
    LG58
    Posts: 44

    0
    Like

    0
    Dislike

    I made a couple link HTML's that work depending on what ppl are looking for if you could look at these and pass on suggestions that would be great:<a href="http://www.teamspeak.com/?page=downloads" target="_blank"><img alt="" src="http://www.teamspeak.com/media_repository/files/mediakit/skyscrapers/skyscraper01.jpg" /></a>, this one will make it so don't have to go back to previous page. While this one:<a href="http://www.teamspeak.com/?page=downloads"><img alt="" src="http://www.teamspeak.com/media_repository/files/mediakit/skyscrapers/skyscraper01.jpg" /></a>, you would !!
    Thx for all your HELP Mottie, I'm actually learning how to make link with and without anchors now lol, who'd of guessed !!
    Thx LGshocked
    TopBottom

     
     
    Key 
    New posts No new posts
    New posts ( popular ) No new posts ( popular )
    New posts ( sticky ) No new posts ( sticky )
    New posts ( locked ) No new posts ( locked )
     
     
    Who's Online 
    There are   members online.
     
     
    So-and-so has logged on!
    %title%
    %message%