Question

我是编码的新手，并且一直以WYSIWYG为基础使用Dreamweaver。我最近进入了Jquery，并设法在页面上实现了JQuery SlideshowPro插件。问题在于缩略图在自动缩小时相当像素化，并且移动单个缩略图的余地不如无序列表中那样。

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

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

Answer 1

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

首先，我将一个数据属性添加到li中的图像标记，指定一个单独的拇指网址，例如：

<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>");                       
});

所以thumb 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存在使用它，否则使用普通拇指。

希望这有帮助。

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

1 个答案: