Search code examples
jqueryhtmlcssfancybox

trigger fancy box from div?

I have seen several different variations to this questions but non seem to help. I simply want to trigger fancybox from a div. I have a div:

<div class="port web">Website</div>

This div has certain css feature to it:

  .web{
    font-size: 80px;
    color: rgba(255,0,0,.8);
    font-family: 'Luckiest Guy', cursive;
}

I am looking for a way to click .web to open up a fancy box. I am an amateur to i tried to place the div into the fancybox anchor, which i see was a rookie mistake. I have some knowledge of jquery if that help. Thanks.

 <a class="fancybox" rel="group" href="image/bg.jpg"><div class="port web">Website</div><img src="small_image_1.jpg" alt=""></a>



 $(document) .ready(function(){

         $('.web').animate({left:'12.5em', top:'6.5em'}, 3500);
    });
Solution

  • Why don't you just add fancybox class and href to your div element:

    <div class="fancybox port web" href="image/bg.jpg">Website</div>

    It does not matter if your trigger element is anchor or div, or whatever. If you would use v3, then you could just add data-fancybox and data-src attributes and it would just work without writing a single JS line.