Kami menggunakan fancybox 3 untuk membuat cara bagi pengunjung situs mengeklik gambar dan melihatnya ditampilkan dalam format seperti lightbox. Kami telah mencoba yang berikut ini dan dapat membuatnya berfungsi hanya dengan <a>, tetapi kami ingin ini berfungsi tanpa <a>.

Bagaimana kita bisa membuat fancybox bekerja tanpa menggunakan tag <a>?

(function($) {
$('.fancybox').fancybox({});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/fancybox/3.5.7/jquery.fancybox.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/fancybox/3.5.7/jquery.fancybox.css" rel="stylesheet"/>


<div class="fancybox">
  <figure>
    <a href="myurl/img1.png" data-fancybox="images">
      <img src="myurl/img1.png" alt="thumbnail">
    </a>
  <figure>
  <figure>
    <a href="myurl/img2.png" data-fancybox="images">
      <img src="myurl/img2.png" alt="thumbnail">
    </a>
  <figure>
  <figure>
    <a href="myurl/img3.png" data-fancybox="images">
      <img src="myurl/img3.png" alt="thumbnail">
    </a>
  <figure>
  <figure>
    <a href="myurl/img4.png" data-fancybox="images">
      <img src="myurl/img4.png" alt="thumbnail">
    </a>
  <figure>
</div>
0
usernameabc 28 Oktober 2019, 21:00

2 jawaban

Jawaban Terbaik

Anda dapat menggunakan elemen apa pun dan Anda dapat menggunakan atribut data-src untuk menentukan sumbernya, misalnya, ganti ini

<figure> <a href="myurl/img1.png" data-fancybox="images">...

Dengan ini

<figure data-src="myurl/img1.png" data-fancybox="images">...

0
Janis 28 Oktober 2019, 19:39

Ya, Anda cukup menggunakan seperti itu

$(function() {
    $('.fancybox').fancybox({});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/fancybox/3.5.7/jquery.fancybox.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/fancybox/3.5.7/jquery.fancybox.css" rel="stylesheet"/>

<img src="myurl/img1.png" class="fancybox" data-fancybox="images" data-src="myurl/img1.png" alt="thumbnail">
2
challa 28 Oktober 2019, 19:12