jquery - how to make an iframe from a script i found into an ajax injection?

Question

I'm wondering how i would change this appended iframe:

$("#GB_window").append("<iframe id='GB_frame' src='" + url + "'></iframe>");

into a div. Is there a way to change this so that i'm not appending an iframe, but instead using ajax? I need to be able to use the

src='" + url + "'

part of it. i'm still a novice.

If you'd like to see the script i'm editing, it's the GreyBox Redux lightbox script by John Resig from awhile ago. I've stripped a decent amount of jquery out of it so far, because all i need it for showing images, not websites. it's only a couple of kb too.

thanks.

here's the jquery i have left after what i've stripped:

    var GB_DONE = false;

function GB_show(caption, url, height, width){
    GB_HEIGHT = height || 400;
    GB_WIDTH = width || 400;
    if (!GB_DONE) {
        $(document.body).append("<div id='GB_overlay'></div><div id='GB_window'>");
        $("#GB_overlay").click(GB_hide);
        $(window).resize(GB_position);
        GB_DONE = true;
    }

    $("#GB_frame").remove();
    $("#GB_window").append("<iframe id='GB_frame' src='" + url + "'></iframe>");

    $("#GB_overlay").fadeIn(350, function(){
        $("#GB_window").fadeIn(350);
    });
    GB_position();
}

function GB_hide(){
$("#GB_window,#GB_overlay").fadeOut(350, function(){
    $("#GB_window,#GB_overlay").hide()
});
}

function GB_position(){
var de = document.documentElement;
var w = self.innerWidth || (de && de.clientWidth) || document.body.clientWidth;
$("#GB_window").css({
    width: GB_WIDTH + "px",
    height: GB_HEIGHT + "px",
    left: ((w - GB_WIDTH) / 2) + "px"
});
$("#GB_frame").css("height", GB_HEIGHT - 32 + "px");

and this is from the of the html file:

    <script type="text/javascript">
  var GB_ANIMATION = true;
  $(document).ready(function(){
    $("a.greybox").click(function(){
      GB_show(this.title || $(this).text() || this.href,this.href,470,600);
      return false;
    });
  });
</script>

sorry if that's a lot :/

Answer 1

Instead of append("<iframe>...."); line use this one

$("<div id='GB_frame'></div>").appendTo("#GB_window").load(url);

It will create new div with id GB_iframe, append it to GB_window and then load content from provided url right into it.

Answer 2

If I understand you correctly, you want to load the contents of an html file and place it on a section of the page using ajax, not an iframe?

That's fairly simple using the jQuery load method.

$("#GB_window").load("url to load from");

This will place the contents of the html file you point to as the contents of the elements with the id 'GB_window'.

edit

So, you're trying to show an image file?

You need to use an <img> tag. Try this:

$("img").attr("src", "url to image").appendTo("#GB_window");