Modal - Lightbox

  1. Home
  2. Pages
  3. Page Title

Magnific Popup Lightbox

Single Image

Black electronics technician testing a circuit board Black electronics technician testing a circuit board Laptop and mobile devices photographed in Kampala 

<a class="image-popup-vertical-fit" title="Title Here 1" href="../tfast-assets/uganda/technician-repair-650x380.webp src="../tfast-assets/uganda/devices-uganda-240x180.webp alt=""></a>
<a class="image-popup-fit-width" title="Title Here 1" href="../tfast-assets/uganda/technician-repair-650x380.webp src="../tfast-assets/uganda/technician-server-240x180.webp alt=""></a>
<a class="image-popup-no-margins" title="Title Here 1" href="../tfast-assets/uganda/technician-repair-650x380.webp src="../tfast-assets/uganda/technician-server-240x180.webp alt=""></a>



$(document).ready(function() {

  $('.image-popup-vertical-fit').magnificPopup({
    type: 'image',
    closeOnContentClick: true,
    mainClass: 'mfp-img-mobile',
    image: {
      verticalFit: true
    }    
  });

  $('.image-popup-fit-width').magnificPopup({
    type: 'image',
    closeOnContentClick: true,
    image: {
      verticalFit: false
    }
  });

  $('.image-popup-no-margins').magnificPopup({
    type: 'image',
    closeOnContentClick: true,
    closeBtnInside: false,
    fixedContentPos: true,
    mainClass: 'mfp-no-margins mfp-with-zoom', // class to remove default margin from left and right side
    image: {
      verticalFit: true
    },
    zoom: {
      enabled: true,
      duration: 300 // don't foget to change the duration also in CSS
    }
  });
});

Image Gallery

Laptop and mobile devices photographed in Kampala Black technician repairing computer hardware Black electronics technician testing a circuit board 

<div class="popup-gallery">
  <a href="../tfast-assets/uganda/technician-650x380.webp title="Title Here 1"><img src="../tfast-assets/uganda/technician-240x180.webp alt=""></a>
  <a href="../tfast-assets/uganda/technician-repair-720x480.webp title="Title Here 2"><img src="../tfast-assets/uganda/technician-server-240x180.webp alt=""></a>
  <a href="../tfast-assets/uganda/technician-server-450x580.webp title="Title Here 3"><img src="../tfast-assets/uganda/devices-uganda-240x180.webp alt=""></a>
</div>



$(document).ready(function() {
  $('.popup-gallery').magnificPopup({
    delegate: 'a',
    type: 'image',
    tLoading: 'Loading image #%curr%...',
    mainClass: 'mfp-img-mobile',
    gallery: {
      enabled: true,
      navigateByImgClick: true,
      preload: [0,1] // Will preload 0 - before current, and 1 after the current image
    },
    image: {
      tError: 'The image #%curr% could not be loaded.',
      titleSrc: function(item) {
        return item.el.attr('title') + 'by Marsel Van Oosten';
      }
    }
  });
});

Zoom Gallery

Laptop and mobile devices photographed in Kampala Black technician repairing computer hardware Black technician repairing computer hardware 

<div class="zoom-gallery">
  <a href="../tfast-assets/uganda/technician-repair-650x380.webp title="Title Here 1"><img src="../tfast-assets/uganda/technician-repair-240x180.webp alt=""></a>
  <a href="../tfast-assets/uganda/technician-server-340x450.webp title="Title Here 2"><img src="../tfast-assets/uganda/technician-server-240x180.webp alt=""></a>
  <a href="../tfast-assets/uganda/technician-870x870.webp title="Title Here 3"><img src="../tfast-assets/uganda/devices-uganda-240x180.webp alt=""></a>
</div>



$(document).ready(function() {
  $('.zoom-gallery').magnificPopup({
    delegate: 'a',
    type: 'image',
    closeOnContentClick: false,
    closeBtnInside: false,
    mainClass: 'mfp-with-zoom mfp-img-mobile',
    image: {
      verticalFit: true,
      titleSrc: function(item) {
        return item.el.attr('title') + ' · image source';
      }
    },
    gallery: {
      enabled: true
    },
    zoom: {
      enabled: true,
      duration: 300, // don't foget to change the duration also in CSS
      opener: function(element) {
        return element.find('img');
      }
    }
    
  });
});

More Lightbox Examples


<ul class="list-inline">
  <li><a class="btn btn-default popup-youtube" href="https://www.youtube.com/watch?v=0O2aH4XLbto">Open YouTube video</a></li>
  <li><a class="btn btn-default popup-vimeo" href="https://vimeo.com/45830194">Open Vimeo video</a></li>
  <li><a class="btn btn-default popup-gmaps" href="https://maps.google.com/maps?q=Kampala+Road,+Kampala,+Uganda Google Map</a></li>
</ul>



$(document).ready(function() {
  $('.popup-youtube, .popup-vimeo, .popup-gmaps').magnificPopup({
    disableOn: 700,
    type: 'iframe',
    mainClass: 'mfp-fade',
    removalDelay: 160,
    preloader: false,

    fixedContentPos: false
  });
});

Dialog with CSS animation

Open with fade-zoom animation
Open with fade-slide animation 

<a class="popup-with-zoom-anim" href="#small-dialog" >Open with fade-zoom animation</a><br/>
<a class="popup-with-move-anim" href="#small-dialog" >Open with fade-slide animation</a>
<div id="small-dialog" class="modal-promo-box mfp-hide bg-lightest">
  <h1>Dialog example</h1>
  <p>This is dummy copy. It is not meant to be read. It has been placed.</p>
</div>



$(document).ready(function() {
  $('.popup-with-zoom-anim').magnificPopup({
    type: 'inline',

    fixedContentPos: false,
    fixedBgPos: true,

    overflowY: 'auto',

    closeBtnInside: true,
    preloader: false,
    
    midClick: true,
    removalDelay: 300,
    mainClass: 'my-mfp-zoom-in'
  });

  $('.popup-with-move-anim').magnificPopup({
    type: 'inline',

    fixedContentPos: false,
    fixedBgPos: true,

    overflowY: 'auto',

    closeBtnInside: true,
    preloader: false,
    
    midClick: true,
    removalDelay: 300,
    mainClass: 'my-mfp-slide-bottom'
  });
});

Popup with form

Open form 

<a class="popup-with-zoom-anim" href="#small-dialog" >Open with fade-zoom animation</a><br/>
<a class="popup-with-move-anim" href="#small-dialog" >Open with fade-slide animation</a>
<div id="small-dialog" class="modal-promo-box mfp-hide bg-lightest">
  <h1>Dialog example</h1>
  <p>This is dummy copy. It is not meant to be read. It has been placed.</p>
</div>



$(document).ready(function() {
  $('.popup-with-form').magnificPopup({
    type: 'inline',
    preloader: false,
    focus: '#name',

    // When elemened is focused, some mobile browsers in some cases zoom in
    // It looks not nice, so we disable it:
    callbacks: {
      beforeOpen: function() {
        if($(window).width() < 700) {
          this.st.focus = false;
        } else {
          this.st.focus = '#name';
        }
      }
    }
  });
});

Form Ajax Load

Open form - Style One
Or
Open form - Style Two

<a class="ajaxload-popup" href="ajax-load/donation-form.html" >Open with fade-zoom animation</a>
Or
<a class="form-ajax-load" href="ajax-load/donation-form.html" >Open with fade-zoom animation</a>

2. Prettyphoto Lightbox

Single Image

Black technician repairing computer hardware Black technician repairing computer hardware Black technician servicing hardware in a data centre 

<a data-rel="prettyPhoto" href="../tfast-assets/uganda/devices-uganda-280x190.webp width="240" src="../tfast-assets/uganda/devices-uganda-280x190.webp alt=""></a>
<a data-rel="prettyPhoto" href="../tfast-assets/uganda/technician-repair-280x190.webp width="240" src="../tfast-assets/uganda/devices-uganda-280x190.webp alt=""></a>
<a data-rel="prettyPhoto" href="../tfast-assets/uganda/technician-280x190.webp width="240" src="../tfast-assets/uganda/devices-uganda-280x190.webp alt=""></a>



$(document).ready(function() {
  $("a[data-rel^='prettyPhoto']").prettyPhoto({
      hook: 'data-rel',
      animation_speed:'normal',
      theme:'light_square',
      slideshow:3000, 
      autoplay_slideshow: false,
      social_tools: false
  });
});

Image Gallery

Laptop and mobile devices photographed in Kampala Black electronics technician testing a circuit board Black electronics technician testing a circuit board 

<a data-rel="prettyPhoto[gallery1]" href="../tfast-assets/uganda/technician-280x190.webp width="240" src="../tfast-assets/uganda/technician-repair-280x190.webp alt=""></a>
<a data-rel="prettyPhoto[gallery1]" href="../tfast-assets/uganda/technician-280x190.webp width="240" src="../tfast-assets/uganda/devices-uganda-280x190.webp alt=""></a>
<a data-rel="prettyPhoto[gallery1]" href="../tfast-assets/uganda/technician-280x190.webp width="240" src="../tfast-assets/uganda/technician-280x190.webp alt=""></a>



$(document).ready(function() {
  $("a[data-rel^='prettyPhoto']").prettyPhoto({
      hook: 'data-rel',
      animation_speed:'normal',
      theme:'light_square',
      slideshow:3000, 
      autoplay_slideshow: false,
      social_tools: false
  });
});

More Example Prettyphoto Lightbox


<ul class="list-inline">
  <li><a class="btn btn-default" data-rel="prettyPhoto" href="https://www.youtube.com/watch?v=0O2aH4XLbto">Open YouTube video</a></li>
  <li><a class="btn btn-default" data-rel="prettyPhoto" href="https://vimeo.com/45830194">Open Vimeo video</a></li>
</ul>



$(document).ready(function() {
  $("a[data-rel^='prettyPhoto']").prettyPhoto({
      hook: 'data-rel',
      animation_speed:'normal',
      theme:'light_square',
      slideshow:3000, 
      autoplay_slideshow: false,
      social_tools: false
  });
});

3. Nivo Lightbox

Single Image

Black technician servicing hardware in a data centre Black technician servicing hardware in a data centre Black technician repairing computer hardware 

<a data-lightbox-gallery="" href="../tfast-assets/uganda/technician-server-280x190.webp width="240" src="../tfast-assets/uganda/devices-uganda-280x190.webp alt=""></a>
<a data-lightbox-gallery="" href="../tfast-assets/uganda/technician-280x190.webp width="240" src="../tfast-assets/uganda/technician-280x190.webp alt=""></a>
<a data-lightbox-gallery="" href="../tfast-assets/uganda/devices-uganda-280x190.webp width="240" src="../tfast-assets/uganda/technician-280x190.webp alt=""></a> 



$(document).ready(function() {
  $('a[data-lightbox-gallery]').nivoLightbox({
      effect: 'fadeScale'
  });
});

Image Gallery Nivo Lightbox

Black technician servicing hardware in a data centre Black technician servicing hardware in a data centre Black technician servicing hardware in a data centre 

<a data-lightbox-gallery="gallery1" href="../tfast-assets/uganda/devices-uganda-280x190.webp width="240" src="../tfast-assets/uganda/technician-server-280x190.webp alt=""></a>
<a data-lightbox-gallery="gallery1" href="../tfast-assets/uganda/technician-280x190.webp width="240" src="../tfast-assets/uganda/technician-repair-280x190.webp alt=""></a>
<a data-lightbox-gallery="gallery1" href="../tfast-assets/uganda/technician-repair-280x190.webp width="240" src="../tfast-assets/uganda/technician-server-280x190.webp alt=""></a> 



$(document).ready(function() {
  $('a[data-lightbox-gallery]').nivoLightbox({
      effect: 'fadeScale'
  });
});

More Example Nivo Lightbox


<ul class="list-inline">
  <li><a class="btn btn-default" data-lightbox-gallery="" href="https://www.youtube.com/watch?v=0O2aH4XLbto">Open YouTube video</a></li>
  <li><a class="btn btn-default" data-lightbox-gallery="" href="https://vimeo.com/45830194">Open Vimeo video</a></li>
  <li><a class="btn btn-default" data-lightbox-gallery="" href="https://www.google.com.bd/">View Website</a></li>
</ul>



$(document).ready(function() {
  $('a[data-lightbox-gallery]').nivoLightbox({
      effect: 'fadeScale'
  });
});

Play with settings


$(document).ready(function() {
 $('a[data-lightbox-gallery]').nivoLightbox({
    effect: 'fade',                             // The effect to use when showing the lightbox
    theme: 'default',                             // The lightbox theme to use
    keyboardNav: true,                             // Enable/Disable keyboard navigation (left/right/escape)
    clickOverlayToClose: true,                    // If false clicking the "close" button will be the only way to close the lightbox
    onInit: function(){},                         // Callback when lightbox has loaded
    beforeShowLightbox: function(){},             // Callback before the lightbox is shown
    afterShowLightbox: function(lightbox){},     // Callback after the lightbox is shown
    beforeHideLightbox: function(){},             // Callback before the lightbox is hidden
    afterHideLightbox: function(){},             // Callback after the lightbox is hidden
    onPrev: function(element){},                 // Callback when the lightbox gallery goes to previous item
    onNext: function(element){},                 // Callback when the lightbox gallery goes to next item
    errorMessage: 'The requested content cannot be loaded. Please try again later.' // Error message when content can't be loaded
  });
});
  • fade
  • fadeScale
  • slideLeft
  • slideRight
  • slideUp
  • slideDown
  • fall