如何通过点击缩略图显示/隐藏大图像？ [英] How to show/hide big image by clicking on thumbnails?

问题描述

如何通过点击缩略图显示/隐藏大图片？

我需要这样

img src =https://i.stack.imgur.com/TV8IW.jpgalt =enter image description here>

尝试使用JSFiddle这里 http://jsfiddle.net/jitendravyas/Qhdaz/

只有CSS可能。

使用< a href =＃>

我忘了添加，它也应该在iPad上工作。

解决方案

无预加载

HTML：

 < div id =big-image> 
< img src =http://lorempixel.com/400/200/sports / 1 /> 
< / div> 
 
< div class =small-images> 
< a href =http：// lorempixel .com / 400/200 / sports / 1 />< img src =http://lorempixel.com/100/50/sports/1/>< / a> 
< a href =http://lorempixel.com/400/200/fashion/1/class =>< img src =http://lorempixel.com/100/50/fashion/1/ < / a> 
< a href =http://lorempixel.com/400/200/city/1/>< img src =http://lorempixel.com/ 100/50 / city / 1 />< / a> 
< / div> 
  

Javascript（jQuery）

  $（function（）{
 $（。small-images a）click（function（e）{
 var href = $（this）.attr href）; 
 $（＃big-image img）。attr（src，href）; 
 e.preventDefault（）; 
 return false; 
} ）; 
}）; 
 

当前只有一个大图片，当点击A时，A的href被复制为SRC的大图像。

实例： http://jsfiddle.net/ Qhdaz / 1 /

如果您无法执行额外的DOM进度，您可以添加3个大图片，并直接加载它们。

HTML：

 < div id =big-image> 
< img src =http://lorempixel.com/400/200/sports/1/> 
< img src =http://lorempixel.com/400/200/fashion/1/> 
< img src =http://lorempixel.com/400/200/city/1/> 
< / div> 
 
< div class =small-images> 
< img src =http://lorempixel.com/100/50/sports/1/> 
< img src =http://lorempixel.com/100/50/fashion/1/> 
< img src =http://lorempixel.com/100/50/city/1/> 
< / div> 
  

Javascript：

 code> $（function（）{
 $（＃big-image img：eq（0））。nextAll（）。hide（）; 
 $ img）。click（function（e）{
 var index = $（this）.index（）; 
 $（＃big-image img）。eq（index）.show .siblings（）。hide（）; 
}）; 
}）; 
  

http： //jsfiddle.net/Qhdaz/2/

How to show/hide big image by clicking on thumbnails?

I need like this

Try with JSFiddle here http://jsfiddle.net/jitendravyas/Qhdaz/

Is it possible with CSS only. if not then jQuery solution is OK.

An is it good to use <a href=#"> even it's not opening any new page in same or new tab.

Edit:

I forgot to add. it should work on iPad too

解决方案

See this example:

No preloading

HTML:

<div id="big-image">
    <img src="http://lorempixel.com/400/200/sports/1/">
</div>

<div class="small-images">
    <a href="http://lorempixel.com/400/200/sports/1/"><img src="http://lorempixel.com/100/50/sports/1/"></a>
<a href="http://lorempixel.com/400/200/fashion/1/" class=""><img src="http://lorempixel.com/100/50/fashion/1/"></a>
<a href="http://lorempixel.com/400/200/city/1/"><img src="http://lorempixel.com/100/50/city/1/"></a>
</div>

Javascript (jQuery)

$(function(){
    $(".small-images a").click(function(e){
        var href = $(this).attr("href");
        $("#big-image img").attr("src", href);
        e.preventDefault();
        return false;
    });
});

Currently only 1 big image, when clicking on an A, the href of the A is copied as SRC of the big image.

Live example: http://jsfiddle.net/Qhdaz/1/

If you wan't to do it without the extra DOM progressing, you can add 3 big images, and load them directly. The above solution does not preload the images, the below function will.

With preloading

HTML:

<div id="big-image">
    <img src="http://lorempixel.com/400/200/sports/1/">
    <img src="http://lorempixel.com/400/200/fashion/1/">
    <img src="http://lorempixel.com/400/200/city/1/">
</div>

<div class="small-images">
    <img src="http://lorempixel.com/100/50/sports/1/">
    <img src="http://lorempixel.com/100/50/fashion/1/">
    <img src="http://lorempixel.com/100/50/city/1/">
</div>

Javascript:

$(function(){
    $("#big-image img:eq(0)").nextAll().hide();
    $(".small-images img").click(function(e){
        var index = $(this).index();
        $("#big-image img").eq(index).show().siblings().hide();
    });
});

http://jsfiddle.net/Qhdaz/2/

这篇关于如何通过点击缩略图显示/隐藏大图像？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！