自定义jquery库

Question

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

这是一个三列模板。第一列有导航。第二列将从第3列的缩略图中选择图像。第3列中还有向上/向下按钮可以旋转缩略图。单击缩略图图像应加载到第二列的图像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将它们叠放在一起，然后{{ 1}}它们之间淡化的不透明度）。希望这会让你顺利。

Answer 2

Galleriffic是你的解决方案

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

非常可定制且易于集成。