Có rất nhiều plugins mã nguồn mở giúp các bạn tạo những trang porfolios, các bạn có thể xây dựng chức năng pop up galleries, model window… nhưng có khả năng responsive thì không phải plugin nào cũng có.Chính vì thế mà trong bài viết này, mình sẽ chia sẻ cho các bạn một plugin cực kỳ hữu ích cho việc xây dựng trang porfolio và có khả năng responsive cao.
Download
Trong bài viết này, chúng ta sẽ sử dụng plugin Magnific Popup , plugin này có 2 file, một file với đuôi .css và một file .js, các bạn có thể tải 2 file này tại mục download.
HTML
Đầu tiên, là chèn thư viện jQuery cũng như những plugin cần thiết bên trong thẻ <head> như sau :
<!doctype html>
<html lang="en-US">
<head>
<meta charset="utf-8">
<meta http-equiv="Content-Type" content="text/html">
<title>Code tạo hiệu ứng Responsive Lightbox cho trang Portfolio</title>
<link rel="stylesheet" type="text/css" media="all" href="css/styles.css">
<link rel="stylesheet" type="text/css" media="all" href="css/magnific-popup.css">
<script type="text/javascript" src="js/jquery-1.11.1.min.js"></script>
<script type="text/javascript" src="js/jquery.magnific-popup.min.js"></script>
</head>
Sau đó là các bạn chèn khung chuẩn html cho hình ảnh.
<ul id="portfolio" class="clearfix">
<li><a href="img/item01@2x.jpg" title="Brick and Bay Windows"><img src="img/item01.jpg" alt="brick and by windows"></a></li>
<!-- https://dribbble.com/shots/1543255-Brick-and-Bay-Windows -->
<li><a href="img/item02@2x.jpg" title="Simple iPad Icons"><img src="img/item02.jpg" alt="old-style ipad icons"></a></li>
<!-- https://dribbble.com/shots/1543899-iPad-icons -->
<li><a href="img/item03@2x.jpg" title="Mobile Profile"><img src="img/item03.jpg" alt="mobile iphone app profile ui"></a></li>
<!-- https://dribbble.com/shots/1543085-Profile -->
<li><a href="img/item04@2x.jpg" title="New Shoes"><img src="img/item04.jpg" alt="new balance shoes"></a></li>
<!-- https://dribbble.com/shots/1543210-574 -->
<li><a href="img/item05@2x.jpg" title="Rive Radio Icon"><img src="img/item05.jpg" alt="rive radio icon"></a></li>
<!-- https://dribbble.com/shots/1543610-Rive-Radio-app-icon-design -->
<li><a href="img/item06@2x.jpg" title="Blood Pressure app"><img src="img/item06.jpg" alt="blood pressure app ui"></a></li>
<!-- https://dribbble.com/shots/1543316-Blood-Pressure-App -->
<li><a href="img/item07@2x.jpg" title="Memories Feed UI"><img src="img/item07.jpg" alt="memories feed ui iphone"></a></li>
<!-- https://dribbble.com/shots/1544255-Memories-Feed -->
<li><a href="img/item08@2x.jpg" title="Vector Devices"><img src="img/item08.jpg" alt="apple device vector icons"></a></li>
<!-- https://dribbble.com/shots/1544323-bc-pixels-fluid -->
</ul>
CSS
Trước hết là chúng ta sẽ định dạng cơ bản cho hiệu ứng.
/** page structure **/
#wrapper {
display: block;
max-width: 1100px;
margin: 0 auto;
}
#portfolio {
display: block;
}
#portfolio li {
display: block;
float: left;
width: 30%;
max-width: 400px;
margin-right: 20px;
margin-bottom: 20px;
}
#portfolio li a {
display: block;
padding: 8px;
background: #fff;
-webkit-border-radius: 2px;
-moz-border-radius: 2px;
border-radius: 2px;
-webkit-box-shadow: 1px 2px 2px rgba(0,0,0,0.25);
-moz-box-shadow: 1px 2px 2px rgba(0,0,0,0.25);
box-shadow: 1px 2px 2px rgba(0,0,0,0.25);
}
.mfp-title {
font-size: 1.2em;
color: #ddd !important;
font-weight: 700;
}
/** clearfix **/
.clearfix:after { content: "."; display: block; clear: both; visibility: hidden; line-height: 0; height: 0; }
.clearfix { display: inline-block; }
html[xmlns] .clearfix { display: block; }
* html .clearfix { height: 1%; }
Sau đó là tạo chức năng Responsive cho hiệu ứng, đây chính là phần quan trọng nhất của bài viết.
/** media queries **/
@media screen and (max-width: 780px) {
#portfolio li {
width: 45%;
}
}
@media screen and (max-width: 550px) {
#portfolio {
text-align: center;
}
#portfolio li {
float: none;
display: inline-block;
width: 80%;
margin-bottom: 30px;
}
}
jQuery
Trong phần này, điều mà chúng ta cần làm chỉ là việc chèn đoạn khai báo plugin như sau :
$(function(){
$('#portfolio').magnificPopup({
delegate: 'a',
type: 'image',
image: {
cursor: null,
titleSrc: 'title'
},
gallery: {
enabled: true,
preload: [0,1], // Will preload 0 - before current, and 1 after the current image
navigateByImgClick: true
}
});
});