Question

I have multiple instances of

<div class="picOuterDiv">
   <a href="examplepage.php?var=1" class="iframe" > page one </a>
</div>

<div class="picOuterDiv">
   <a href="examplepage.php?var=2" class="iframe" > page two </a>
</div>

Now I am using jQuery colorbox plugin to create Lightbox’s. The lightBox opens when i click the anchor element, The anchor element with the class iframe. It works fine till here, using

$(".iframe").colorbox({iframe:true, width:"646", height:"675"});

What I want is to open the colorbox when I click the parent div. I used the following code to trigger anchor element href when div was clicked, but apparently the href alone wasnt enough, the element clicked should have the class “iframe” . So its not working with this code.

$('.picOuterDiv').each(function(){
        $(this).on('click', function(){
            location.href = $(this).find('a').attr('href');
        });
});

So can anybody help me on how I can make this work ? I hope the Problem is clear. Thank you in advance.

UPDATE: http://jsfiddle.net/VhkFN/3/

Answer 1

This was what worked for me. As i said i was using jquery colorbox.

$(".picOuterDiv").click(function () {
   var anchorHref = $(this).find('a').attr('href');
   $(this).colorbox ({iframe:true, width:"646", height:"675", href: anchorHref});
});