CODEWITHSUNDEEP
jquerycolorbox
bikey77
bikey77

Reputation: 6672

Colorbox - How to display only a specific DIV

I'm using Colorbox to show products in an e-shop but I would like to show only the product div (#prodpreview) and not the entire page with headers, footers etc.

Each product link looks like this:

<a class="items" href="product.php?id=1" rel="items">Link to product 1</a>
<a class="items" href="product.php?id=2" rel="items">Link to product 2</a>

And this is my call to Colorbox:

$("a.items").colorbox({rel: 'items', iframe:true, transition:"fade", 
width:"80%", height:"90%", 
onClosed:function(){ location.reload(true); } });

I've read this but it wont work for me, any other suggestions?

UPDATE: I've changed a couple of things and now I'm using the following call to open a page in Colorbox and displaying a particular div. 

$('a.items').colorbox({ href:function(){ return this.href + " #prodpreview"; }});

But now I've lost all the iframe capabilities of Colorbox and when I submit the form in the colorbox, the window closes and I'm left with just the product page. So how do I go from here in order to combine both features, opening a Colorbox window to display a #div but also having the iframe features so I can submit forms inside Colorbox?

Upvotes: 1

Views: 15569

Answers (1)

Sarfraz
Sarfraz

Reputation: 382696

If you want to show specific div in colorbox, you should do:

<div id="prodpreview" style="display:none">
   your stuff here
</div>
<a class='inline' href="#prodpreview">Inline HTML</a>

<script>
$(".inline").colorbox({inline:true});
</script>

Upvotes: 8

Related Questions