在colorbox中改變動態圖像

我在產品頁面或電子商務網站上工作，目前有3個小圖像和一個大圖像。三個小圖片都可以點擊，當用戶點擊圖像中的一個較大的圖像被改變，以顯示使用該圖片：在colorbox中改變動態圖像

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

這可能嗎？

來源

2013-04-12 Glen Robson

的可能重複的[彩盒上一頁和下一頁按鈕未示出]（http://stackoverflow.com/questions/15972944/colorbox-previous-and-next-buttons-not-showing） – Ian

一些事情。

爲什麼不點擊小圖片後直接跳到彩盒？

但假設你有一個大的佔位符圖像和幾個縮略圖交換它們，這就是我要做的。

給這個ID。您可以將尺寸設置爲任何您需要的。

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

嘗試使用。點擊（）與jquery & & .live（）函數。注意：live（）在jquery的更高版本中已被棄用。嘗試使用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);

來源

2013-04-12 21:29:52 typeslower

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

來源

2013-04-12 15:33:55 Bernardao

這是行不通的因爲它不是我想要調用的函數。當您單擊具有largeImgPop jQuery（「a.largeImgPop」）類的超鏈接文本時，將顯示彈出框。colorbox（{opacity：0.4，rel：'largeImgPop'，photo：true}）; –

請提供一些背後的理由 - 簡單地提供一個HTML樣本並沒有什麼幫助。 –

在colorbox中改變動態圖像

回答

相關問題