0

サムネイルのロールオーバー (親指の上に大きな画像を表示する) を 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>

常に画像＃1ではなく、Fancyboxの現在の画像を開くようにします。$pictures[0] が画像 #1 を参照していることに気付きましたが、適切に変更する方法がわかりません。どんな助けでも大歓迎です！

編集: これは、私がやろうとしていることを示す別のページです: http://bloc-nc.com/projects/gateway.html

4

1 に答える 1

0

ここで、私自身の質問にもう一度答えます！

 <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>
于 2013-05-01T15:55:22.660 に答える