Скрипт простой галереи
у меня небольшой вопросик к гуру), я почти ничего не смислю в скриптах потому не пенайте. Никак немогу сделать скрипт(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" и берите эти данные в качестве источника куда отправить картинку |
Цитата:
Кому понадобится берите =)) <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> |
Часовой пояс GMT +3, время: 16:09. |