自定义 jquery 画廊

Question

我正在创建一个模板。除了 jquery 图像库之外，所有 xhtml/css 工作都已完成。周围有太多的jquery画廊，我不知道如何根据情况自定义它们

这是一个三列模板..第一列有导航。第二列将从第三列的缩略图中选择图像。第三列中还有用于旋转缩略图的向上/向下按钮。单击缩略图应加载到第二列的图像 div 中。

我需要提供更多信息吗？

Answer 1

由于您实际上没有提出问题，所以我假设您是在问如何开始。您还没有给出 HTML 结构，所以我也必须假设这一点。

HTML 结构

<div id="gallery">
    <img id="main_image" />
    <div>
        <img src="image1-thumbnail.jpg" />
        <img src="image2-thumbnail.jpg" />
        <img src="image3-thumbnail.jpg" />
        <img src="image4-thumbnail.jpg" />
    </div>
</div>

首先创建一个 jQuery 插件：

(function ($) {
    $.fn.gallery = function () {

    };
})(jQuery)

这可以确保您的代码完全可重用，并且如果您将来想将其与其他框架一起使用，也不会导致命名冲突。接下来，您要向每个缩略图添加单击事件，以使其修改主图像的 SRC：

(function ($) {
    $.fn.gallery = function () {
        this.find($(this).attr('id') + '>div>img').click(function () {
            $(this).siblings('img').removeClass('selected');
            $(this).addClass('selected');
            var mainImageSrc = $(this).attr('src').replace('-thumbnail','');
            $(this).parent().siblings('img').attr('src',mainImageSrc);
        });
        return this; // jQuery plugins should (nearly) always return this to make them chainable
    };
})(jQuery);

最后调用您的函数：

jQuery(function ($) {
    $('#gallery').gallery();
});

此代码应提供基本功能。我将让您致力于使缩略图可滚动，如果您真的愿意的话，可以在图像之间进行淡入淡出（提示：您需要两个 img 标签，使用 CSS 将它们放在彼此之上，然后 .animate() 它们之间淡出的不透明度）。希望这能让你继续前进。

Answer 2

Galleriffic 是您的解决方案

http://www.twospy.com/galleriffic/index.html

它非常可定制且易于集成。