Our motive is to help the poor, helpless and orphan children all over the world.

Latest News

Contact Info

Modal - Lightbox

Magnific Popup Lightbox

Single Image

images images images 

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



(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
    }
  });
})(jQuery);

Image Gallery

images images images 

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



(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';
      }
    }
  });
})(jQuery);

Zoom Gallery

images images images 

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



(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');
      }
    }

  });
})(jQuery);

More Lightbox Examples 


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



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

    fixedContentPos: false
  });
})(jQuery);

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>



(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'
  });
})(jQuery);

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>



(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';
        }
      }
    }
  });
})(jQuery);

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

images images images 

<a data-rel="prettyPhoto" href="images/gallery/1.jpg"><img width="240" src="images/gallery/1.jpg" alt=""></a>
<a data-rel="prettyPhoto" href="images/gallery/2.jpg"><img width="240" src="images/gallery/2.jpg" alt=""></a>
<a data-rel="prettyPhoto" href="images/gallery/3.jpg"><img width="240" src="images/gallery/3.jpg" alt=""></a>



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

Image Gallery

images images images 

<a data-rel="prettyPhoto[gallery1]" href="images/gallery/1.jpg"><img width="240" src="images/gallery/1.jpg" alt=""></a>
<a data-rel="prettyPhoto[gallery1]" href="images/gallery/2.jpg"><img width="240" src="images/gallery/2.jpg" alt=""></a>
<a data-rel="prettyPhoto[gallery1]" href="images/gallery/3.jpg"><img width="240" src="images/gallery/3.jpg" alt=""></a>



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

More Example Prettyphoto Lightbox 


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



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

3. Nivo Lightbox

Single Image

images images images 

<a data-lightbox-gallery="" href="images/gallery/1.jpg"><img width="240" src="images/gallery/1.jpg" alt=""></a>
<a data-lightbox-gallery="" href="images/gallery/2.jpg"><img width="240" src="images/gallery/2.jpg" alt=""></a>
<a data-lightbox-gallery="" href="images/gallery/3.jpg"><img width="240" src="images/gallery/3.jpg" alt=""></a>



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

Image Gallery Nivo Lightbox

images images images 

<a data-lightbox-gallery="gallery1" href="images/gallery/1.jpg"><img width="240" src="images/gallery/1.jpg" alt=""></a>
<a data-lightbox-gallery="gallery1" href="images/gallery/2.jpg"><img width="240" src="images/gallery/2.jpg" alt=""></a>
<a data-lightbox-gallery="gallery1" href="images/gallery/3.jpg"><img width="240" src="images/gallery/3.jpg" alt=""></a>



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

More Example Nivo Lightbox 


<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="http://www.google.cn.bd/">View Website</a></li>
</ul>



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

Play with settings 


(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
  });
})(jQuery);
  • fade
  • fadeScale
  • slideLeft
  • slideRight
  • slideUp
  • slideDown
  • fall