2

私はほとんどの場合、Webページを開発するときにCSSスタイルをいじくり回しているので、javascriptは少し初めてです。

FancyboxをCloudzoomと統合しようとすると問題が発生しました。私はここで指示されている指示に従おうとしています：http：//blog.codestars.eu/2010/cloud-zoom-in-der-fancybox/

1つの小さなエラーを除いて、効果を完全に機能させることができます-何らかの理由で（私の画像はすべてギャラリーにあり、ファンシーボックスをスクロールして使いやすくなっています）、ズームではシリーズの最初の画像のみが表示されます。

誰かが私がこれを整理するのを手伝ってくれるなら？ここでギャラリーのいずれかをプレビューします：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-innerの表示を非表示ではなく表示することで、位置を内側から右/左などに変更することもできます。

4

1 に答える 1

1

アイデアが、fancyboxを開いたアンカーと同じ属性を持つ#fancybox-imgアンカーでセレクターをラップすることである場合class="cloud-zoom"href

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

... Cloud ZoomonCompleteが特定の画像で機能するように、コールバックを次のように書き直します。

'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

（一体何をするかはわかりませんが、いずれにせよ、標準のfancyboxコードのためonComplete : function(arg) に使用する方が良いでしょう）'onComplete' : function(currentArray, currentIndex)

サイドノート：

  1. 予期しないエラーを回避するために実際に単一のインスタンス（理想的には最新バージョン）が必要な場合は、2つのバージョンのjQuery（1.4.2と1.7.1）をロードしています。

  2. fancyboxv1.3.0を使用しています...少なくともv1.3.4にアップグレードしても問題ありません

  3. 次のような引用符の間にすべてのfancyboxAPIオプションを設定します

    "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

    そのため（fancybox v1.3.x）、既知の問題（主にIE）があります

于 2012-07-09T16:49:46.490 に答える