1

iframe に次のコードがあり、親に表示されるようになりましたが、ファンシーボックスの例で画像ギャラリーのように画像をグループ化する方法がわかりません。

私は例でこれを見ました：

    $(document).ready(function() {
$('.imagen').click(function(e){
e.preventDefault();
parent.$.fancybox([
{href:'images/01.jpg', title: '01'},
{href:'images/02.jpg', title: '02'},
{href:'images/03.jpg', title: '03'}
],{
// href: this.href,
helpers: {
overlay: {...............

しかし、リンクは動的になるため、私はそれを望んでいません。次のようなものを使用したいのですが、次のよう $(".fancybox") .attr('rel', 'gallery')に使用します

 <a class="fancybox" rel="gallery" href="Lector.ashx?ImagenId=0" >

次のボタンですべての画像を画像ギャラリーとして表示するには、変更する必要はありません。

私のコード:

    <script type="text/javascript">
    $(document).ready(function () {
        $('.fancybox').click(function (e) {
            e.preventDefault();
            parent.$.fancybox({
                href: this.href,
                helpers: {
                    title: { type: 'inside' },
                    overlay: {
                        opacity: 0.3
                    } // overlay
                    //, buttons: {}
                } // helpers
            }); // fancybox
        }); // click
    }); 
</script>

体

<a class="fancybox" href="Lector.ashx?ImagenId=14" >
  <img alt="" src="../Resources/background.png" width="100" height="100"/>
</a>
<a class="fancybox" href="Lector.ashx?ImagenId=6">
<img alt="" src="Lector.ashx?ImagenId=6" width="100" height="100"/>
 </a>
 <a class="fancybox" href="Lector.ashx?ImagenId=20">
    <img alt="" src="Lector.ashx?ImagenId=6" width="100" height="100"/>
 </a>

私は fancybox 2.1.3 を使用しています。助けてください!!!! 前もって感謝します

I have to do this?
    $(document).ready(function () {
        $('.fancybox').click(function (e) {
    like i said before at start???
    });//click
    $('.fancybox').attr('rel', 'gallery').fancybox({
         JFK code??
     });
    });//
4

1 に答える 1

0

これらのリンクがある場合:

<a class="fancybox" href="Lector.ashx?ImagenId=14" >
  <img alt="" src="../Resources/background.png" width="100" height="100"/>
</a>
<a class="fancybox" href="Lector.ashx?ImagenId=6">
  <img alt="" class="fancybox" src="Lector.ashx?ImagenId=6.jpg" width="100" height="100"/>
</a>
<a class="fancybox" href="Lector.ashx?ImagenId=20">
  <img alt="" src="Lector.ashx?ImagenId=6.jpg" width="100" height="100"/>
</a>

...それらのどれにも画像拡張子がないことに注意してください。そのため、fancybox は処理するコンテンツを認識していません。API オプションtypeを使用して伝える必要があります。Fancybox ドキュメントのFAQタブ、No. 5 をtype : "image"確認してください

完全なコードは次のようになります。 

$(document).ready(function (){
    $('.fancybox').attr('rel', 'gallery').fancybox({
            type : "image", // force type of content to image
            helpers: {
                title: { type: 'inside' },
                overlay: {
                    opacity: 0.3
                } // overlay
            } // helpers
    }); // fancybox
}); // ready

編集：タグ（上記のコードの2番目のリンク）で次のようfancyboxにクラスも設定していることに気付きました：img

<img alt="" class="fancybox" ....

...予期しない結果になる可能性があるため、そこから削除することをお勧めします。<a>タグのみがclass を持つ必要がありfancyboxます。

于 2012-12-08T20:37:25.827 に答える