썸네일 롤오버와 이미지 스왑 및 팬시 박스 2 결합하기

Question

나는 썸네일 롤오버 (엄지 위로 큰 이미지를 표시 함)를 Fancybox와 결합하려고합니다. 이 테스트 페이지를 보면 다음과 같은 내용을 볼 수 있습니다. http://www.neptune-design.com/sites/test/products.php

엄지를 롤오버하면 위의 큰 이미지가 올바르게 변경됩니다. 위의 큰 이미지를 클릭하면 fancybox를 사용하여 더 큰 이미지가 열리도록하고 싶습니다. 내 테스트 페이지에서 볼 수 있듯이 롤오버는 잘 작동하지만 큰 이미지를 클릭하면 항상 현재 이미지가 아닌 이미지 1이 열립니다.

지금은 이미지 이름이 문자열에 저장되지만 결국 데이터베이스 필드에서 꺼내집니다.

롤오버 부분에 대한 일부 자바 스크립트 :

<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 } ?> 

과정의 루프는 이미지 파일의 이름을 가져옵니다과에 표시하기위한 미리보기 이미지 상자. 나는이 부분을 변경하는 방법 :

 <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. $ picture [0]이 이미지 # 1을 가리키고 있음을 알았습니다. 어떻게 적절하게 변경해야할지 모르겠습니다. 어떤 도움이라도 대단히 감사하겠습니다!

편집 : 여기에 또 다른 페이지에서 내가 할 노력하고있어 설명하기위한 것 : 다시 내 자신의 질문에 대답 갈 여기 http://bloc-nc.com/projects/gateway.html

Answer 1

!

<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>