2

Fancybox2を使用してギャラリーを生成しています。テキストだけでなく、必要に応じて写真のキャプションにリンクを付けたいと思います。

キャプション内にリンクを入れたいページは次のとおりです：http：//catjohnson.co.uk/weddings

そこにhtmlリンクを追加するだけで（この回答に続いて：Prettyphoto.jsまたはFancyboxで...キャプション内にリンクを追加する方法）、ギャラリー内の写真が壊れます。

このhttp://jsfiddle.net/FWTZA/をフォローしてみましたが、機能しますが、スタイリングが失われます。

私のスタイリングをjsフィドルコードと統合することができないようです…これが私がその瞬間に行っていることであり、それは機能しています：

$(document).ready(function() {
    $(".fancybox").fancybox({
        openEffect  : 'fade',
        closeEffect : 'fade',
        nextEffect  : 'fade',
        prevEffect  : 'fade',
            helpers : {
                title : {
                    type : 'inside'
                },
                overlay : {
                    css : {
                        'background-color' : '#eee'
                    }
                }
            }
    });
});

それが理にかなっていることを願っています！

ご覧いただきありがとうございます！

マーティン:)

4

2 に答える 2

4

このhtmlに対して

<a class="fancybox" data-title-id="title-1" href="http://fancyapps.com/fancybox/demo/1_b.jpg"><img src="http://fancyapps.com/fancybox/demo/1_s.jpg" alt=""/></a>
<div id="title-1" class="hidden">
    This is 1st title. <a href="http://google.com">Some link</a>
</div>

<a class="fancybox" data-title-id="title-2" href="http://fancyapps.com/fancybox/demo/2_b.jpg"><img src="http://fancyapps.com/fancybox/demo/2_s.jpg" alt=""/></a>

<div id="title-2" class="hidden">
    This is <b>2nd title</b>. <a href="http://google.com">Some link</a>
</div>​

...ヘルパーオプションを設定し、次のように各オプションをカンマで区切ることを忘れないでください:

$(".fancybox")
    .attr('rel', 'gallery')
    .fancybox({
        openEffect  : 'fade',
        closeEffect : 'fade',
        nextEffect  : 'fade',
        prevEffect  : 'fade',
        helpers : {
                title : {
                    type : 'inside'
                },
                overlay : {
                    css : {
                        'background-color' : '#eee'
                    }
                }
            },
        beforeLoad: function() {
            var el, id = $(this.element).data('title-id');
            if (id) {
                el = $('#' + id);

                if (el.length) {
                    this.title = el.html();
                }
            }
        }
    });​

作業例: http://jsfiddle.net/FWTZA/372

于 2012-08-02T17:54:44.177 に答える
0

データベースからすべての画像と URL を取得する方法は次のとおりです。

$(document).ready(function() {              
 $.fancybox(
  [ 
   { href : '/images/gallery_pic.php?id=229', title: 'Sample image one', rel : 'fancybox-thumb', class : 'fancybox-thumb'},
   { href : '/images/gallery_pic.php?id=167', title: ' Sample image two <a href="http://www.address" target="_blank">See site</a>', rel : 'fancybox-thumb', class : 'fancybox-thumb'}
  ],
  {
   type : 'image',
   autoScale : true,
   prevEffect : 'none',
   nextEffect : 'none',
   helpers : {
    title   : {
        type: 'inside',
        position: 'top'
    },

   } // closes helpers
  }               
 );
});
于 2016-08-20T05:51:56.567 に答える