다른 이미지의 특정 이미지에 대해 colorbox를 열려면 어떻게해야합니까?

Question

내가 여기에이 페이지가/제품 페이지/반지/제품 1-2/

당신이 1 개 큰 이미지 3 썸네일

당신은 작은 이미지 하나를 클릭

이 볼 수 있듯이, 그것은 큰 이미지를 대체 할 것입니다.

큰 이미지 코드 :

<a class="preview_link cboxElement" style="text-decoration:none;" href="/wp-content/uploads/2012/07/DSC_0118.jpg" rel="Teardrop Druzy Amethyst Ring"> 
<img id="product_image_736" class="product_image colorbox-736" width="400" src="/wp-content/uploads/2012/07/DSC_0118.jpg" title="Teardrop Druzy Amethyst Ring" alt="Teardrop Druzy Amethyst Ring"> 
<br> 
<div style="text-align:center; color:#F39B91;">Click To Enlarge</div> 
</a> 

당신이 큰 이미지 JQuery와 colorbox를 클릭

가 열립니다 나는 단지 3있을 때, 그러나 그것은 말한다 colorbox에 내가 4 개 이미지가 같아요 내 질문은 어떻게이다 나는 큰 이미지를 무시하는 colorbox를 얻지 만, 여전히 일하는 링크를 가지고 .... 내가 찾고있는 것은 무엇입니까?

썸네일 코드는 :

<div class="wpcart_gallery" style="text-align:center; padding-top:5px;"> 
<a class="thickbox cboxElement" title="DSC_0118" href="/wp-content/uploads/2012/07/DSC_0118.jpg" rel="Teardrop Druzy Amethyst Ring" rev="/wp-content/uploads/2012/07/DSC_0118.jpg"> 
<img class="attachment-gold-thumbnails colorbox-736" width="50" height="50" title="DSC_0118" alt="DSC_0118" src="/wp-content/uploads/2012/07/DSC_0118-50x50.jpg"> 
</a> 
<a class="thickbox cboxElement" title="P7230376" href="/wp-content/uploads/2012/07/P7230376.jpg" rel="Teardrop Druzy Amethyst Ring" rev="/wp-content/uploads/2012/07/P7230376.jpg"> 
<img class="attachment-gold-thumbnails colorbox-736" width="50" height="50" title="P7230376" alt="P7230376" src="/wp-content/uploads/2012/07/P7230376-50x50.jpg"> 
</a> 
<a class="thickbox cboxElement" title="P7230378" href="/wp-content/uploads/2012/07/P7230378.jpg" rel="Teardrop Druzy Amethyst Ring" rev="/wp-content/uploads/2012/07/P7230378.jpg"> 
<img class="attachment-gold-thumbnails colorbox-736" width="50" height="50" title="P7230378" alt="P7230378" src="/wp-content/uploads/2012/07/P7230378-50x50.jpg"> 
</a> 
</div> 

모든 것이 <div class="imagecol"> </div>

에 싸여 어떤 도움도 좋지 않을까!

Answer 1

사용 JQuery와 ...이 작동을

jQuery('document').ready(function($){ 
$(".wpcart_gallery a:first").removeClass("cboxElement"); 
jQuery(".wpcart_gallery img").click(function($){ 
jQuery(".wpcart_gallery a").addClass('cboxElement'); 
jQuery(this).closest('a').removeClass('cboxElement'); 
}); 
}); 

Answer 2

필자가 Colorbox를 사용하면서 기억하는 한, 이미지는 cboxElement -class가 붙은 이미지 만 인식합니다. 큰 이미지의 소스를 변경하는 함수가 이미있는 것 같으므로 클릭 한 축소판에서 cboxElement 클래스를 제거하고 다른 두 이미지에 연결하는 방법은 무엇입니까? 시도해 볼만한 가치가 있을지도 모릅니다.

Answer 3

colorbox 그룹에 4 개의 요소 (엄지 3 개 + 기본 이미지 1 개)가 있습니다. 왜냐하면 colorbox에 cboxElement 클래스를 모두 지정하여 colorbox에 4 개의 요소 (엄지 3 개 + 기본 이미지 1 개)가 표시되기 때문입니다. 이 클래스는 기본 설정 (예 : 외부 탐색이없는 표준 이미지 갤러리)이 필요할 때 유용합니다.

그러나 상황에 맞는 "기본"설정이 필요합니다. 주 이미지를 colorbox의 트리거로 사용하고 JS에서 colorbox 이미지를 설정하는 것이 좋습니다 (cboxElement 제외). 전략은 다음과 같습니다.

1. 모든 손가락을 img 님의 colorbox 그룹으로 초기화하십시오. 엄지를 클릭하면
2. 는 해당 엄지 img의 ID는 메인 이미지 링크에 저장된
3. 주 화상 개방 colorbox 기, 저장된 ID 여기

와 그 용 JS의 시작을 클릭하면 :

//STEP 1: initialize colorbox group 
$(".attachment-gold-thumbnails").colorbox({ 
    rel: "myGroup" 
    //other options... 
}); 

여기서는 colorbox 그룹을 설정합니다. 엄지의 img를 가져 오는 클래스를 사용하고 있습니다. 주위에있는 링크는 가져 오지 않습니다. 엄밀히 말하면, 수업을 사용하여 수업을 진행할 필요가 없습니다.

//Each thumb updates main image 
$(".wpcart_gallery a").click(function() { 
    var thumb_img_link = $(this), 
     thumb_img = thumb_img_link.children().first(), 
     product_image = $("#product_image_736"), 
     product_image_link = product_image.parent(); 

    //STEP 2: update "data-thumb" attribute 
    product_image_link.attr("data-thumb", "#" + thumb_img.attr("id")); 

    product_image.attr({ 
     src: thumb_img.attr("href"), 
     alt: thumb_img.attr("src"), 
     title: thumb_img.attr("src") 
    }); 

    return false; 
}); 

사용자 정의가 가장 가능성이 높은 부분입니다. 적어도 엄지 img id는 주 이미지 링크에 저장해야합니다.

//Main image opens colorbox 
$(".preview_link").click(function() { 
    var thumb_img_id = $(this).attr("data-thumb"); 

    //STEP 3 
    $(thumb_img_id).colorbox({open:true}); 

    return false; 
}); 

data-thumb에 저장된 ID를 사용하여 해당 이미지에 대한 colorbox 그룹을 엽니 다.

또한 HTML 약간 변경 확인해야합니다

: ... jsfiddle

<!-- Change 1: add data-thumb --> 
<a class="preview_link" data-thumb="#thumb1" ...> 
    ... 
</a> 

<div class="wpcart_gallery"> 
    <a class="thickbox" ... > 
     <!-- 
     Change 2: Give the img an id so we can reference it 
     Change 3: Instead of the "rev" attribute, colorbox will 
     read the "href" attribute in the img tag --> 
     <img id="thumb1" href="http://images.picturesdepot.com/photo/s/scenery_wallpaper,_wallpaper-209423.jpg" ... > 
    </a> 
</div> 

체크 아웃 here가

이