Question

I have a page where I want a text link AND an image link to open up
the same iframed page, however only the first link (p) is working. The
image link does open up the colorbox and displays the title as it
should, but just doesn’t display the content of the iframe – it’s completely blank.

$("body.mediaPackPage p.genericLinkButton a,
body.mediaPackPage .rightImageColumn a img").colorbox({width:"90%",
height:"90%", iframe: true, title: "Online Media
Pack"});

    <p class="genericLinkButton"><a href="media_pack/index.html">Online Media Pack magazine <span class="smallArrow">></span></a></p>
 <div class="rightImageColumn"><a href="media_pack/index.html"><img src="/img_middleColumn/media-pack.jpg" alt="Media Pack" /></a></div>

Any ideas?

Thanks

Answer 1

Try assigning this to the anchor, not the image:

$("body.mediaPackPage p.genericLinkButton a, body.mediaPackPage .rightImageColumn a").colorbox(...);

By assigning this to the image, two click events happen – first is for the image second is for the link so maybe it’s “toggling” something behind the scenes.

You can also solve this by having return false to cancel any further click events, but in your case better to handle only one event to begin with.