将图像调用jQuery转换为iframe调用

Question

我刚购买了此模板：http：//ferdiaobrien.com/template/

它可以完成我需要的一切，一个小问题。任何jQuery专家能否告诉我我如何能够更改调用主页上较大图像的功能（以及其他执行相同操作的页面），以便将其称为iframe？这样，我可以显示自己喜欢的任何东西，而不仅仅是图像。

我很确定这是处理所有内容的文件，但是JavaScript对我来说都是希腊语：http：//ferdiaobrien.com/template/js/dynamicpage.js

因此，对于与我不同的每个人都知道自己在做什么的每个人，我希望能够列出这样的清单：

<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">')

to

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

它拒绝生成HTML。它似乎与此有关：将preload img转换为iframe但是我只是无法绕过它。

预先感谢

更新：因此，我将问题跟踪到这里：http：//jquery-howto.blogspot.ie/2010/02/dynamaly-namaly-create-create-iframe-with-jquery.html

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

Answer 1

好的，因此解决方案是要评论控制图像的两个摘录（列出了有问题），然后将以下内容添加到新文件中：

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>