Javascript:Щелчок по миниатюрам позволяет переключить изображение большего размера.Лучший метод?

StackOverflow https://stackoverflow.com/questions/1640727

Вопрос

Я искал действительно простой / облегченный способ просто щелкнуть миниатюры, чтобы переключить src увеличенного изображения.

На самом деле я еще не пробовал это делать.Является ли это лучшим решением?

Изображения большего размера, подлежащие замене, будут иметь ту же ширину, но другую высоту.Вызовет ли это проблемы / есть ли что-то, что мне нужно добавить для этой функциональности?Было бы лучше сделать div с фоновым изображением, которое меняется местами и является высотой самого большого изображения?

Кроме того, кто-то сказал, что это работает только один раз (??)...Мне нужно, чтобы он начинался с определенного изображения, а затем мог переходить к 2-4 другим изображениям одним щелчком мыши.

Спасибо за любой совет!Я, конечно (очевидно), не пишу на Javascript.

Это было полезно?

Решение

Вы должны иметь возможность переключать изображения столько раз, сколько пожелаете.

Фрагмент кода, на который вы ссылаетесь, заменяет источник изображения #target на href ссылки в div #thumbs.Это должно сработать нормально.

<img id="target" src="images/main.jpg">

<div id="thumbs">
<a href="images/picture1_big.jpg"><img src="images/picture1_small.jpg"></a>
<a href="images/picture2_big.jpg"><img src="images/picture2_small.jpg"></a>
<a href="images/picture3_big.jpg"><img src="images/picture3_small.jpg"></a>
</div>

Теперь, что касается ширины и высоты, я почти уверен, что есть некоторые проблемы с кроссбраузерной совместимостью, связанные с тем, как браузеры обрабатывают определенную ширину, но неопределенную высоту, когда вы меняете изображения местами.

В Firefox работает следующее.Обычный старый javascript, без jquery:

<html>

   <head>

     <script type="text/javascript">
         function swap(image) {
             document.getElementById("main").src = image.href;
         }
     </script>

   </head>

   <body>

     <img id="main" src="images/main.jpg" width="50">

     <a href="images/picture1_big.jpg" onclick="swap(this); return false;"><img src="images/picture1_small.jpg"></a>
     <a href="images/picture2_big.jpg" onclick="swap(this); return false;"><img src="images/picture2_small.jpg"></a>
     <a href="images/picture3_big.jpg" onclick="swap(this); return false;"><img src="images/picture3_small.jpg"></a>

   </body>
</html>

Другие советы

Этот пример устраняет время загрузки после нажатия на эскизы:

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/

Лицензировано под: CC-BY-SA с атрибуция
Не связан с StackOverflow
scroll top