CloudZoom with Fancybox

Question

我對javascript有點新，因爲我大多隻是在開發網頁時用CSS樣式來玩弄它。

我遇到了嘗試將Fancybox與Cloudzoom集成的問題。我一直試圖按照這裏指示的方向：http://blog.codestars.eu/2010/cloud-zoom-in-der-fancybox/

我能夠得到的效果工作完美，除了一個小錯誤 - 出於某種原因（我所有的圖像在畫廊更容易使用滾動通過fancybox），變焦只能顯示系列中的第一幅圖像。

如果有人能幫我解決這個問題？預覽任何這裏的畫廊：http://bit.ly/LaPzEH

這是我認爲的珍聞只是稍微偏離 - 我認爲這是與在此代碼href行被關閉：

$j('a[rel=gallery]').fancybox({ 
    padding: 0, 
    overlayColor: '#'+$j('#skin_color').val(), 
    transitionIn: 'fade', 
    transitionOut: 'fade', 
    overlayOpacity: .9, 
    onComplete : function(arg) { 
     $('#fancybox-img').wrap(
     $('<a>') 
     .attr('href', $(arg[0]).attr('href')) 
     .addClass('cloud-zoom') 
     .attr('rel', "position: 'inside'") 
    ); 
    $('.cloud-zoom').CloudZoom(); 
} 
}); 

任何一個所有的幫助非常感謝！

編輯：得到它通過改變

$(arg[0]).attr('href') 

努力

this.href 

順便說一句（因爲我無法找到許多cloudzoom /的fancybox線程），你也可以從內部改變位置通過編輯fancybox的JS代碼來讓fancybox內部顯示可見而不是隱藏。

Answer 1

如果這個想法是class="cloud-zoom"，並與錨相同href屬性是打開的fancybox像

<a href="{same as anchor}" class="cloud-zoom" rel="position: 'inside'"> 
<img id="fancybox-img" src="{big image}" alt=" " /> 
</a> 

包裹#fancybox-img選擇用錨...所以雲變焦可以在工作特定的圖像，然後我會重新寫onComplete回調，如：

'onComplete' : function(){ 
    $('#fancybox-img').wrap(
    $('<a />') 
    .attr('href', this.href) // this.href gets the "href" of the current image 
    .addClass('cloud-zoom') 
    .attr('rel', "position: 'inside'") 
    ); // wrap 
    $('.cloud-zoom').CloudZoom(); 
} // onComplete 

（不知道什麼赫克onComplete : function(arg)會做但在任何情況下，這將是更好地使用'onComplete' : function(currentArray, currentIndex)爲標準的fancybox代碼的緣故）

旁註：

1. 您正在加載的jQuery（1.4.2和1.7.1兩個版本），當你真的需要一個實例（理想情況下是最新版本）以避免意外錯誤。

2. 您正在使用的fancybox V1.3.0 ......它不會傷害到至少升級到v1.3.4

3. 設置引號之間所有的fancybox API選項，如

   "padding": 0, // it's OK 0 without quotes (integer and Boolean values go without them) 
   "overlayColor": '#'+$j('#skin_color').val(), 
   "transitionIn": 'fade', 
   "transitionOut": 'fade', 
   "overlayOpacity": .9, 
   "onComplete": ...etc 
   

   有已知問題（主要是IE），因爲（fancybox v1.3。x）