3 kiểu xem ảnh dùng lightbox

Tiêu đề: 3 kiểu xem ảnh dùng lightbox Fri Oct 14, 2011 9:28 pm

1-Xem ảnh với Fancybox
Youtube:

Code:: mediafire.com qa6rgd19nkdrd8j

Quản lý tổng thể - Display - Templates - overall_header:
Thêm vào bên dưới

Code:: {CSS}

bằng

Code:: <link rel="stylesheet" href="http://link.08sh.tk/Cbox" type="text/css" />

Thêm vào bên dưới:

Code:: <script src="{JQUERY_PATH}" type="text/javascript"></script>

...code sau:

Code:: <script src="http://link.08sh.tk/Sbox" type="text/javascript"></script>

Trích dẫn :: Đây là thứ tự để code hoạt động tốt nhất, bạn nào đang sử dụng Fancybox theo bài hướng dẫn này và ko thay đổi link thì chức năng này sẽ tự cập nhật, không cần phải thay đổi gì cả.
Nếu các bạn đang xài code xem ảnh khác như SLIMBOX, THICKBOX, COLORBOX... thì phải xoá đi để ko gây xung đột code.

Ưu điểm: Ứng dụng xem ảnh, chèn webside, video, flash, Ajax,...
Nhược điểm: Hơi... nặng

2-Xem ảnh với Slimbox
Youtube:

Bước 1: Chèn vào Css:

Code:: #lbOverlay{position:fixed;z-index: 999;left:0;top:0;width:100%;height:100%;background-color:#000;cursor:pointer;}#lbCenter,#lbBottomContainer{position:absolute;z-index: 999;overflow:hidden;background-color:#fff;}.lbLoading{background:#fff url(http://i27.servimg.com/u/f27/14/67/90/38/novfao10.gif) no-repeat center;}#lbImage{position:absolute;left:0;top:0;border:10px solid #fff;background-repeat:no-repeat;}#lbPrevLink,#lbNextLink{display:block;position:absolute;top:0;width:50%;outline:none;}#lbPrevLink{left:0;}#lbPrevLink:hover{background:transparent url(http://i27.servimg.com/u/f27/14/67/90/38/11qo2n10.gif) no-repeat 0 15%;}#lbNextLink{right:0;}#lbNextLink:hover{background:transparent url(http://i27.servimg.com/u/f27/14/67/90/38/1r7u6o10.gif) no-repeat 100% 15%;}#lbBottom{font-family:Verdana, Arial, Geneva, Helvetica, sans-serif;font-size:10px;color:#666;line-height:1.4em;text-align:left;border:10px solid #fff;border-top-style:none;}#lbCloseLink{display:block;float:right;width:66px;height:22px;background:transparent url(http://i27.servimg.com/u/f27/14/67/90/38/1217by10.gif) no-repeat center;outline:none;margin:5px 0;}#lbCaption,#lbNumber{margin-right:71px;}
.postbody img{max-width:450px;}

Bước 2: Thêm vào header:
Trong header. Thêm vào bên dưới

Code:: <script src="{JQUERY_PATH}" type="text/javascript"></script>

...bằng code:

Code:: <script type="text/javascript" src="http://link.08sh.tk/Slimbox"></script>

Bước 3: Kiểm tra Templates
1- Xem trong viewtopic_body còn đoạn script này không, nếu không thì thêm vào.

Code:: <script type="text/javascript">
//<![CDATA[
$(resize_images({ 'selector' : '.postbody', 'max_width' : {switch_image_resize.IMG_RESIZE_WIDTH}, 'max_height' : {switch_image_resize.IMG_RESIZE_HEIGHT} }));
//]]></script>

2- Kiểm tra overall_header xem có đoạn này chưa:

Code:: <div id="page-body">

3- Kiểm tra viewtopic_body xem còn đoạn này không:

Code:: <div class="postbody">

4- Quản lý tổng thể - Messages and e-mails - Cấu hình diễn đàn - Images resize : Xoá trống 2 ô Width và Height

Trích dẫn :: Đây là thứ tự để code hoạt động tốt nhất, bạn nào đang sử dụng SLIMBOX trước đây thì chỉ cần làm bước 2
Nếu các bạn đang xài code xem ảnh khác như FANCYBOX, THICKBOX, COLORBOX... thì phải xoá đi để ko gây xung đột code.

Ưu điểm: Trình xem ảnh siêu nhẹ.
Nhược điểm: Chỉ để xem ảnh chứ chẳng làm gì khác.

Viết bởi baivong - [You must be registered and logged in to see this link.]
(Vui lòng giữ lại nguồn nếu đăng tải lại bài viết ở trang khác)
Hướng dẫn trên là cách cài đặt Colorbox Version 5
Xem thêm cách dùng cũng như các phiên bản khác tại trang chủ [You must be registered and logged in to see this link.]

» 3 kiểu xem ảnh dùng lightbox
» Lightbox cực nhẹ dùng CSS và jQuery
» Xem ảnh với lightbox
» Cưa gái kiểu việt nam
» [TUT] Một kiểu like Facebook

Tìm kiếm

Display results as : Số bài Chủ đề
Advanced Search