CODEWITHSUNDEEP
javascriptjqueryhtmlimagefancybox
usernameabc
usernameabc

Reputation: 674

How to use fancybox 3 without a tags?

We are using fancybox 3 to create a way for site visitors to click on the image and see it display in the lightbox-like format. We have tried the following and can get it to work with only <a>, but we want it to work without the <a>.

How can we get the fancybox to work without the use of <a> tags?

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

Upvotes: 0

Views: 1498

Answers (2)

Janis
Janis

Reputation: 8769

You can use any elements and you can use data-src attribute to specify the source, for example, replace this

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

with this

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

Upvotes: 1

challa
challa

Reputation: 1

Yes, you can simply use like so

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

Upvotes: 0

Related Questions