Question

有没有办法使用SlideJS插件使缩略图图像与图库中的fullsize图像不同？

我们的解决方案：

我们也没有在文档中找到任何内容并通过以下方式解决：

在缩略图库的HTML上创建自定义属性：

<div id="thumbnails">
    <img src="/path/to/thumbnail.jpg" fullsize="/path/to/fullsize.jpg" />
    <img src="/path/to/thumbnail.jpg" fullsize="/path/to/fullsize.jpg" />
    <img src="/path/to/thumbnail.jpg" fullsize="/path/to/fullsize.jpg" />
    [...]
</div>

<div id="slideshow"></div>

点击某个缩略图后，复制缩略图div HTML，切换属性值并设置幻灯片：

$('#thumbnails img').click(function() {

    // Get a copy of element instance of thumbnails div
    var thumbnails = $(this).parent();

    // On that copy, switch "img" attribute with "fullsize" attribute of each image
    // and remove "fullsize" attribute for cleanliness
    thumbnails.children('img').each(function() {

        $(this).children().first().attr('src', $(this).children().first().attr('fullsize'));
        $(this).children().first().removeAttr('fullsize');

    });

    // Set the switched HTML to the div that will hold the slideshow
    $('#slideshow').html(thumbnails.html());

    // Set the slideshow
    $('#slideshow').slides({
        start: 1,
        preload: true,
        generateNextPrev: true,
        generatePagination: false,
        effect: 'fade'
    });

});

SlideJS插件上的自定义缩略图

0 个答案: