동적 이미지가 컬러 박스에서 변경됨

Question

임 제품 페이지 또는 전자 상거래 사이트에서 작업하고 있으며 현재 3 개의 작은 이미지와 1 개의 큰 이미지가 있습니다. 세 개의 작은 이미지를 클릭 할 수 있고, 사용자가 이미지 중 하나를 클릭 할 때 더 큰 이미지를 사용하는 화상을 표시하도록 변경된다 :이 잘 작동

onMouseDown="document.Image.src=/img1.jpg;" 

. 내가 가지고있는 문제는 이것을 colorbox와 연결하려고 할 때입니다. 내가하고 싶은 것은 작은 이미지 중 하나를 클릭 한 다음 더 큰 이미지가로드 된 다음 큰 이미지를 클릭하면 colorbox 함수가 호출되고 이미지가 colorbox 팝업에 표시됩니다. 이 작업을 수행 할 여지가 있습니까?

jQuery("a.largeImgPop").colorbox({opacity:0.4, rel:'largeImgPop', photo:true}); 

<a class="largeImgPop" href="/img1.jpg">1</a> 
<a class="largeImgPop" href="/img1.jpg">2</a> 
<a class="largeImgPop" href="/img1.jpg">3</a> 

<img src="/img1.jpg" name="Image" alt="Image 1" /> 

이게 가능 : 다음과 같이

현재 내 코드를 보여줍니다?

Answer 1

몇 가지.

왜 작은 이미지를 클릭 한 후에 색상 상자를 건너 뛰지 않으시겠습니까?

그러나 큰 자리 표시 자 이미지와 여러 축소판을 스와핑한다고 가정하면 이렇게 할 수 있습니다.

ID를 지정하십시오. 필요한 크기로 크기를 설정할 수 있습니다.

<img src="/main.jpg" id="mainImg" name="Image" alt="img_placeholder" /> 

는 .click() jQuery로 & & .live() 함수를 사용하여 시도. 참고 : 이후 버전의 jquery에서는 live()가 더 이상 사용되지 않습니다. 작동하지 않는 경우 on()을 사용해보십시오.

$(function(){ 
    $('.largeImgPop').click(function(){ 
     var img = $(this).attr('src'); 
     $('#mainImg').attr("src", img); 
    }); 
    $('#mainImg').live('click',function(){ 
     $(this).colorbox({opacity:0.4, rel:'largeImgPop', photo:true}); 
    }); 

}); 

이 방법이 효과가 있는지 나는 잘 모르겠다. 왜 내가 다른 이미지를로드하는지 알지 못한다. 이미지 디렉토리 구조를 지정하지 않았습니다. 당신은 rel = "/ images/larger/img1.jpg"를 추가 할 수 있습니다.

및로 변경하십시오.

var img = $(this).attr('rel'); 
$('#mainImg').attr("src", img); 

이의

Answer 2

<img src="/img1.jpg" name="Image" alt="Image 1" onMouseDown="myFunction()"/>