2

[A] 私はすばらしいHighslideスクリプトを使用して (組み込みの AJAX 機能を介して) モーダル ウィンドウを開きます。

[B] そこで、「メイン」はトップ/メイン ページを指すために使用し、「挿入」は「メイン」に挿入されるページを表すために使用します。

[C] Highslide ウィンドウに読み込まれる「挿入」ページには、モーダルが展開されたときに実行する必要がある 4 つの外部スクリプトが含まれています。

</body>[D] AJAX モードでは Highslide がセクションを無視するため、スクリプトは「挿入」ページの下部 (タグの直前) に含まれてい<head>ます。

[E] 私のスクリプトは次のようになります。

    <script src="/js/jquery-1.7.1.min.js"></script>
    <script src="/js/jQuery.thumbfx.js"></script>
    <script src="/js/jQuery.easing.js"></script>
    <script src="/js/jquery.masonry.min.js"></script>
    <script>
    $(function(){var $container = $('#IMAGES');$container.imagesLoaded( function(){$container.masonry({itemSelector : '.BLOCK',columnWidth: 200,isFitWidth: true,gutterWidth: 0});});});
    </script>
</body>

[F] Highslide は「メイン」ページのヘッドでアクティブ化されます。以下のコードを含めることで、モーダル ウィンドウがフェッチされて展開されるときにこれらのスクリプトをトリガーすることになっています。

hs.Expander.prototype.onAfterExpand = function() {
    var scripts = this.content.getElementsByTagName('script');
    for (var i = 0; i < scripts.length; i++) {
        eval(scripts[i].innerHTML);
    }
};

[G] 問題は 2 つあります... 1 つ目:すべてのスクリプトを有効にできないようです。Masonry はこのシナリオで完全に機能しますが、ThumbFX をまったく機能させることができません。 2 番目:この問題を解決しようとして、私は eval() が悪であり、凶暴なゾンビのように避けるべきであることを発見しました。

質問:そのイベントで実行できる、より優れた (より安全な) 関数はありhs.Expander.prototype.onAfterExpandますか? おそらく、すべてのスクリプトで実際に機能する関数はありますか?

ありがとうございました。

編集： ところで...私のパスは正しいです.「挿入」ページに直接アクセスすると、すべてのスクリプトが完全に機能します。ただし、「挿入」ページが Highslide によって AJAX 化されている場合は Masonry のみが機能します。再度、感謝します。

4

1 に答える 1

0

以下のコードは、含まれている JavaScript ファイルではなく、Highslide ajax ポップアップ内のスクリプト ブロックのみを読み取ります。Masonry のコードがスクリプト ブロックに配置されているため、Masonry は機能し、ThumbFx は機能しません。Masonry のスクリプト ファイルは、メイン ページに含まれているファイル (jquery-1.6.1.min.js および jquery.masonry.min.js) から選択されます。

hs.Expander.prototype.onAfterExpand = function () {
    var scripts = this.content.getElementsByTagName('script');
    for (var i = 0; i < scripts.length; i++) {
        eval(scripts[i].innerHTML);
    }
};



Highslide ajax ポップアップで JavaSript ブロックを使用しないソリューション:「挿入」ページでスクリプト ブロックを使用する代わりに
、イベントから関数を直接呼び出すことができます。onAfterExpand必要な JavaScript ファイルはすべて、メインページの head セクションに含める必要があります。onAfterExpandThumbFx の作成者から入手したコードでは、メイン ページのすべての開始アンカーに一意の ID が必要です。これにより、開始アンカーと正しい「挿入」ページをイベント内のコードで結び付けることができます。

ID 付きの HTML マークアップ:

<a id="link1" href="insert-page/image/1/" rel="highslide-ajax" class="BLOCK">
    <img src="thumbs/image1.jpg" alt="" /></a>
<a id="link2" href="insert-page/image/2/" rel="highslide-ajax" class="BLOCK">
    <img src="thumbs/image2.jpg" alt="" /></a>

イベントで関数を呼び出しますonAfterExpand(highslide-full.js が必要です)。

hs.Expander.prototype.onAfterExpand = function () {
    // for jQuery Masonry
    var $container = $('#IMAGES');
    $container.imagesLoaded(function () {
        $container.masonry({
            itemSelector: '.BLOCK',
            columnWidth: 200,
            isFitWidth: true,
            gutterWidth: 0
        });
    });
    // for ThumbFx
    if (this.a.id == 'link1') {
        $.ajax({
            url: "insert-page/image/1/",
            context: document.body
        }).done(function () {
            $('[data-overlayer]').overlayer();
        });
    }
    if (this.a.id == 'link2') {
        $.ajax({
            url: "insert-page/image/1/",
            context: document.body
        }).done(function () {
            $('[data-overlayer]').overlayer();
        });
    }
//  add more calls for ThumbFx here
};



Highslide ajax ポップアップの JavaScript ブロックを使用したソリューション:
このコードをメイン ページに、highslide 設定と共に配置します (highslide-full.js が必要です)。

hs.Expander.prototype.onAfterExpand = function () {
    var scripts = this.content.getElementsByTagName('script');
    for (var i = 0; i < scripts.length; i++) {
        eval(scripts[i].innerHTML);
    }
};

これには、必要な JavaScript ファイルがメイン ページに含まれていることも必要ですが、メイン ページのオープニング アンカーに ID を追加する必要はありません。
「挿入」ページの body タグにスクリプト ブロックを配置します。

<script>
$(function () {
    // for jQuery Masonry
    var $container = $('#IMAGES');
    $container.imagesLoaded(function () {
        $container.masonry({
            itemSelector: '.BLOCK',
            columnWidth: 200,
            isFitWidth: true,
            gutterWidth: 0
        });
    });
    // for ThumbFx
    $.ajax({
        context: document.body
    }).done(function () {
        $('[data-overlayer]').overlayer();
    });
});
</script>
于 2013-02-13T20:23:16.507 に答える