用较大的图像交换缩略图
Swap thumbnail images with larger image?
我有一个400px x 400px的大图像和下面的三个小图像,每个图像都是100px x 100px。
当你点击其中一个缩略图时,它会与较大的图像交换,从而放大它,这可能吗?
编辑:
HTML:
<div id="imgThumbs">
<a href="#" class="showImg"><img src="img1-thumb.jpg" width="100" height="100" alt="Image 1" /></a>
<a href="#" class="showImg"><img src="img2-thumb.jpg" width="100" height="100" alt="Image 2" /></a>
<a href="#" class="showImg"><img src="img3-thumb.jpg" width="100" height="100" alt="Image 3" /></a>
</div>
<div id="imgHolder"></div>
CSS:
#imgThumbs {
overflow: hidden;
margin: 20px auto;
width: 366px;
text-align: center;
}
.showImg {
width: 100px;
padding: 10px;
float:left;
border: 1px solid #fff;
border-radius: 5px;
}
#imgHolder {
border-top: 5px solid #bbb;
padding: 20px;
margin: 0 auto;
width: 80%;
}
.active {
border: 1px dashed #aaa;
background-color: #f4f4f4;
}
jQuery:
$('.showImg').hover(function(){
$(".showImg").removeClass("active");
$(this).addClass("active");
var imgURL = $(this).find('img').attr("src");
$('#imgHolder').find('img').attr("src", imgURL);
});
工作演示
是的,这是可能的,也很容易。
你可以做一些类似的事情
// small images have the class 'small'
$('img.small').click(function(){
this.src = 'path to big image';
});
通常使用文件命名约定。所以你的代码可能是
$('img.small').click(function(){
// changes the source of small images
// from somepath.png to somepath-big.png
this.src = this.src.split('.')[0]+'-big.png';
$(this).removeClass('small');
});
但你必须决定你到底想做什么…
相关文章:
- 通过点击按钮翻转缩略图
- 如何使用offer/answer交换来自两个对等连接的流
- 简单的ES6承诺问题-交换解决和拒绝参数
- 我可以通过JQuery将CSS类交换为一个特殊的元素集吗
- 带有计数器、缩略图、进度条和淡入淡出效果的简单jQuery幻灯片
- 简单的交换程序无法使用javascript
- 如何解析Brightcove视频中的视频缩略图
- 在表单OnChange中交换数字顺序
- 如何删除视频's缩略图时's加载在JW Player's闪光模式
- 通过Javascript将HTML中的电话号码与URL参数进行交换
- 当页面包含指向一个图像的多个链接时,fancyBox会复制缩略图辅助图像
- jQuery AJAX获取Vimeo缩略图
- 如何获取youtube视频的缩略图
- 用于交换两个变量的 JavaScript 函数
- 将不同上传的文件显示为缩略图或任何其他方式
- 用javascript交换img标记
- 用较大的图像交换缩略图
- javascript用较大的图像交换缩略图
- pre - shop产品图像交换上的缩略图点击
- Woocommerce缩略图图像交换