0

このテンプレートを購入しました: http://ferdiaobrien.com/template/

1 つの小さな問題を除けば、必要なことはすべて実行されます。ホームページ (および同じことを行う他のページ) で大きな画像を呼び出す関数を変更して、代わりに iFrame を呼び出す方法を jQuery の専門家から教え​​てもらえますか? そうすれば、画像だけでなく、好きなものを表示できます。

これがすべてを処理するファイルであると確信していますが、javascript は私にとってすべてギリシャ語です: http://ferdiaobrien.com/template/js/dynamicpage.js

したがって、私とは異なり、jQuery を使って何をしているかを知っているすべての人にわかりやすくするために、次のようなリストを作成できるようにしたいと考えています。

<ul class="thumbs">
    <li><a href="frames/frame1.php"><img src="images/photo/tfile_small_1_1.jpg" alt="" title=""></a></li>
</ul>

テンプレートからコピーして貼り付けた、これの現在の形式の代わりに:

<ul class="thumbs">
    <li><a href="images/photo/tfile_gall_1_1.jpg"><img src="images/photo/tfile_small_1_1.jpg" alt="" title=""></a></li>
</ul>

tfile_gall_1_1.jpg などではなく、frame1.php の内容を表示します。

これは最初の画像をロードする機能だと思います：

initGallery =
    function(){
        var $gal = $('#gallery'),
            img_link = $gal.find('.thumbs li:first-child').children('a').attr("href");

        $gal.find('.thumbs li:first-child').addClass("current").find('img').fadeTo('500', 0);

        $loading.show();

        _img=$('<img class="big_img">')
        _img.css({left:"100px", top:"30px", opacity:0}).load(
            function(){
                $loading.hide();
                $gal.prepend(this);
                $(this).animate({left:"17px", top:0, opacity:1}, 500);
            })
            .attr({src:img_link});

        $gal.children('.gallery_nav').tinycarousel({ axis: 'y'});

        $gal.find("ul.thumbs li").each(
            function(){
                var thumbUrl = $(this).find("img").attr("src");
                $(this).children().css({'background' : 'url(' + thumbUrl + ') no-repeat right top'});
            }
        );

        $gal.hover(
            function(){
                $('.gallery_nav', this).stop().animate({right:0}, 'fast')
            },
            function(){
                $('.gallery_nav', this).stop().animate({right:"-164px"}, 'fast')
            }
        );
    };

そして、これは後続の画像の 1 つです。

$mainContent.delegate("#gallery .thumbs a", "click", function(){

    if($(this).parent().is(".current")){
        return false
    }
    else {
    $(this).parent().addClass("current").find("img").css({opacity:0}).parent().parent().siblings(".current").removeClass("current").find("img").css({opacity:1});
        var img_link = $(this).attr("href");
        var $gal = $('#gallery');
        $loading.show();
        $gal.children('.big_img').animate({left:"-40px", top:"40px", opacity:0}, 500 , function(){
            $(this).remove()
        });

        _img=$('<img class="big_img">')
        _img.css({left:"100px", top:"30px", opacity:0}).load(
            function(){
                $loading.hide();
                $gal.prepend(this);
                $(this).animate({left:"17px", top:0, opacity:1}, 500);
            })
            .attr({src:img_link});

            return false;
        }
    });

しかし、私が変わるとき

_img=$('<img class="big_img">')

に

_img=$('<iframe class="big_img"></iframe>')

HTML の生成を拒否します。これと関係があるようです: preload img を iframe に変換します が、私はそれを理解することができません。

前もって感謝します

更新: ここまで問題を追跡しました: http://jquery-howto.blogspot.ie/2010/02/dynamically-create-iframe-with-jquery.html

コードに append() 関数を追加しようとしましたが、iframe を生成してから再度生成するという無限ループに入るようです。

4

1 に答える 1

0

解決策は、画像を制御する 2 つの抜粋 (問題のリスト) をコメントアウトしてから、次の内容を新しいファイルに追加することでした。

function loadIframe(iframeName, url) {
    var $iframe = $('#' + iframeName);
    if ($iframe.length) {
        $iframe.attr('src', url);
        return false;
    }
    return true;
 }

次のような初期 iframe を設定します。

<iframe src="" width="630" height="420" frameborder="0" webkitAllowFullScreen mozallowfullscreen allowFullScreen name="ifrm" id="ifrm"></iframe>

次に、メニューに onClicks を次のように追加します。

<ul class="thumbs">
    <li><a href="" onClick="return loadIframe('ifrm', this.href);"><img src="img/photo/" alt="" title=""></a></li>
于 2012-11-13T00:14:08.127 に答える