dcsimg
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,674
    GHgraphix, have you tried to do it by yourself?

  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!

  5. #5
    Join Date
    May 2006
    Location
    Somewhere behind your screen
    Posts
    1,674
    lol

  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