我是编码的新手,并且一直以所见即所得为基础使用Dreamweaver.我最近蘸了
Jquery,并设法在页面上实现了JQuery SlideshowPro插件.问题在于缩略图在自动缩小时是相当像素化的,并且没有太多的空间来移动单个缩略图,就像在无序列表中一样.
我想知道是否有办法手动分配单独的Div的每个缩略图(为了方便使用)和主图像被滚动/交换在另一个Div,同时保持滑动效果仅在主图像转换.我不关心缩略图滚动,因为我不太可能在每个页面上有足够的缩略图保证滚动.实际上,与滑动过渡保持不连续的图像交换.
原始代码可以在以下页面找到：gcmingati.net/wordpress/wp-content/lab/jquery/svwt/index.html虽然我想避免使用列表,如果可能的话.
解决方法
如果我正确理解了这一点,这对插件的简单修改和对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'> <\/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'> <\/p><\/a><\/li>");
});
所以大拇指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'> <\/p><\/a><\/li>");
});
所以如果拇指src存在使用它,否则使用正常的拇指.
希望这可以帮助.