Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 18.11.2014, 07:25
Кандидат Javascript-наук
Отправить личное сообщение для biryukovm Посмотреть профиль Найти все сообщения от biryukovm
 
Регистрация: 13.12.2013
Сообщений: 110

Скрипт простой галереи
у меня небольшой вопросик к гуру), я почти ничего не смислю в скриптах потому не пенайте. Никак немогу сделать скрипт(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;
    });
};
Ответить с цитированием
  #2 (permalink)  
Старый 18.11.2014, 08:53
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,109

biryukovm,
при чём тут JQuery? и что такое hover?
Ответить с цитированием
  #3 (permalink)  
Старый 18.11.2014, 09:30
Кандидат Javascript-наук
Отправить личное сообщение для biryukovm Посмотреть профиль Найти все сообщения от biryukovm
 
Регистрация: 13.12.2013
Сообщений: 110

там было значение click я поменял на hover
while (i) $e(thumbs[--i], 'hover', function() {


click - при нажатии
hover - при наведении (не срабатывает )
Ответить с цитированием
  #4 (permalink)  
Старый 18.11.2014, 10:11
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,109

biryukovm,
нема hover еся mouseover
Ответить с цитированием
  #5 (permalink)  
Старый 18.11.2014, 16:35
Кандидат Javascript-наук
Отправить личное сообщение для biryukovm Посмотреть профиль Найти все сообщения от biryukovm
 
Регистрация: 13.12.2013
Сообщений: 110

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

А не подскажите:
У меня есть 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 сменить без результатно
Ответить с цитированием
  #6 (permalink)  
Старый 18.11.2014, 17:03
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,109

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>
Ответить с цитированием
  #7 (permalink)  
Старый 18.11.2014, 21:29
Кандидат Javascript-наук
Отправить личное сообщение для biryukovm Посмотреть профиль Найти все сообщения от biryukovm
 
Регистрация: 13.12.2013
Сообщений: 110

спасибо большое все работает но тут проблема теперь стоит с тем что главная изменяющая фотография должны находиться ниже если смотреть по примеру
а возможно ли сделать привязку к class img чтобы главная картинка могла находиться где хочет?
Ответить с цитированием
  #8 (permalink)  
Старый 18.11.2014, 22:01
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,109

biryukovm,
сделайте в картинках data-id="largeImg" и берите эти данные в качестве источника куда отправить картинку
Ответить с цитированием
  #9 (permalink)  
Старый 19.11.2014, 21:00
Кандидат Javascript-наук
Отправить личное сообщение для biryukovm Посмотреть профиль Найти все сообщения от biryukovm
 
Регистрация: 13.12.2013
Сообщений: 110

Сообщение от рони Посмотреть сообщение
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>
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Простой скрипт "Отгадай загадку" rustik-yes Общие вопросы Javascript 1 12.02.2014 11:33
Где найти подобный скрипт галереи ? ilyas-> Элементы интерфейса 6 29.08.2013 17:24
Простой скрипт поиска! DanilS Общие вопросы Javascript 0 29.10.2012 14:20
Помогите студенту! скрипт галереи Мария_ Общие вопросы Javascript 1 04.06.2011 18:45
Скрипт простой галереи jokerbot jQuery 17 19.04.2009 17:00