Bài viết hướng dẫn bạn làm cách nào để có thể tạo ra một lightbox một cách đơn giản nhất. Kết quả của bài viết thích hợp cho bạn nào dùng để tạo ra galleries, porfolio và hơn thế nữa.
Bước 1: HTML
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 |
<!DOCTYPE html> <html> <head> <title>Simple Lightbox</title> </head> <body> <div id="wrapper"> <h1>Super Simple Lightbox</h1> <p>Our super simple lightbox demo. Here are the image links: <ul> <li> <a href="https://farm7.static.flickr.com/6130/5935338876_47b61c93a5.jpg" class="lightbox_trigger"> Picture 1 </a> </li> <li> <a href="https://farm7.static.flickr.com/6020/5924329054_4bdc419c3a_o.jpg" class="lightbox_trigger"> Picture 2 </a> </li> <li> <a href="https://farm7.static.flickr.com/6020/5931933181_ddb737e528.jpg" class="lightbox_trigger"> Picture 3 </a> </li> </ul> </p> </div> <!-- #/wrapper --> </body> </html> |
Sau khi thực hiện tạo mã HTML đơn giản phía trên, chúng ta được như sau
Và bạn chỉ cần chú ý rằng, với mọi link trong bài đều có gán class lightbox_trigger để phục vụ viết script sau này.
Bước 2: CSS
Bước này bạn có thể đặt đoạn CSS dưới đây trong thẻ head cũng được
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 |
body { margin:0; padding:0; background:#efefef; text-align:center; /* used to center div in IE */ } #wrapper { width:600px; margin:0 auto; /*centers the div horizontally in all browsers (except IE)*/ background:#fff; text-align:left; /*resets text alignment from body tag */ border:1px solid #ccc; border-top:none; padding:25px; /*Let's add some CSS3 styles, these will degrade gracefully in older browser and IE*/ border-radius:0 0 5px 5px; -moz-border-radius:0 0 5px 5px; -webkit-border-radius: 0 0 5px 5px; box-shadow:0 0 5px #ccc; -moz-box-shadow:0 0 5px #ccc; -webkit-box-shadow:0 0 5px #ccc; } |
Sau khi css ta được
Bước 3: LightBox HTML
Chúng ta không thể insert trực tiếp đoạn lightbox này vào mã HTML bên trên được, do đó chúng ta sẽ insert nó tự động bằng Jquery.
|
1 2 3 4 5 6 |
<div id="lightbox"> <p>Click to close</p> <div id="content"> <img src="#" /> </div> </div> |
Ở đây thẻ img có thuộc tính src không có giá trị bởi vì nó sẽ được tạo phụ thuộc vào việc click của người dùng.
Bước 4: CSS cho lightBox
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 |
#lightbox { position:fixed; /* keeps the lightbox window in the current viewport */ top:0; left:0; width:100%; height:100%; background:url(overlay.png) repeat; text-align:center; } #lightbox p { text-align:right; color:#fff; margin-right:20px; font-size:12px; } #lightbox img { box-shadow:0 0 25px #111; -webkit-box-shadow:0 0 25px #111; -moz-box-shadow:0 0 25px #111; max-width:940px; } |
Bước 5: Jquery
Chúng ta thêm thư viện jquery vào trước đã
|
1 |
<script src="https://code.jquery.com/jquery-1.6.2.min.js"></script> |
Và thêm đoạn Jquery này vào nhé
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 |
<script> jQuery(document).ready(function($) { $('.lightbox_trigger').click(function(e) { //prevent default action (hyperlink) e.preventDefault(); //Get clicked link href var image_href = $(this).attr("href"); /* If the lightbox window HTML already exists in document, change the img src to to match the href of whatever link was clicked If the lightbox window HTML doesn't exists, create it and insert it. (This will only happen the first time around) */ if ($('#lightbox').length > 0) { // #lightbox exists //place href as img src value $('#content').html('<img src="' + image_href + '" />'); //show lightbox window - you could use .show('fast') for a transition $('#lightbox').show(); } else { //#lightbox does not exist - create and insert (runs 1st time only) //create HTML markup for lightbox window var lightbox = '<div id="lightbox">' + '<p>Click to close</p>' + '<div id="content">' + //insert clicked link's href into img src '<img src="' + image_href +'" />' + '</div>' + '</div>'; //insert lightbox HTML into page $('body').append(lightbox); } }); //Click anywhere on the page to get rid of lightbox window $('#lightbox').live('click', function() { //must use live, as the lightbox element is inserted into the DOM $('#lightbox').hide(); }); }); </script> |
OK! kết quả của chúng ta đây rồi
Bạn có thể download code bên dưới để học hỏi nếu như không thể thực hiện thành công
