www.webdeveloper.com
Results 1 to 6 of 6

Thread: Help me add captions to my thumbnail navigation gallery

Hybrid View

  1. #1
    Join Date
    Mar 2012
    Posts
    5

    Unhappy Help me add captions to my thumbnail navigation gallery

    http://208.82.21.222:6011/gallery.html

    Page is listed above. I am not sure how to call captions for each image.
    If someone could help that would be great!

    Thanks

  2. #2
    Join Date
    Mar 2012
    Posts
    18
    would you be able to post your script?

  3. #3
    Join Date
    May 2006
    Location
    Somewhere behind your screen
    Posts
    1,648
    GHgraphix, have you tried to do it by yourself?
    xxx: Guess Buddhist riddle: "What is the sound of one hand clapping?"
    yyy: facepalm

  4. #4
    Join Date
    May 2005
    Location
    Dirty Jersey
    Posts
    1,402
    Quote Originally Posted by Padonak View Post
    have you tried to do it by yourself?
    this is a man after my own heart!

    1. If you reply to my post, and your reply would then appear directly beneath my post, DON'T QUOTE MY ENTIRE POST!!! IT'S REDUNTANT!!! IT'S ASININE!!!! IT'S REDUNDANTLY ASININE!!!!! DON'T DO IT!!!!
    2. jQuery extends the functionality of JavaScript. If you don't know JavaScript, give up on that jQuery script and learn JavaScript. You'll save yourself a lot of frustration, I promise.
    3. Use the [code][/code] tags. Otherwise, you may be left wondering why no one responded to your eyesore of a thread.


  5. #5
    Join Date
    May 2006
    Location
    Somewhere behind your screen
    Posts
    1,648
    lol
    xxx: Guess Buddhist riddle: "What is the sound of one hand clapping?"
    yyy: facepalm

  6. #6
    Join Date
    Mar 2012
    Posts
    5

    Javascript

    <!-- The JavaScript -->
    <script type="text/javascript">
    $(function() {
    //the loading image
    var $loader = $('#st_loading');
    //the ul element
    var $list = $('#st_nav');
    //the current image being shown
    var $currImage = $('#st_main').children('img:first');

    //let's load the current image
    //and just then display the navigation menu
    $('<img>').load(function(){
    $loader.hide();
    $currImage.fadeIn(3000);
    //slide out the menu

    }).attr('src',$currImage.attr('src'));

    //calculates the width of the div element
    //where the thumbs are going to be displayed
    buildThumbs();

    function buildThumbs(){
    $list.children('li.album').each(function(){
    var $elem = $(this);
    var $thumbs_wrapper = $elem.find('.st_thumbs_wrapper');
    var $thumbs = $thumbs_wrapper.children(':first');
    //each thumb has 180px and we add 3 of margin
    var finalW = $thumbs.find('img').length * 183;
    $thumbs.css('width',finalW + 'px');
    //make this element scrollable
    makeScrollable($thumbs_wrapper,$thumbs);
    });
    }

    //clicking on the menu items (up and down arrow)
    //makes the thumbs div appear, and hides the current
    //opened menu (if any)
    $list.find('.st_arrow_down').live('click',function(){
    var $this = $(this);
    hideThumbs();
    $this.addClass('st_arrow_up').removeClass('st_arrow_down');
    var $elem = $this.closest('li');
    $elem.addClass('current').animate({'height':'170px'},200);
    var $thumbs_wrapper = $this.parent().next();
    $thumbs_wrapper.show(200);
    });
    $list.find('.st_arrow_up').live('click',function(){
    var $this = $(this);
    $this.addClass('st_arrow_down').removeClass('st_arrow_up');
    hideThumbs();
    });

    //clicking on a thumb, replaces the large image
    $list.find('.st_thumbs img').bind('click',function(){
    var $this = $(this);
    $loader.show();
    $('<img class="st_preview"/>').load(function(){
    var $this = $(this);
    var $currImage = $('#st_main').children('img:first');
    $this.insertBefore($currImage);
    $loader.hide();
    $currImage.fadeOut(2000,function(){
    $(this).remove();
    });
    }).attr('src',$this.attr('alt'));
    }).bind('mouseenter',function(){
    $(this).stop().animate({'opacity':'1'});
    }).bind('mouseleave',function(){
    $(this).stop().animate({'opacity':'0.7'});
    });

    //function to hide the current opened menu
    function hideThumbs(){
    $list.find('li.current')
    .animate({'height':'60px'},400,function(){
    $(this).removeClass('current');
    })
    .find('.st_thumbs_wrapper')
    .hide(200)
    .andSelf()
    .find('.st_link span')
    .addClass('st_arrow_down')
    .removeClass('st_arrow_up');
    }

    //makes the thumbs div scrollable
    //on mouse move the div scrolls automatically
    function makeScrollable($outer, $inner){
    var extra = 800;
    //Get menu width
    var divWidth = $outer.width();
    //Remove scrollbars
    $outer.css({
    overflow: 'hidden'
    });
    //Find last image in container
    var lastElem = $inner.find('img:last');
    $outer.scrollLeft(0);
    //When user move mouse over menu
    $outer.unbind('mousemove').bind('mousemove',function(e){
    var containerWidth = lastElem[0].offsetLeft + lastElem.outerWidth() + 2*extra;
    var left = (e.pageX - $outer.offset().left) * (containerWidth-divWidth) / divWidth - extra;
    $outer.scrollLeft(left);
    });
    }
    });
    </script>
    <!-- End JavaScript -->

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles