1.2.20 |
0
nhận xét
|
lượt xem
Phiên bản lightbox dành cho hình ảnh mà mình giới thiệu cho các bạn ở bài viết này có rất tính năng thú vị như tự động thay đổi kích thước lightbox cho phù hợp với kích thước của trình duyệt, hoạt động tốt trên smart phone (thay đổi ảnh bằng cách vuốt tay qua lại)
Giới Thiệu
- Đáp ứng mọi kích thước màn hình và hoạt động trên các thiết bị có khả năng cảm ứng.
- Hoạt động tốt trên các hệ điều hành iOS, Android và Windows Phone cũng như trên các thiết bị máy tính để bàn của Safari, Chrome, Firefox, Opera và Internet Explorer.
- Tải trước hình ảnh tiếp theo. Trong khi người dùng đang xem hình ảnh hiện tại, các plugin âm thầm tải trước hình ảnh do đó sẽ không phải đợi ảnh load lâu
- Tương tác với bàn phím tốt, có thể sử dụng mũi tên trái, phải để chuyển đổi hình ảnh và Esc để thoát khỏi lightbox.
Hướng Dẫn
CSS#imagelightbox{position: fixed;z-index: 9999;-ms-touch-action: none;touch-action: none;}
/* IMAGE LIGHTBOX SELECTOR */
#imagelightbox{cursor:pointer;position:fixed;z-index:10000;-ms-touch-action:none;touch-action:none;-webkit-box-shadow:0 0 3.125em rgba( 0,0,0,.75 );/* 50 */box-shadow:0 0 3.125em rgba( 0,0,0,.75 );/* 50 */}
/* ACTIVITY INDICATION */
#imagelightbox-loading,#imagelightbox-loading div{border-radius:50%}
#imagelightbox-loading{width:2.5em;/* 40 */height:2.5em;/* 40 */background-color:#444;background-color:rgba( 0,0,0,.5 );position:fixed;z-index:10003;top:50%;left:50%;padding:0.625em;/* 10 */margin:-1.25em 0 0 -1.25em;/* 20 */-webkit-box-shadow:0 0 2.5em rgba( 0,0,0,.75 );/* 40 */box-shadow:0 0 2.5em rgba( 0,0,0,.75 );/* 40 */}
#imagelightbox-loading div{width:1.25em;/* 20 */height:1.25em;/* 20 */background-color:#fff;-webkit-animation:imagelightbox-loading .5s ease infinite;animation:imagelightbox-loading .5s ease infinite}
@-webkit-keyframes imagelightbox-loading{from{opacity:.5;-webkit-transform:scale( .75 )}
50%{opacity:1;-webkit-transform:scale( 1 )}
to{opacity:.5;-webkit-transform:scale( .75 )}
}
@keyframes imagelightbox-loading{from{opacity:.5;transform:scale( .75 )}
50%{opacity:1;transform:scale( 1 )}
to{opacity:.5;transform:scale( .75 )}
}
/* OVERLAY */
#imagelightbox-overlay{background-color:#fff;background-color:rgba( 255,255,255,.9 );position:fixed;z-index:9998;top:0;right:0;bottom:0;left:0}
/* "CLOSE" BUTTON */
#imagelightbox-close{width:2.5em;/* 40 */height:2.5em;/* 40 */text-align:left;background-color:#666;border-radius:50%;position:fixed;z-index:10002;top:2.5em;/* 40 */right:2.5em;/* 40 */-webkit-transition:color .3s ease;transition:color .3s ease}
#imagelightbox-close:hover,#imagelightbox-close:focus{background-color:#111}
#imagelightbox-close:before,#imagelightbox-close:after{width:2px;background-color:#fff;content:'';position:absolute;top:20%;bottom:20%;left:50%;margin-left:-1px}
#imagelightbox-close:before{-webkit-transform:rotate( 45deg );-ms-transform:rotate( 45deg );transform:rotate( 45deg )}
#imagelightbox-close:after{-webkit-transform:rotate( -45deg );-ms-transform:rotate( -45deg );transform:rotate( -45deg )}
/* CAPTION */
#imagelightbox-caption{text-align:center;color:#fff;background-color:#666;position:fixed;z-index:10001;left:0;right:0;bottom:0;padding:0.625em;/* 10 */}
/* NAVIGATION */
#imagelightbox-nav{background-color:#444;background-color:rgba( 0,0,0,.5 );border-radius:20px;position:fixed;z-index:10001;left:50%;bottom:3.75em;/* 60 */padding:0.313em;/* 5 */-webkit-transform:translateX( -50% );-ms-transform:translateX( -50% );transform:translateX( -50% )}
#imagelightbox-nav button{width:1em;/* 20 */height:1em;/* 20 */background-color:transparent;border:1px solid #fff;border-radius:50%;display:inline-block;margin:0 0.313em;/* 5 */}
#imagelightbox-nav button.active{background-color:#fff}
/* ARROWS */
.imagelightbox-arrow{width:3.75em;/* 60 */height:7.5em;/* 120 */background-color:#444;background-color:rgba( 0,0,0,.5 );vertical-align:middle;display:none;position:fixed;z-index:10001;top:50%;margin-top:-3.75em;/* 60 */}
.imagelightbox-arrow:hover,.imagelightbox-arrow:focus{background-color:#666;background-color:rgba( 0,0,0,.75 )}
.imagelightbox-arrow:active{background-color:#111}
.imagelightbox-arrow-left{left:2.5em;/* 40 */}
.imagelightbox-arrow-right{right:2.5em;/* 40 */}
.imagelightbox-arrow:before{width:0;height:0;border:1em solid transparent;content:'';display:inline-block;margin-bottom:-0.125em;/* 2 */}
.imagelightbox-arrow-left:before{border-left:none;border-right-color:#fff;margin-left:-0.313em;/* 5 */}
.imagelightbox-arrow-right:before{border-right:none;border-left-color:#fff;margin-right:-0.313em;/* 5 */}
#imagelightbox-loading,#imagelightbox-overlay,#imagelightbox-close,#imagelightbox-caption,#imagelightbox-nav,.imagelightbox-arrow{-webkit-animation:fade-in .25s linear;animation:fade-in .25s linear}
@-webkit-keyframes fade-in{from{opacity:0}
to{opacity:1}
}
@keyframes fade-in{from{opacity:0}
to{opacity:1}
}
@media only screen and (max-width:41.250em) /* 660 */{#container{width:100%}
#imagelightbox-close{top:1.25em;/* 20 */right:1.25em;/* 20 */}
#imagelightbox-nav{bottom:1.25em;/* 20 */}
.imagelightbox-arrow{width:2.5em;/* 40 */height:3.75em;/* 60 */margin-top:-2.75em;/* 30 */}
.imagelightbox-arrow-left{left:1.25em;/* 20 */}
.imagelightbox-arrow-right{right:1.25em;/* 20 */}
}
@media only screen and (max-width:20em) /* 320 */{.imagelightbox-arrow-left{left:0}
.imagelightbox-arrow-right{right:0}
}
Javascript
<script src="https://firebasestorage.googleapis.com/v0/b/huydc-090288.appspot.com/o/Responsive%20Image%20Lightbox%2Fimagelightbox.min%5B1%5D.js?alt=media&token=cd775a7f-771d-47a1-8a5e-98fa68977488"></script>
<script>
$( function()
{
var
// ACTIVITY INDICATOR
activityIndicatorOn = function()
{
$( '<div id="imagelightbox-loading"><div></div></div>' ).appendTo( 'body' );
},
activityIndicatorOff = function()
{
$( '#imagelightbox-loading' ).remove();
},
// OVERLAY
overlayOn = function()
{
$( '<div id="imagelightbox-overlay"></div>' ).appendTo( 'body' );
},
overlayOff = function()
{
$( '#imagelightbox-overlay' ).remove();
},
// CLOSE BUTTON
closeButtonOn = function( instance )
{
$( '<button type="button" id="imagelightbox-close" title="Close"></button>' ).appendTo( 'body' ).on( 'click touchend', function(){ $( this ).remove(); instance.quitImageLightbox(); return false; });
},
closeButtonOff = function()
{
$( '#imagelightbox-close' ).remove();
},
// CAPTION
captionOn = function()
{
var description = $( 'a[href="' + $( '#imagelightbox' ).attr( 'src' ) + '"] img' ).attr( 'alt' );
if( description.length > 0 )
$( '<div id="imagelightbox-caption">' + description + '</div>' ).appendTo( 'body' );
},
captionOff = function()
{
$( '#imagelightbox-caption' ).remove();
},
// NAVIGATION
navigationOn = function( instance, selector )
{
var images = $( selector );
if( images.length )
{
var nav = $( '<div id="imagelightbox-nav"></div>' );
for( var i = 0; i < images.length; i++ )
nav.append( '<button type="button"></button>' );
nav.appendTo( 'body' );
nav.on( 'click touchend', function(){ return false; });
var navItems = nav.find( 'button' );
navItems.on( 'click touchend', function()
{
var $this = $( this );
if( images.eq( $this.index() ).attr( 'href' ) != $( '#imagelightbox' ).attr( 'src' ) )
instance.switchImageLightbox( $this.index() );
navItems.removeClass( 'active' );
navItems.eq( $this.index() ).addClass( 'active' );
return false;
})
.on( 'touchend', function(){ return false; });
}
},
navigationUpdate = function( selector )
{
var items = $( '#imagelightbox-nav button' );
items.removeClass( 'active' );
items.eq( $( selector ).filter( '[href="' + $( '#imagelightbox' ).attr( 'src' ) + '"]' ).index( selector ) ).addClass( 'active' );
},
navigationOff = function()
{
$( '#imagelightbox-nav' ).remove();
},
// ARROWS
arrowsOn = function( instance, selector )
{
var $arrows = $( '<button type="button" class="imagelightbox-arrow imagelightbox-arrow-left"></button><button type="button" class="imagelightbox-arrow imagelightbox-arrow-right"></button>' );
$arrows.appendTo( 'body' );
$arrows.on( 'click touchend', function( e )
{
e.preventDefault();
var $this = $( this ),
$target = $( selector + '[href="' + $( '#imagelightbox' ).attr( 'src' ) + '"]' ),
index = $target.index( selector );
if( $this.hasClass( 'imagelightbox-arrow-left' ) )
{
index = index - 1;
if( !$( selector ).eq( index ).length )
index = $( selector ).length;
}
else
{
index = index + 1;
if( !$( selector ).eq( index ).length )
index = 0;
}
instance.switchImageLightbox( index );
return false;
});
},
arrowsOff = function()
{
$( '.imagelightbox-arrow' ).remove();
};
// WITH ACTIVITY INDICATION
$( 'a[data-imagelightbox="a"]' ).imageLightbox(
{
onLoadStart: function() { activityIndicatorOn(); },
onLoadEnd: function() { activityIndicatorOff(); },
onEnd: function() { activityIndicatorOff(); }
});
// WITH OVERLAY & ACTIVITY INDICATION
$( 'a[data-imagelightbox="b"]' ).imageLightbox(
{
onStart: function() { overlayOn(); },
onEnd: function() { overlayOff(); activityIndicatorOff(); },
onLoadStart: function() { activityIndicatorOn(); },
onLoadEnd: function() { activityIndicatorOff(); }
});
// WITH "CLOSE" BUTTON & ACTIVITY INDICATION
var instanceC = $( 'a[data-imagelightbox="c"]' ).imageLightbox(
{
quitOnDocClick: false,
onStart: function() { closeButtonOn( instanceC ); },
onEnd: function() { closeButtonOff(); activityIndicatorOff(); },
onLoadStart: function() { activityIndicatorOn(); },
onLoadEnd: function() { activityIndicatorOff(); }
});
// WITH CAPTION & ACTIVITY INDICATION
$( 'a[data-imagelightbox="d"]' ).imageLightbox(
{
onLoadStart: function() { captionOff(); activityIndicatorOn(); },
onLoadEnd: function() { captionOn(); activityIndicatorOff(); },
onEnd: function() { captionOff(); activityIndicatorOff(); }
});
// WITH ARROWS & ACTIVITY INDICATION
var selectorG = 'a[data-imagelightbox="g"]';
var instanceG = $( selectorG ).imageLightbox(
{
onStart: function(){ arrowsOn( instanceG, selectorG ); },
onEnd: function(){ arrowsOff(); activityIndicatorOff(); },
onLoadStart: function(){ activityIndicatorOn(); },
onLoadEnd: function(){ $( '.imagelightbox-arrow' ).css( 'display', 'block' ); activityIndicatorOff(); }
});
// WITH NAVIGATION & ACTIVITY INDICATION
var selectorE = 'a[data-imagelightbox="e"]';
var instanceE = $( selectorE ).imageLightbox(
{
onStart: function() { navigationOn( instanceE, selectorE ); },
onEnd: function() { navigationOff(); activityIndicatorOff(); },
onLoadStart: function() { activityIndicatorOn(); },
onLoadEnd: function() { navigationUpdate( selectorE ); activityIndicatorOff(); }
});
// ALL COMBINED
var selectorF = 'a[data-imagelightbox="f"]';
var instanceF = $( selectorF ).imageLightbox(
{
onStart: function() { overlayOn(); closeButtonOn( instanceF ); arrowsOn( instanceF, selectorF ); },
onEnd: function() { overlayOff(); captionOff(); closeButtonOff(); arrowsOff(); activityIndicatorOff(); },
onLoadStart: function() { captionOff(); activityIndicatorOn(); },
onLoadEnd: function() { captionOn(); activityIndicatorOff(); $( '.imagelightbox-arrow' ).css( 'display', 'block' ); }
});
// DYNAMICALLY ADDED ITEMS
var instanceH = $( 'a[data-imagelightbox="h"]' ).imageLightbox(
{
quitOnDocClick: false,
onStart: function() { closeButtonOn( instanceH ); },
onEnd: function() { closeButtonOff(); activityIndicatorOff(); },
onLoadStart: function() { activityIndicatorOn(); },
onLoadEnd: function() { activityIndicatorOff(); }
});
$( '.js--add-dynamic ' ).on( 'click', function( e )
{
e.preventDefault();
var items = $( '.js--dynamic-items' );
instanceH.addToImageLightbox( items.find( 'a' ) );
$( '.js--dynamic-place' ).append( items.find( 'li' ).detach() );
$( this ).remove();
items.remove();
});
});
</script>
HTML
Để lightbox hoạt động theo các demo bên dưới bạn phải post ảnh theo cấu trúc và thay phần đánh dấu đỏ bằng các chữ cái tương ứng với kiểu đó, ví dụ code dưới đây là kiểu lightbox a là kiểu thông thường
<a href="link ảnh gốc" data-imagelightbox="a"><img alt="IMG1" src="link ảnh thumbnail"></a>
Demo
a.Kiểu thông thường.jpg)
b.Lightbox với lớp phủ mờ
c.Lightbox với nút đóng
d.Lightbox với chú thích(Chú thích lấy theo thẻ Alt)
g.Lightbox với mũi tên điều hướng
e.Lightbox với nút chọn ảnh
f.Kiểu tổng hợp
Nguồn: osvaldas.info/
Chèn hình ảnh: Chỉ cần dán link hình ảnh - Upload ảnh
Chèn code: [pre]Code đã mã hóa [/pre]
Chèn emoji: Nhấn tổ hợp phím “Windows + . (dấu chấm)”
Chèn link: Click để chèn link