Question

I’m using Colorbox, and I want to load a specific div from another page on the website. Right now I’m using an iFrame, but I guess it doesn’t necessarily have to be an iFrame, since I’m staying on the same website. My code right now is:

$(document).ready(function(){
  $(".iframe").colorbox({iframe:true, data:"#mainColumn", width:"80%", height:"80%"});
});

<a class="iframe cboxIframe" href="http://website.com/products-51>.html">

I need to load the page in the href into the Colorbox, but only display the #mainColumn div.

Answer 1

ColorBox leverages jQuery’s .load() method for handling ajax. If you are loading a document from the same domain as your current document, you can use a selector pull out just the portion of the document that is needed. I am assuming the container which you want from other page is #mainColumn

var $iframe = $(".iframe");
$(".iframe").colorbox({ 
    href: $(".iframe").attr('href') + " #mainColumn",
});