Блог

Главная - Вопросы по программированию - Открыть fancybox onclick с помощью jQuery

Открыть fancybox onclick с помощью jQuery

#javascript #jquery #html #fancybox

#javascript #jquery #HTML #fancybox

Вопрос:

У меня такая структура:

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

как открыть fancybox после нажатия на <i class="...> ?

Комментарии:

1. Вы импортировали библиотеку в свой код и запустили fancybox? Все инструкции по настройке можно найти здесь .

Ответ №1:

Простой способ (если вы используете jQuery): Вы можете нажать на «fancybox-button» (она откроет fancybox), когда вы нажмете на i элемент. Например:

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

Комментарии:

1. Большое спасибо! После исправления fancybox_button на fancybox-button работает хорошо.

Ответ №2:

Это может помочь вам понять, как это работает «под капотом»

 $('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>