使用 jQuery 打开 fancybox onclick

Question

我有这样的结构：

<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>

点击<i class="...>后如何打开fancybox？

Answer 1

简单方法（如果你使用jQuery）：你可以点击"fancybox-button"（它会打开fancybox），当你点击i元素时。例如：

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

Answer 2

这可能有助于您了解其工作原理"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>

使用 jQuery 打开 fancybox onclick

Open fancybox onclick using jQuery

html

javascript

jquery

fancybox