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

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

1 голос
/ 29 октября 2009

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

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

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

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

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

Ответы [ 2 ]

5 голосов
/ 29 октября 2009

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

Часть кода, на которую вы ссылаетесь, заменяет источник изображения #target на ссылку в пределах #thumbs div. Должно работать нормально. 

<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>
2 голосов
/ 05 сентября 2013

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

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/

...