jquery - 在 jquery SlideviewerPro 1.5 中使用 Div 代替 ul

Question

我是编码新手，一直在所见即所得的基础上使用 Dreamweaver。我最近深入研究了 Jquery，并成功在页面上实现了 JQuery SlideshowPro 插件。问题是缩略图在自动缩小时相当像素化，并且没有太大的空间来移动单个缩略图，因为它们在无序列表中。

我想知道是否有一种方法可以手动分配各个 Div 中的每个缩略图(以便于使用)以及要在另一个 Div 中滚动/交换的主图像，同时仅保持主图像过渡上的滑动效果。我不关心缩略图是否滚动，因为每个页面上不太可能有足够的缩略图来保证滚动。实际上，在保持滑动过渡的情况下，脱节的图像交换。

原始代码可以在以下页面找到:gcmingati.net/wordpress/wp-content/lab/jquery/svwt/index.html尽管我想尽可能避免使用列表。

Answer 1

如果我理解正确的话，这应该很容易通过对插件的简单修改和对 li 图像的轻微更改来完成。

首先，我将数据属性添加到 li 中的图像标记，指定单独的缩略图 url，例如:

<li><img alt="Blerg." src="images/blerg.jpg" data-thumb-src="src="images/blerg_thumb.jpg" /></li>

我添加了一个名为 data-thumb-src 的 html 5 数据属性来包含拇指路径。

然后修改插件中构建幻灯片缩略图部分的部分。我已经下载了该插件，大约第 99 行是这样的:

jQuery(this).find("li").each(function(n) { 
    jQuery("div#thumbSlider" + j + " ul").append("<li><a title='" + jQuery(this).find("img").attr("alt") + "' href='#'><img width='"+ thumbsWidth +"' height='"+ thumbsHeight +"' src='" + jQuery(this).find("img").attr("src") + "' /><p class='tmbrdr'>&nbsp;<\/p><\/a><\/li>");                      
}); 

将其替换为如下内容:

jQuery(this).find("li").each(function(n) { 
    jQuery("div#thumbSlider" + j + " ul").append("<li><a title='" + jQuery(this).find("img").attr("alt") + "' href='#'><img width='"+ thumbsWidth +"' height='"+ thumbsHeight +"' src='" + jQuery(this).find("img").attr("data-thumb-src") + "' /><p class='tmbrdr'>&nbsp;<\/p><\/a><\/li>");                       
}); 

因此，thumbs src 现在等于主图像中的 data-thumb-src。

如果你真的很喜欢冒险，你可以尝试这样的方法，默认使用普通拇指，然后在需要时使用自定义拇指:

jQuery(this).find("li").each(function(n) { 
    if( jQuery(this).find("img").attr('data-thumb-src') ){
        var thumb_src = jQuery(this).find("img").attr('data-thumb-src');
    }else{
        var thumb_src = jQuery(this).find("img").attr("src");
    }
    jQuery("div#thumbSlider" + j + " ul").append("<li><a title='" + jQuery(this).find("img").attr("alt") + "' href='#'><img width='"+ thumbsWidth +"' height='"+ thumbsHeight +"' src='" + thumb_src + "' /><p class='tmbrdr'>&nbsp;<\/p><\/a><\/li>");                     
});

因此，如果拇指 src 存在，则使用它，否则使用普通拇指。

希望这有帮助。