Question

I’m using Fancybox for a jQuery lightbox and it only works with one href hyperlink.

<script type="text/javascript">$(document).ready(function() {$("#form").fancybox({'width':'65%','height':'60%','autoScale':false,'transitionIn':'none','transitionOut':'none','type':'iframe'});});</script>

So as you can see above, the fancybox will work with #form.

The HTML for the link on the page is such:

<a id="form" href="form.html" class="slider-link"><img src="images/button_downloadarticle.gif" alt="Download Article"/></a>

So the id is ‘form’ and this links to form.html which does actually work for the first instance however I wish to use the above HTML about 20 times on the page so I can have the same link to form.html using Fancybox. The first link works fine calling Fancybox, but every other link opens form.html in a new browser window instead.

Hope this makes sense, I’m here to clarify more if need be. Some advise to get this working across the whole page would be great.

Thanks

Answer 1

I think that the problem is that you are using an id. So loose i would do this:

<a id="form" class="fancy_item slider-link"><img src="images/button_downloadarticle.gif" alt="Download Article"/></a>

<script type="text/javascript">
    $(document).ready(function() {                  
        $(".fancy_item").fancybox({
            'width':'65%',
            'height':'60%',
            'autoScale':false,
            'transitionIn':'none',
            'transitionOut':'none',
            'type':'iframe'
        });
    });
</script>

I hope this helps 🙂