javascript – Adding a cross to a picture

Question:

Tell me how to make sure that the cross is added automatically to the picture that opens to the full width of the screen. Using fancybox 3

   <a data-fancybox data-src="#hidden-content-1" href="javascript:;">
       <img src="images/product/bookkeeper-product1.png" />
    </a>
    <img style="display: none;" id="hidden-content-1" src="images/product/bookkeeper-product1.png">

Answer:

Use a data-src , and data-srcset :

<script src="https://code.jquery.com/jquery-2.2.4.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/fancybox/3.0.47/jquery.fancybox.min.css" />
  <script src="https://cdnjs.cloudflare.com/ajax/libs/fancybox/3.0.47/jquery.fancybox.min.js"></script>
  
  <a data-fancybox="images" data-srcset="#hidden-content-1" href="https://dummyimage.com/300x200/ccc/fff&text=img">
       <img src="https://dummyimage.com/300x200/ccc/fff&text=img" />
  </a>
  
  <img style="display: none;" id="hidden-content-1" src="https://dummyimage.com/300x200/ccc/fff&text=img">
Post Views: 0
Scroll to Top