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

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

Я еще не пробовал. Это лучшее решение?

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

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

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


javascript image jquery gallery
person McFly88    schedule 28.10.2009    source источник

Ответы (2)


arrow_upward
7
arrow_downward

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

Фрагмент кода, на который вы ссылаетесь, заменяет источник изображения #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>
person Jeff B    schedule 28.10.2009
comment
Что касается проблемы с неопределенной высотой, как вы думаете, моя идея об использовании замены фонового изображения div вместо этого будет работать лучше? Спасибо за ответ! Кроме того, jQuery не требует встроенного javascript, верно? Так в этом будет его преимущество? - person McFly88; 29.10.2009
comment
Может ли кто-нибудь сказать мне, как изменить первый код, чтобы вместо этого переключать фоновое изображение div? Могу ли я изменить класс содержащего div или я могу как-то напрямую изменить фоновое изображение? - person McFly88; 29.10.2009
comment
Поскольку jQuery — это просто переупакованный javascript, он, по сути, делает то же самое, за исключением того, что он назначает клики в коде. т.е. $(#thumbs a).click( function() ... назначает методы щелчка каждому тегу 'a' в div #thumbs. Вы можете сделать это и с помощью простого javascript, используя getElementById и getElementByTagName, а затем повторяя результаты, а затем добавление прослушивателей событий. - person Jeff B; 29.10.2009
comment
Чтобы изменить фоновое изображение, вы должны изменить строку в функции следующим образом: document.getElementById(main).class.backgroundImage = 'url('+image.href+')'; Это предполагает, что main - это div, а не img. - person Jeff B; 29.10.2009

arrow_upward
2
arrow_downward

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

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/

person Luke Kalyan Brata Sarker    schedule 05.09.2013