Virajsinh

Image Viewer magnificPopup With Title

Jun 22nd, 2020
87
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
  1. //https://www.solodev.com/blog/web-design/adding-magnific-popup-to-your-photo-gallery.stml
  2.  
  3.         <script type="text/javascript">
  4.        
  5.          function view_image(element){
  6.             var src = $(element).find("img").attr('src');
  7.             $('#view_image').attr('src', src);
  8.         };
  9.  
  10.  
  11.         $( document ).ready(function() {
  12.             $(".gallery").removeAttr("style");
  13.         });
  14.  
  15.         $(".gallery").magnificPopup({
  16.             delegate: 'a', // the selector for gallery item
  17.             type: 'image',
  18.             gallery: {
  19.               enabled:true
  20.             },
  21.             image: {
  22.                   tError: '<a href="%url%">The image #%curr%</a> could not be loaded.',
  23.                   titleSrc: function(item) {
  24.                     return item.el.attr('data-title') + '<small>by Solodev</small>';
  25.                }
  26.             }
  27.         });
  28.  
  29.             //multiple Gallery class use
  30.             $('.gallery').each(function() { // the containers for all your galleries
  31.                 $(this).magnificPopup({
  32.                     delegate: 'a', // the selector for gallery item
  33.                     type: 'image',
  34.                     gallery: {
  35.                       enabled:true
  36.                     },
  37.                     image: {
  38.                           tError: '<a href="%url%">The image #%curr%</a> could not be loaded.',
  39.                           titleSrc: function(item) {
  40.                             return item.el.attr('data-title') + '<small>by Solodev</small>';
  41.                         }
  42.                     }
  43.                 });
  44.             });
  45.         </script>
RAW Paste Data