0

/js/global.js ファイルのコードのこのセクションは、各画像をクリックすると新しいウィンドウで開くようにします。このコードを変更して、それぞれを FancyBox で開くようにすることはできますか? 私が運営している Vanilla フォーラム用の FancyBox プラグインをダウンロードしました。現在、投稿自体をクリックした後に投稿に埋め込まれた画像のみを対象としています。メイン ページで、画像をクリックすると新しいウィンドウが開きます。

// Shrink large images to fit into message space, and pop into new window when clicked.
// This needs to happen in onload because otherwise the image sizes are not yet known.
    jQuery(window).load(function() {
       var props = ['Width', 'Height'], prop;
       while (prop = props.pop()) {
          (function (natural, prop) {
             jQuery.fn[natural] = (natural in new Image()) ? 
             function () {
                return this[0][natural];
             } : 
             function () {
                var 
                   node = this[0],
                   img,
                   value;
                if (node.tagName.toLowerCase() === 'img') {
                   img = new Image();
                   img.src = node.src,
                   value = img[prop];
                }
                return value;
             };
          }('natural' + prop, prop.toLowerCase()));
       }
       jQuery('div.Message img').each(function(i,img) {
          var img = jQuery(img);
          var container = img.closest('div.Message');
          if (img.naturalWidth() > container.width() && container.width() > 0) {
             img.wrap('<a href="'+$(img).attr('src')+'"></a>');
          }
       });
       // Let the world know we're done here
       jQuery(window).trigger('ImagesResized');
    });
4

1 に答える 1

0

この行を変更して、ラップされた画像に特定のクラスを追加します

img.wrap('<a href="'+$(img).attr('src')+'"></a>');

...これに：

img.wrap('<a class="fancybox" href="'+$(img).attr('src')+'"></a>');

.fancybox次に、次のようなカスタム スクリプトでfancybox をそのセレクター (" ") にバインドします。

$(".fancybox").fancybox();

これは、fancybox の js ファイルと css ファイルが正しく読み込まれていることを前提としています。

于 2013-02-27T20:53:11.713 に答える