Сочетание ролловера миниатюр с заменой изображений и Fancybox 2

Я пытаюсь объединить ролловер миниатюр (который отображает увеличенное изображение над большими пальцами) с Fancybox. Если вы посмотрите на эту тестовую страницу, вы поймете, о чем я говорю: http://www.neptune-design.com/sites/test/products.php

Когда вы прокручиваете большие пальцы, большое изображение выше меняется правильно. Я хочу, чтобы при нажатии на большое изображение выше открывалось еще большее изображение с помощью fancybox. Как вы можете видеть на моей тестовой странице, ролловер работает хорошо, но когда вы нажимаете на большое изображение, всегда открывается изображение 1, а не текущее изображение (которое было ролловер).

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

Некоторый javascript для части опрокидывания:

 <script type="text/javascript">
     function swap(image) {
         document.getElementById("main").src = image.href;
     }
 </script>

А остальное здесь:

  <?php

  $allpics = "1.jpg,2.jpg,3.jpg,4.jpg";
  $pictures = array();
  $pictures = explode(",", $allpics);

  <a href = "images/products/big/<?php echo $pictures[0]; ?>" class = "fancybox"><img id="main" src="images/products/small/<?php echo $pictures[0]; ?>" class = "bigImage"></a>
  <?php 
    for ($i=0;$i<count($pictures);$i++) { ?>
   <div class = "imageHolder" id = "thumb<?php echo $i; ?>">
      <a href="images/products/small/<?php echo $pictures[$i]; ?>" onmouseover="swap(this);" onclick="return false;"><img src="images/products/small/<?php echo $pictures[$i]; ?>" class = "smallImage"></a></div>
  <?php } ?>

Цикл for, конечно же, получает имя файла изображения и отображает его в поле эскиза. Как я могу изменить эту часть:

      <a href = "images/products/big/<?php echo $pictures[0]; ?>" class = "fancybox"><img id="main" src="images/products/small/<?php echo $pictures[0]; ?>" class = "bigImage"></a>

чтобы он открывал текущее изображение в Fancybox, а не всегда изображение №1. Я понимаю, что $pictures[0] относится к изображению № 1, я просто не знаю, как его правильно изменить. Любая помощь будет принята с благодарностью!

РЕДАКТИРОВАТЬ: Вот еще одна страница, иллюстрирующая, что я пытаюсь сделать: http://bloc-nc.com/projects/gateway.html


image swap rollover fancybox
person John    schedule 01.05.2013    source источник

Ответы (1)


arrow_upward
0
arrow_downward

Вот и я снова отвечаю на свои вопросы!

 <script type="text/javascript">
   function swap(image) {
    document.getElementById("main").src = image.href;
    var imgurl = image.href;
    var filename = imgurl.substring(imgurl.lastIndexOf('/') + 1);
    document.getElementById("main2").href = "images/products/big/" + filename;
   }
 </script>
person John    schedule 01.05.2013