在jquery SlideviewerPro 1.5中使用Div而不是ul

Question

我是编码的新手,并且一直以WYSIWYG为基础使用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 存在，则使用它，否则使用普通拇指。

希望这可以帮助。