04/10/2018, 20:17

Code tạo hiệu ứng Responsive Lightbox cho trang Portfolio

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

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.

Code tạo hiệu ứng Responsive Lightbox cho trang Portfolio

Xem Demo | 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>
   
 
  <li><a href="img/item02@2x.jpg" title="Simple iPad Icons"><img src="img/item02.jpg" alt="old-style ipad icons"></a></li>
   
 
  <li><a href="img/item03@2x.jpg" title="Mobile Profile"><img src="img/item03.jpg" alt="mobile iphone app profile ui"></a></li>
   
 
  <li><a href="img/item04@2x.jpg" title="New Shoes"><img src="img/item04.jpg" alt="new balance shoes"></a></li>
   
 
  <li><a href="img/item05@2x.jpg" title="Rive Radio Icon"><img src="img/item05.jpg" alt="rive radio icon"></a></li>
   
 
  <li><a href="img/item06@2x.jpg" title="Blood Pressure app"><img src="img/item06.jpg" alt="blood pressure app ui"></a></li>
   
 
  <li><a href="img/item07@2x.jpg" title="Memories Feed UI"><img src="img/item07.jpg" alt="memories feed ui iphone"></a></li>
   
 
  <li><a href="img/item08@2x.jpg" title="Vector Devices"><img src="img/item08.jpg" alt="apple device vector icons"></a></li>
   
</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-awidth: 1100px;
  margin: 0 auto;
}

#portfolio {
  display: block;
}

#portfolio li {
  display: block;
  float: left;
  awidth: 30%;
  max-awidth: 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-awidth: 780px) {
  #portfolio li {
    awidth: 45%;
  }
}
 
@media screen and (max-awidth: 550px) {
  #portfolio { 
    text-align: center;
  }
 
  #portfolio li {
    float: none;
    display: inline-block;
    awidth: 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
		}
  });
});

Chúc các bạn thành công !

Tags: jQuery Plugins lightbox porfolio Responsive

Chuyên Mục: Javascript

Bài viết được đăng bởi webmaster

Bài liên quan

Tạo hiệu ứng page loading cho trang web

Dưới đây là hướng dẫn các bạn dùng 1 javascript để hiện thong báo nạp trang. Thông báo này rất hữu ích trong trường hợp trang web của bạn khá lớn hoặc tốc độ mạng khá chậm, tao cảm giác dễ chịu và lầm tưởng web bạn load bình thường. Bước 1: Download file này về máy Page Loading. Bước 2:Mở ...

Trịnh Tiến Mạnh viết 10:58 ngày 05/10/2018

Code tạo hiệu ứng Responsive Lightbox cho trang Portfolio

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

Tạ Quốc Bảo viết 20:17 ngày 04/10/2018

Tạo hiệu ứng kính lúp cho ảnh với jQuery và CSS3

Thỉnh thoảng, khi chúng ta ghé vào các trang web bán hàng, khi vào trang chi tiết sản phẩm, các bạn thường bắt gặp nhiều trang cho chúng ta xem rõ từng chi tiết hình ảnh sản phẩm thông qua một kính lúp. Hiệu ứng này rất hữu dụng khi mà khách hàng cần phải xem rõ sản phẩm mà họ muốn mua, và cũng ...

Bùi Văn Nam viết 20:14 ngày 04/10/2018

Thủ thuật javacript : Tạo hiệu ứng page loading cho trang web

Dưới đây là hướng dẫn các bạn dùng 1 javascript để hiện thông báo nạp trang. Thông báo này rất hữu ích trong trường hợp trang web của bạn khá lớn hoặc tốc độ mạng khá chậm, tao cảm giác dễ chịu và lầm tưởng web bạn load bình thường. Bước 1: Download file này về máy Page Loading. ...

Hoàng Hải Đăng viết 20:14 ngày 04/10/2018

Tạo hiệu ứng cuốn góc (Peel Away) cho trang WordPress

Nếu bạn đang tự hỏi không biết làm thế nào mà các webmaster hay các blogger của một số trang web lại có thể làm hiệu ứng cuộn góc ngay tại góc trên phải màn hình website của họ . Thì bài viết này sẽ giúp bạn giải đáp những thắc mắc đó,thường thì hiệu ứng này dùng để thu hút ánh mắt người dùng vào ...

Tạ Quốc Bảo viết 18:37 ngày 04/10/2018
0