开发者

How to open thumbnail wrapper of the image gallery automatically when the page loads ? (jQuery)

开发者 https://www.devze.com 2023-04-09 00:08 出处:网络
I need to tell you that i\'m very new to jquery and still learning, please don\'t laugh at this. I wanted to have an image gallery on my website and found this beautiful gallery that uses jquery. Here

I need to tell you that i'm very new to jquery and still learning, please don't laugh at this. I wanted to have an image gallery on my website and found this beautiful gallery that uses jquery. Here is the link for it:

http://tympanus.net/Tutorials/ThumbnailsNavigationGallery/

So there is this snippet that helps the user to click on the album or rather the arrow next to it, to open and close the thumbna开发者_开发知识库il wrapper for the album. All I want is for the first album to open automatically when the webpage is loaded completely. I guess we might have to use the .load() method but I'm not sure how to use it. The code that is inserted here has both the functions to open and close the album, I just wanted to automate the opening part.

//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();
});    

I tried getting help from the original author of this script but unfortunately she is not responding. Looking forward to your kind assistance. Thanks in advance!!


This 2 lines:

$list.find('.st_arrow_down').live

and

$list.find('.st_arrow_up').live

search for HTML elements with class="st_arrow_down" or class="st_arrow_down" and bind event "click" on these

This code on

$(document).ready(function () {
  var $elem = $('.album').first();
  $elem.addClass('current').animate({'height':'170px'},200);  
  $elem.show(200);
  var cnt = $elem.find('.st_wrapper').first().css('display','block');
});

When DOM is ready, you search first album then show animation and display the imgs

Bye

0

精彩评论

暂无评论...
验证码 换一张
取 消

关注公众号