简单的 jQuery Gallery 自制？

发布于 2024-10-15 09:46:56 字数 664 浏览 5 评论 0原文

我尝试了各种图库插件，但没有一个适合我的需求。

我有一些标记如下：

<div id='thumbs-list'>
    <div class='thumb-item'>
        <a href='big1.jpg'><img src='thumb1.jpg' /></a>
    </div>
    <div class='thumb-item'>
        <a href='big2.jpg'><img src='thumb2.jpg' /></a>
    </div>
    <div class='thumb-item'>
        <a href='big3.jpg'><img src='thumb3.jpg' /></a>
    </div>
</div>
<div id='fullsize'>
    <img src='big1.jpg' />
</div>

我想将链接的 JPG 交换为 ID“全尺寸”，最好具有一些淡入淡出效果，但至少图像应该切换。

我如何开始使用简单且灵活的 jQ 脚本？谢谢！

原文

I tried various Gallery plugins, but none fits my needs.

I have some markup as follows:

<div id='thumbs-list'>
    <div class='thumb-item'>
        <a href='big1.jpg'><img src='thumb1.jpg' /></a>
    </div>
    <div class='thumb-item'>
        <a href='big2.jpg'><img src='thumb2.jpg' /></a>
    </div>
    <div class='thumb-item'>
        <a href='big3.jpg'><img src='thumb3.jpg' /></a>
    </div>
</div>
<div id='fullsize'>
    <img src='big1.jpg' />
</div>

I want to swap the linked JPGs into the ID 'fullsize', preferably with some fading effect, but at least the image should switch.

How can I get started with a simple hence flexible jQ script? Thanks!

分享到QQ

分享到微博

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

发布评论

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

故事还在继续 2024-10-22 09:46:56

$(".thumb-item a").click(function(e){
    e.preventDefault();
    var $a = $(this);
    $("#fullsize img").fadeOut("slow", function(){
        $(this).attr("src", $a.attr("href")).fadeIn("slow");
    });
});

工作示例： http://jsfiddle.net/cp22v/

$(".thumb-item a").click(function(e){
    e.preventDefault();
    var $a = $(this);
    $("#fullsize img").fadeOut("slow", function(){
        $(this).attr("src", $a.attr("href")).fadeIn("slow");
    });
});

working example: http://jsfiddle.net/cp22v/

回复收藏 0 原文

~没有更多了~