• Страница 1 из 1
  • 1
Модератор форума: Yuri_G  
Зуммер картинок в ИМ (вызвать скрипт при клике по изображен)
alex-g
Сообщений: 115
Репутация: 33

Сообщение # 1 | 21:16:35
Доброго времени суток. Имеется следующая проблема. Есть зуммер изображений. Он работает и вызывается следующим скриптом:


Код
<script src='/js/jquery.elevateZoom-3.0.8.min.js' type="text/javascript"></script>   
   <script>
   $("#ipreview").elevateZoom();
   </script>

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


Код
<img alt="" src="$THUMB$" data-zoom-image="$PHOTO$" class="gphoto" onclick="_bldCont1($ID$, this.getAttribute('idx'));" id="ipreview" idx="0" title="Кликните для увеличения изображения">
     
   <?if($SMALL_1$)?>
   <img alt="" src="$SMALL$" class="gphoto im" onclick="var el=getElementById('ipreview'); el.src='$THUMB$'; el.setAttribute('data-zoom-image','$PHOTO$'); el.setAttribute('idx',0);">
   <img alt="" src="$SMALL_1$" class="gphoto im1" onclick="var el=getElementById('ipreview'); el.src='$THUMB_1$'; el.setAttribute('data-zoom-image','$PHOTO_1$'); el.setAttribute('idx',1);">
   <?endif?>

<script src='/js/jquery.elevateZoom-3.0.8.min.js' type="text/javascript"></script>   
   <script>
   $("#ipreview").elevateZoom();
   </script>

Так это работает сейчас - http://nevesta.at.ua/shop/2/desc/abelija

Скрипт вызывается при загрузке страници и при смене картинки выводит постоянно первую картинку, хотя scr и data-zoom-image меняются на 2-е изображение.

Наконец, вопрос! Как сделать так, чтоб при клике по изображению, скрипт срабатывал снова, подгружая параметры второго изображения?

Steve Jobs: Stay hungry, stay foolish!
Сообщение отредактировал alex-g - Среда, 09 Апр 2014, 21:27:57
SOCHI1014
Сообщений: 863
Репутация: 229

Сообщение # 2 | 21:36:39
_ошибся

Добавлено (09 Апр 2014, 21:36:39)
---------------------------------------------
Попробуйте разделить

<?if($SMALL_1$)?>
<img alt="" src="$SMALL$" class="gphoto im" onclick="var
el=getElementById('ipreview'); el.src='$THUMB$';
el.setAttribute('data-zoom-image','$PHOTO$');
el.setAttribute('idx',0);"> ?endif?>
<?if($SMALL_2$)?> <img alt="" src="$SMALL_1$" class="gphoto im1" onclick="var el=getElementById('ipreview');
el.src='$THUMB_1$'; el.setAttribute('data-zoom-image','$PHOTO_1$');
el.setAttribute('idx',1);">
<?endif?>


Сообщение отредактировал SOCHI1014 - Среда, 09 Апр 2014, 21:33:46
alex-g
Сообщений: 115
Репутация: 33

Сообщение # 3 | 21:44:05
SOCHI1014, спасибо за ответ. Но IF тут не при чем. Он нужен для вывода 2х изображений внизу под основным изображением. То есть, если картинка одна, то вот это не выводится (миниатюра основного изображения)

Код
<img alt="" src="$SMALL$" class="gphoto im" onclick="var  
  el=getElementById('ipreview'); el.src='$THUMB$';  
  el.setAttribute('data-zoom-image','$PHOTO$');  
  el.setAttribute('idx',0);">

Если их 2, то выводится 1 и 2 изображение в одном условии.

Steve Jobs: Stay hungry, stay foolish!
SOCHI1014
Сообщений: 863
Репутация: 229

Сообщение # 4 | 21:45:21
Он имеет id ipreview
которое отвечает за zoom

alex-g
Сообщений: 115
Репутация: 33

Сообщение # 5 | 21:52:03
ipreview необходим для смены этих картинок. Точнее смене содержимого изображения при клике на миниатюру.

Зумер так же можно привязать к любому классу. Но даже если сделать отдельный класс всем новым изображениям, зуммер не будет их открывать, так как скрипт срабатывает при старте страници, а класс меняется при нажатии изображения, уже после загрузки страници

Steve Jobs: Stay hungry, stay foolish!
SOCHI1014
Сообщений: 863
Репутация: 229

Сообщение # 6 | 21:54:29
Попробуйте так

<img alt="" src="$THUMB$" data-zoom-image="$PHOTO$" class="gphoto"
onclick="_bldCont1($ID$, this.getAttribute('idx'));" id="ipreview"
idx="0" title="Кликните для увеличения изображения">

<img alt="" src="$THUMB_1$" data-zoom-image="$PHOTO_1$" class="gphoto"
onclick="_bldCont1($ID$, this.getAttribute('idx'));" id="ipreview"
idx="1" title="Кликните для увеличения изображения">

<?if($SMALL_1$)?>
<img alt="" src="$SMALL$" class="gphoto im" onclick="var
el=getElementById('ipreview'); el.src='$THUMB$';
el.setAttribute('data-zoom-image','$PHOTO$');
el.setAttribute('idx',0);">
<img alt="" src="$SMALL_1$" class="gphoto im1" onclick="var el=getElementById('ipreview');
el.src='$THUMB_1$'; el.setAttribute('data-zoom-image','$PHOTO_1$');
el.setAttribute('idx',1);">
<?endif?>

alex-g
Сообщений: 115
Репутация: 33

Сообщение # 7 | 12:07:41
Это выведет мне сразу 2 больших изображения

Добавлено (11 Апр 2014, 12:07:41)
---------------------------------------------
Проблема решена!


Steve Jobs: Stay hungry, stay foolish!
  • Страница 1 из 1
  • 1
Поиск:
Telegram
Будьте в курсе всех обновлений: подпишитесь на наш официальный Telegram-канал uCoz и задавайте вопросы в чате сообщества!