CODEWITHSUNDEEP
javascriptjqueryhtmlfancybox
Tomasz
Tomasz

Reputation: 1408

Open fancybox onclick using jQuery

I have structure like this:

<div class="grid-item" style="position: absolute; left: 0px; top: 0px;">
    <a class="fancybox-button" rel="fancybox-button" href="http://res.cloudinary.com/djxgexgng/image/upload/q_auto:eco/v1/tiltkomp/gallery/bodnar.jpg">
        <img src="http://res.cloudinary.com/djxgexgng/image/upload/c_thumb,q_auto:good,w_900/v1/tiltkomp/gallery/bodnar.jpg" alt="bodnar" data-tag="shop all ">
    </a>
    <div class="img-bg">
        <i class="fa fa-search-plus" aria-hidden="true"></i>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. .</p>
    </div>
</div>

how to open fancybox after click on <i class="...> ?

Upvotes: 1

Views: 1954

Answers (2)

Mateusz Palichleb
Mateusz Palichleb

Reputation: 795

Simple way (if you use jQuery): You can make a click on "fancybox-button" (it will open fancybox), when you will click on i element. For example:

$("i.fa-search-plus").click( function() {
    $(this).parent().parent().find('a.fancybox-button').click();
});

Upvotes: 2

cssyphus
cssyphus

Reputation: 40038

This might help you understand how it works "under the hood"

$('i.fa-search-plus').click(function(){
  $('a.fancybox-button').click();
});

$('a.fancybox-button').click(function(){
   //fancybox internal code would do this part for you
   $('#lightbox').html('New message inserted here').fadeIn();
});
#lightbox{position:fixed;top:10%;left:20%;padding:100px;background:wheat;display:none;}

.fancybox-button{padding:5px 10px;background:dodgerblue;color:white;font-family:arial;text-align:center;text-decoration:none;}
<link href="http://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

<div id="lightbox">
  This is a lightbox
</div>
<a href="#" class="fancybox-button">Open LB</a>
<br><br><br>
<i class="fa fa-search-plus"></i>

Upvotes: 0

Related Questions