##### Loading...

Disable Preloader

## Modal - Lightbox

### Magnific Popup Lightbox

#### Single Image

    <a class="image-popup-vertical-fit" title="Title Here 1" href="http://placehold.it/650x380"><img src="http://placehold.it/240x180" alt=""></a>
    <a class="image-popup-fit-width" title="Title Here 1" href="http://placehold.it/650x380"><img src="http://placehold.it/240x180" alt=""></a>
    <a class="image-popup-no-margins" title="Title Here 1" href="http://placehold.it/650x380"><img src="http://placehold.it/240x180" 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

    <div class="popup-gallery">
      <a href="http://placehold.it/650x380" title="Title Here 1"><img src="http://placehold.it/240x180" alt=""></a>
      <a href="http://placehold.it/720x480" title="Title Here 2"><img src="http://placehold.it/240x180" alt=""></a>
      <a href="http://placehold.it/450x580" title="Title Here 3"><img src="http://placehold.it/240x180" 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

    <div class="zoom-gallery">
      <a href="http://placehold.it/650x380" title="Title Here 1"><img src="http://placehold.it/240x180" alt=""></a>
      <a href="http://placehold.it/340x450" title="Title Here 2"><img src="http://placehold.it/240x180" alt=""></a>
      <a href="http://placehold.it/870x870" title="Title Here 3"><img src="http://placehold.it/240x180" 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

- Open YouTube video
- Open Vimeo video
- Open Google Map

    <ul class="list-inline">
      <li><a class="btn btn-default popup-youtube" href="http://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=221B+Baker+Street,+London,+United+Kingdom&amp;hl=en&amp;t=v&amp;hnear=221B+Baker+St,+London+NW1+6XE,+United+Kingdom">Open 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

# Dialog example

This is dummy copy. It is not meant to be read. It has been placed here solely to demonstrate the look and feel of finished, typeset text. Only for show. He who searches for meaning here will be sorely disappointed.

    <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

### Newsletter Subscribe

##### Subscribe to Connect with us

    <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

    <a data-rel="prettyPhoto" href="http://placehold.it/450x450"><img width="240" src="http://placehold.it/450x450" alt=""></a>
    <a data-rel="prettyPhoto" href="http://placehold.it/450x450"><img width="240" src="http://placehold.it/450x450" alt=""></a>
    <a data-rel="prettyPhoto" href="http://placehold.it/450x450"><img width="240" src="http://placehold.it/450x450" 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

    <a data-rel="prettyPhoto[gallery1]" href="http://placehold.it/450x450"><img width="240" src="http://placehold.it/450x450" alt=""></a>
    <a data-rel="prettyPhoto[gallery1]" href="http://placehold.it/450x450"><img width="240" src="http://placehold.it/450x450" alt=""></a>
    <a data-rel="prettyPhoto[gallery1]" href="http://placehold.it/450x450"><img width="240" src="http://placehold.it/450x450" 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

- Open YouTube video
- Open Vimeo video

    <ul class="list-inline">
      <li><a class="btn btn-default" data-rel="prettyPhoto" href="http://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

    <a data-lightbox-gallery="" href="http://placehold.it/450x450"><img width="240" src="http://placehold.it/450x450" alt=""></a>
    <a data-lightbox-gallery="" href="http://placehold.it/450x450"><img width="240" src="http://placehold.it/450x450" alt=""></a>
    <a data-lightbox-gallery="" href="http://placehold.it/450x450"><img width="240" src="http://placehold.it/450x450" alt=""></a>

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

#### Image Gallery Nivo Lightbox

    <a data-lightbox-gallery="gallery1" href="http://placehold.it/450x450"><img width="240" src="http://placehold.it/450x450" alt=""></a>
    <a data-lightbox-gallery="gallery1" href="http://placehold.it/450x450"><img width="240" src="http://placehold.it/450x450" alt=""></a>
    <a data-lightbox-gallery="gallery1" href="http://placehold.it/450x450"><img width="240" src="http://placehold.it/450x450" alt=""></a>

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

#### More Example Nivo Lightbox

- Open YouTube video
- Open Vimeo video
- View Website

    <ul class="list-inline">
      <li><a class="btn btn-default" data-lightbox-gallery="" href="http://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