Magnific Popup Lightbox
Single Image
<a class="image-popup-vertical-fit" title="Title Here 1" href="https://placehold.it/650x380"><img src="https://placehold.it/240x180" alt=""></a>
<a class="image-popup-fit-width" title="Title Here 1" href="https://placehold.it/650x380"><img src="https://placehold.it/240x180" alt=""></a>
<a class="image-popup-no-margins" title="Title Here 1" href="https://placehold.it/650x380"><img src="https://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="https://placehold.it/650x380" title="Title Here 1"><img src="https://placehold.it/240x180" alt=""></a>
<a href="https://placehold.it/720x480" title="Title Here 2"><img src="https://placehold.it/240x180" alt=""></a>
<a href="https://placehold.it/450x580" title="Title Here 3"><img src="https://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="https://placehold.it/650x380" title="Title Here 1"><img src="https://placehold.it/240x180" alt=""></a>
<a href="https://placehold.it/340x450" title="Title Here 2"><img src="https://placehold.it/240x180" alt=""></a>
<a href="https://placehold.it/870x870" title="Title Here 3"><img src="https://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
<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=221B+Baker+Street,+London,+United+Kingdom&hl=en&t=v&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
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
<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
<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="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>
$(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="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>
$(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
<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>
$(document).ready(function() {
$('a[data-lightbox-gallery]').nivoLightbox({
effect: 'fadeScale'
});
});
Image Gallery Nivo Lightbox
<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>
$(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