Javascript-форум - Скрипт простой галереи

Javascript-форум (https://javascript.ru/forum/)

- jQuery (https://javascript.ru/forum/jquery/)

- - Скрипт простой галереи (https://javascript.ru/forum/jquery/51750-skript-prostojj-galerei.html)

Скрипт простой галереи

у меня небольшой вопросик к гуру), я почти ничего не смислю в скриптах потому не пенайте. Никак немогу сделать скрипт(JQuery) по типу простой галереи: при наведении на ескиз <div class="thumbs"> чтобы в <div id="largeImg"> отображалась эта картинка, но загвоздка состоит в том что html код должен быть следующим:

<div class="thumbs">
    <img src="01.jpg"/>
    <img src="02.jpg"/>
    <img src="03.jpg"/>
    <img src="04.jpg"/>
    <img src="05.jpg"/>
    <img src="06.jpg"/>
    <img src="07.jpg"/>
</div>


<div id="largeImg"><img src="01.jpg"/></div>

var $e = function(elem, eventName, handler) {
    elem.addEventListener
        ? elem.addEventListener(eventName, handler, false)
        : elem.attachEvent('on' + eventName, handler);
};
window.onload = function() {
    var thumbs = document.getElementById('thumbs').getElementsByTagName('img'), i = thumbs.length;
    while (i) $e(thumbs[--i], 'hover', function() {
        document.getElementById('largeImg').src = this.src;
    });
};

biryukovm,
при чём тут JQuery? и что такое hover?

там было значение click я поменял на hover

while (i) $e(thumbs[--i], 'hover', function() {

click - при нажатии
hover - при наведении (не срабатывает :-? )

biryukovm,
нема hover еся mouseover

Спасибо помогло.

А не подскажите:
У меня есть 2 блока в низу и в начале страницы

<div class="thumbs">
    <img src="01.jpg"/>
    <img src="02.jpg"/>
    <img src="03.jpg"/>
    <img src="04.jpg"/>
    <img src="05.jpg"/>
    <img src="06.jpg"/>
    <img src="07.jpg"/>
</div>
 
<div id="largeImg"><img src="01.jpg"/></div>

Но к сожалению 1 блок работает а на втором переключение не работает
даже пытался id сменить без результатно

biryukovm,
:( - если структура такаяже, если ie > 8

<!DOCTYPE html>
<html>
<head>
  <title>Untitled</title>
  <meta charset="utf-8">

</script>
  <script>
      var $e = function(elem, eventName, handler) {
    elem.addEventListener
        ? elem.addEventListener(eventName, handler, false)
        : elem.attachEvent('on' + eventName, handler);
};
window.onload = function() {
    var thumbs = document.querySelectorAll('.thumbs img'), i = thumbs.length;
    while (i) $e(thumbs[--i], 'mouseover', function() {
        this.parentNode.nextElementSibling.querySelector('img').src = this.src;
    });
};

  </script>
</head>

<body>
  <div class="thumbs">
  <img src="http://learn.javascript.ru/files/tutorial/browser/events/gallery/img2-thumb.jpg">
  <img src="http://learn.javascript.ru/files/tutorial/browser/events/gallery/img3-thumb.jpg">
  <img src="http://learn.javascript.ru/files/tutorial/browser/events/gallery/img4-thumb.jpg">
  <img src="http://learn.javascript.ru/files/tutorial/browser/events/gallery/img5-thumb.jpg">
  <img src="http://learn.javascript.ru/files/tutorial/browser/events/gallery/img6-thumb.jpg">
  </div>
  <div><img src="http://learn.javascript.ru/files/tutorial/browser/events/gallery/img2-thumb.jpg"></div>
   <div class="thumbs">
  <img src="http://learn.javascript.ru/files/tutorial/browser/events/gallery/img2-thumb.jpg">
  <img src="http://learn.javascript.ru/files/tutorial/browser/events/gallery/img3-thumb.jpg">
  <img src="http://learn.javascript.ru/files/tutorial/browser/events/gallery/img4-thumb.jpg">
  <img src="http://learn.javascript.ru/files/tutorial/browser/events/gallery/img5-thumb.jpg">
  <img src="http://learn.javascript.ru/files/tutorial/browser/events/gallery/img6-thumb.jpg">
  </div>
  <div><img src="http://learn.javascript.ru/files/tutorial/browser/events/gallery/img2-thumb.jpg"></div>
</body>
</html>

спасибо большое все работает но тут проблема теперь стоит с тем что главная изменяющая фотография должны находиться ниже если смотреть по примеру
а возможно ли сделать привязку к class img чтобы главная картинка могла находиться где хочет?

biryukovm,
сделайте в картинках data-id="largeImg" и берите эти данные в качестве источника куда отправить картинку

Цитата:

Сообщение от рони (Сообщение 341681)

biryukovm,
сделайте в картинках data-id="largeImg" и берите эти данные в качестве источника куда отправить картинку

Спасибо большое за помощь я сделал проще
Кому понадобится берите =))

<script type="text/javascript" src="http://code.jquery.com/jquery-1.8.3.js"></script>

<img src="http://learn.javascript.ru/files/tutorial/browser/events/gallery/img2-thumb.jpg" id="large2">
<div class="thumbs2">
  <img src="http://learn.javascript.ru/files/tutorial/browser/events/gallery/img2-thumb.jpg">
  <img src="http://learn.javascript.ru/files/tutorial/browser/events/gallery/img3-thumb.jpg">
  <img src="http://learn.javascript.ru/files/tutorial/browser/events/gallery/img4-thumb.jpg">
  <img src="http://learn.javascript.ru/files/tutorial/browser/events/gallery/img5-thumb.jpg">
  <img src="http://learn.javascript.ru/files/tutorial/browser/events/gallery/img6-thumb.jpg">
</div>
      
      <img src="http://learn.javascript.ru/files/tutorial/browser/events/gallery/img2-thumb.jpg" id="large1">
<div class="thumbs1">
  <img src="http://learn.javascript.ru/files/tutorial/browser/events/gallery/img2-thumb.jpg">
  <img src="http://learn.javascript.ru/files/tutorial/browser/events/gallery/img3-thumb.jpg">
  <img src="http://learn.javascript.ru/files/tutorial/browser/events/gallery/img4-thumb.jpg">
  <img src="http://learn.javascript.ru/files/tutorial/browser/events/gallery/img5-thumb.jpg">
  <img src="http://learn.javascript.ru/files/tutorial/browser/events/gallery/img6-thumb.jpg">
</div>
<script> 


$('.thumbs2 img').mouseover(function(){document.getElementById('large2').src = this.src;});
$('.thumbs1 img').mouseover(function(){document.getElementById('large1').src = this.src;});

</script>