• Tư vấn điều trị
      bệnh khàn tiếng


    www.trikhantieng.com

    Liên hệ + 0913163316

BlogList111

Việt Nam Gia Phả, nơi lưu trữ Gia Phả của người Việt Nam  Kiến thức Blogspot Ngonluanho: Nhung cau chuyen thap lua-Tin-Cay-Men Vngreenzone Là một nơi chia sẻ kinh nghiệm làm blogger - Nơi tôn vinh tâm hồn blogger Việt

Hiệu ứng Lightbox cho hình ảnh sử dụng jQuery

0
29/10/2010

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

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

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.

{0 bình luậnAdd yours ?}

Nội quy! Đóng lại Khi bạn viết bình luận, cần tuân thủ một số quy tắc sau:
» Bình luận phải nghiêm túc và không chứa các liên kết quảng cáo.
» Có thể sử dụng các thẻ <b> … </b>,<i> … </i>, <a href="URL..."> ... </a>.
» Yêu cầu thủ thuật tại mục Yêu cầu thủ thuật hoặc hỏi tại mục Hỏi và Đáp.
More →
Chữ đậm Chữ nghiêng Chữ nghiêng 2 Chèn Link Chèn Link Mã hóa code Help ?Nhấn vào biểu tượng hoặc kiểu chữ hoặc chèn link sau đó nhấn nút Chọn rồi copy (Ctrl + C) để paste (Ctrl + V) vào khung viết bình luận. Mã hóa code nếu bạn muốn đưa code vào bình luận.

Chọn Xóa

Next post: Bài đăng Mới hơn

Previous post: Bài đăng Cũ hơn