Lightbox là một script đơn giản được dùng để tạo chế độ Preview hình ảnh trên trang web. Hôm nay xin giới thiệu hiệu ứng Lightbox của Pirolab phát triển dựa trên thư viện jQuery, có chức năng tự động chỉnh lại kích cỡ hình ảnh dự trên kích cỡ cửa sổ trình duyệt.
Hiệu ứng này tương thích với các công cụ trình duyệt như FireFox 2-3, Opera 9.0, Chrome, Safari (Mac/Windows), Internet Explorer 6-7-8.
Xem Demo.
Sau đây là các bước thực hiện:
1. Gắn các phần code dưới đây vào trước thẻ </head>.
Hiệu ứng này tương thích với các công cụ trình duyệt như FireFox 2-3, Opera 9.0, Chrome, Safari (Mac/Windows), Internet Explorer 6-7-8.
Xem Demo.
Sau đây là các bước thực hiện:
1. Gắn các phần code dưới đây vào trước thẻ </head>.
<link href="http://www.pirolab.it/pirobox/css_pirobox/demo3/style.css" class="piro_style" media="screen" title="white" rel="stylesheet" type="text/css" />
<style type="text/css" >
.demo a{ float:left; margin:0; padding:0; margin:5px 0px 5px 19px!important; margin:5px 10px 5px 10px; display:block; border:3px solid #efefef;} .demo a:hover{ border:3px solid #fff} .demo a img{ float:left; margin:0; padding:0; margin:0; background:url(http://www.pirolab.it/pirobox/css_pirobox/bg_tms.jpg) no-repeat;} ul,li,dl,dt,dd{ list-style-type:none; margin:0; padding:0; }
</style>
<script type="text/javascript" src="http://www.pirolab.it/pirobox/js/jquery.min.js"></script>
<script type="text/javascript" src="http://www.pirolab.it/pirobox/js/pirobox.js"></script>
<script type="text/javascript">
$(document).ready(function() { $().piroBox({ my_speed: 400, //animation speed bg_alpha: 0.1, //background opacity slideShow : true, // true == slideshow on, false == slideshow off slideSpeed : 4, //slideshow duration in seconds(3 to 6 Recommended) close_all : '.piro_close,.piro_overlay'// add class .piro_overlay(with comma)if you want overlay click close piroBox }); });
</script>
Trong các phần code trên, bạn có thể chỉnh các thông số cho tốc độ slide hình ảnh.<style type="text/css" >
.demo a{ float:left; margin:0; padding:0; margin:5px 0px 5px 19px!important; margin:5px 10px 5px 10px; display:block; border:3px solid #efefef;} .demo a:hover{ border:3px solid #fff} .demo a img{ float:left; margin:0; padding:0; margin:0; background:url(http://www.pirolab.it/pirobox/css_pirobox/bg_tms.jpg) no-repeat;} ul,li,dl,dt,dd{ list-style-type:none; margin:0; padding:0; }
</style>
<script type="text/javascript" src="http://www.pirolab.it/pirobox/js/jquery.min.js"></script>
<script type="text/javascript" src="http://www.pirolab.it/pirobox/js/pirobox.js"></script>
<script type="text/javascript">
$(document).ready(function() { $().piroBox({ my_speed: 400, //animation speed bg_alpha: 0.1, //background opacity slideShow : true, // true == slideshow on, false == slideshow off slideSpeed : 4, //slideshow duration in seconds(3 to 6 Recommended) close_all : '.piro_close,.piro_overlay'// add class .piro_overlay(with comma)if you want overlay click close piroBox }); });
</script>
2. Thiết lập cấu trúc HTML như bên dưới và đặt vào phần thân của trang web, nằm giữa 2 thẻ <body>, </body>.
<div style="float:left; width:550px; display:block;">
<h2>Click chuột trái vào Thumbnail để phóng lớn hình</h2>
<div class="demo"><a href="/images/1.jpg" class="pirobox_gall" title="Mo ta anh 1"><img src="/images/1s.jpg" /></a></div>
<div class="demo"><a href="/images/2.jpg" class="pirobox_gall" title="Mo ta anh 2"><img src="/images/2s.jpg" /></a></div>
<div class="demo"><a href="/images/3.jpg" class="pirobox_gall" title="Mo ta anh 3"><img src="/images/3s.jpg" /></a></div>
<div class="demo"><a href="/images/4.jpg" class="pirobox_gall" title="Mo ta anh 4"><img src="/images/4s.jpg" /></a></div>
...
</div>
Chú ý: Các file ảnh đánh dấu màu xanh là ảnh lớn cho chế độ Preview, các file ảnh đánh dấu màu đỏ là ảnh thumnail đại diện, thêm thuộc tính mô tả ảnh nếu cần. Bạn có thể thêm số lượng ảnh tùy thích và chỉnh sửa cấu trúc HTML cho phù hợp.<h2>Click chuột trái vào Thumbnail để phóng lớn hình</h2>
<div class="demo"><a href="/images/1.jpg" class="pirobox_gall" title="Mo ta anh 1"><img src="/images/1s.jpg" /></a></div>
<div class="demo"><a href="/images/2.jpg" class="pirobox_gall" title="Mo ta anh 2"><img src="/images/2s.jpg" /></a></div>
<div class="demo"><a href="/images/3.jpg" class="pirobox_gall" title="Mo ta anh 3"><img src="/images/3s.jpg" /></a></div>
<div class="demo"><a href="/images/4.jpg" class="pirobox_gall" title="Mo ta anh 4"><img src="/images/4s.jpg" /></a></div>
...
</div>
Bài đăng
0 nhận xét