如何在页面加载时自动打开图库的缩略图包装？（jQuery）

发布于 2024-12-06 20:27:46 字数 1119 浏览 1 评论 0原文

我需要告诉你，我对 jquery 很陌生，还在学习中，请不要笑。我想在我的网站上有一个图片库，并发现了这个使用 jquery 的漂亮图库。这是它的链接：

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

所以有此代码片段可帮助用户单击相册或更确切地说单击它旁边的箭头，以打开和关闭相册的缩略图包装。我想要的只是当网页完全加载时第一个相册自动打开。我想我们可能必须使用 .load() 方法，但我不确定如何使用它。此处插入的代码具有打开和关闭相册的功能，我只是想自动化打开部分。

//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 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 thumbnail 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!!

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

隔岸观火 2024-12-13 20:27:46

这 2 行：

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

并

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

搜索 class="st_arrow_down" 或 class="st_arrow_down" 的 HTML 元素
并在这些上绑定事件“单击”

此代码

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

当 DOM 准备好时，您搜索第一个专辑然后显示动画并显示 imgs

再见

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 原文

~没有更多了~