0

我刚刚购买了这个模板： http: //ferdiaobrien.com/template/

它可以做我需要的一切，除了一个小问题。任何 jQuery 专家都可以告诉我如何更改调用主页（以及其他执行相同操作的页面）上较大图像的函数，以便它调用 iFrame？这样我就可以显示我喜欢的任何内容，而不仅仅是图像。

我相当确定这是处理这一切的文件，但 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>

并让它显示 frame1.php 的内容，而不是 tfile_gall_1_1.jpg，等等。

我认为这是加载第一张图片的功能：

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')
            }
        );
    };

这是后续图像的一个：

$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。这似乎与此有关：将预加载 img 转换为 iframe ，但我无法理解它。

提前致谢

更新： 所以我已经将问题追踪到这里：http: //jquery-howto.blogspot.ie/2010/02/dynamically-create-iframe-with-jquery.html

我曾尝试将 append() 函数添加到代码中，但它似乎进入了生成 iframe 的无限循环，然后再次生成它。

4

1 回答 1

0

Ok, so the solution was to comment out the two excerpts that control the image (listed in question) and then add the following to a new file:

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

set up an initial iframe such as:

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

and then in the menu add onClicks like so:

<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 回答