Hướng dẫn xem ảnh với Colorbox

[Tuấn]

Bữa trước có bạn hỏi nên mình đã chỉ 1 lần rồi. Nay viết lại cho đầy đủ để các bạn làm.
Cái này tương tự như fancybox nhưng mình thấy có vẻ cái này nhẹ hơn thì phải. Đặc biệt cái này có cả chức năng xem slide ảnh( mình để thời gian là 10s nên hơi lâu, từ từ các bạn sẽ thấy).

Trước hết là demo:

Code:

http://www.ca3vt.tk/t327-topic

Vào header tìm

Code:

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

Chèn ngay sau đó

Code:

<script language="javascript">
$(document).ready(function(){
$('.postbody img').slideDown(1, function(){
if($(this).height() > 120)
{
$(this).replaceWith('<a href="'+$(this).attr('src')+'" title="www.ca3vt.tk" rel="example4"><img src="'+$(this).attr('src')+'"></a>');
}
});
});
</script>

CSS chèn:

Code:

#cboxOverlay,#cboxWrapper,#colorbox{left:0;overflow:hidden;position:absolute;top:0;z-index:999}#cboxOverlay{background:#000;height:100%;position:fixed;width:100%}#cboxBottomLeft,#cboxMiddleLeft{clear:left}#cboxContent{background:#fff;overflow:visible;position:relative}#cboxLoadedContent{margin-bottom:5px;overflow:auto}#cboxLoadedContent iframe{border:0;display:block;height:100%;width:100%}#cboxTitle{bottom:-25px;color:#7C7C7C;font-weight:700;left:0;margin:0;position:absolute;text-align:center;width:100%}#cboxLoadingGraphic,#cboxLoadingOverlay{left:0;position:absolute;top:0;width:100%}#cboxClose,#cboxNext,#cboxPrevious,#cboxSlideshow{background:url(http://i27.servimg.com/u/f27/15/67/36/41/contro10.png) no-repeat 0 0;bottom:-29px;cursor:pointer;height:23px;position:absolute;text-indent:-9999px;width:23px}#cboxTopLeft{background:url(http://i27.servimg.com/u/f27/15/67/36/41/contro10.png) no-repeat 0 0;height:14px;width:14px}#cboxTopCenter{background:url(http://i27.servimg.com/u/f27/15/67/36/41/border10.png) repeat-x top left;height:14px}#cboxTopRight{background:url(http://i27.servimg.com/u/f27/15/67/36/41/contro10.png) no-repeat -36px 0;height:14px;width:14px}#cboxBottomLeft{background:url(http://i27.servimg.com/u/f27/15/67/36/41/contro10.png) no-repeat 0 -32px;height:43px;width:14px}#cboxBottomCenter{background:url(http://i27.servimg.com/u/f27/15/67/36/41/border10.png) repeat-x bottom left;height:43px}#cboxBottomRight{background:url(http://i27.servimg.com/u/f27/15/67/36/41/contro10.png) no-repeat -36px -32px;height:43px;width:14px}#cboxMiddleLeft{background:url(http://i27.servimg.com/u/f27/15/67/36/41/contro10.png) repeat-y -175px 0;width:14px}#cboxMiddleRight{background:url(http://i27.servimg.com/u/f27/15/67/36/41/contro10.png) repeat-y -211px 0;width:14px}#cboxLoadingOverlay{background:url(http://i27.servimg.com/u/f27/15/67/36/41/loadin10.png) no-repeat center center}#cboxLoadingGraphic{background:url(http://i27.servimg.com/u/f27/15/67/36/41/loadin10.gif) no-repeat center center}#cboxCurrent{bottom:-25px;color:#7C7C7C;font-weight:700;left:58px;position:absolute}#cboxPrevious{background-position:-51px -25px;left:0}#cboxPrevious.hover{background-position:-51px 0}#cboxNext{background-position:-75px -25px;left:27px}#cboxNext.hover{background-position:-75px 0}#cboxClose{background-position:-100px -25px;right:0}#cboxClose.hover{background-position:-100px 0}.cboxSlideshow_on #cboxSlideshow{background-position:-125px 0;right:27px}.cboxSlideshow_on #cboxSlideshow.hover{background-position:-150px 0}.cboxSlideshow_off #cboxSlideshow{background-position:-150px -25px;right:27px}.cboxSlideshow_off #cboxSlideshow.hover{background-position:-125px 0}

Nhớ up lại link giùm mình, chỉ có 2 hình thui nhanh mà

.Chèn vào view_topic_body

Code:


<script type="text/javascript" src="http://colorpowered.com/colorbox/core/colorbox/jquery.colorbox.js"></script><script>
      $(document).ready(function(){
         //Examples of how to assign the ColorBox event to elements
         $("a[rel='example1']").colorbox();
         $("a[rel='example2']").colorbox({transition:"fade"});
         $("a[rel='example3']").colorbox({transition:"none", width:"75%", height:"75%"});
         $("a[rel='example4']").colorbox({slideshow:true});
         $(".example5").colorbox();
         $(".example6").colorbox({iframe:true, innerWidth:425, innerHeight:344});
         $(".example7").colorbox({width:"80%", height:"80%", iframe:true});
         $(".example8").colorbox({width:"50%", inline:true, href:"#inline_example1"});
         $(".example9").colorbox({
            onOpen:function(){ alert('onOpen: colorbox is about to open'); },
            onLoad:function(){ alert('onLoad: colorbox has started to load the targeted content'); },
            onComplete:function(){ alert('onComplete: colorbox has displayed the loaded content'); },
            onCleanup:function(){ alert('onCleanup: colorbox has begun the close process'); },
            onClosed:function(){ alert('onClosed: colorbox has completely closed'); }
         });
         
         //Example of preserving a JavaScript event for inline calls.
         $("#click").click(function(){
            $('#click').css({"background-color":"#f00", "color":"#fff", "cursor":"inherit"}).text("Open this window again and this message will still be here.");
            return false;
         });
      });
   </script>

Ngoài ra còn rất nhiều ứng dụng nữa của colorbox, các bạn có thể tìm hiểu ở đây

Code:

http://colorpowered.com/colorbox/

Từ từ mình sẽ viết nốt các ứng dụng khác.

Lưu ý đối với các bạn đã có TDYT: để tránh xung đột với các lightobx khác àm các bạn dùng để làm tdyt, các bạn nên chuyển hết tất cả code của TDYT vào trong index_body và thay vì chèn CSS như trên thì chèn cái này vào view_topic_body

Code:

<link media="screen" rel="stylesheet" href="http://colorpowered.com/colorbox/core/example5/colorbox.css" />

P/s: TUT này có sử dụng code của anh baivong. Chân thành cám ơn anh ( có dòng này không bị ghi là xâm phạm bản quyền )

[Zero]

[You must be registered and logged in to see this image.]

[Tuấn]

Bác cứ bình tĩnh cái đó em lấy từ forum khác chứ có phải của em đâu. Sẽ sửa lại demo ngay

[Việt]

Code:

<script type='text/javascript' src='http://www.ca3vt.tk/-h61.htm'></script>
<script src="http://www.ca3vt.tk/-h62.htm" type="text/javascript"></script>

gắn cùng lúc 2 loại tooltip sao ?
mà tooltip với colorbox cũng không liên quan đúng không nhỉ ?

[Tuấn]

Nhầm, dư cái h62-. Cái h61- chứa code tooltip và code khai báo các class của colorbox . Em gộp cả 2 vào lun . Tại lười tách ra nên đưa hết lên

[baivong]

Hiện tại mình update hướng dẫn colorbox rồi, bạn đưa cái mà bạn đã chỉnh sửa lên làm mình thành kẻ lạc hậu. Nếu là coppy thì yêu cầu giữ nguyên nội dung.

[Tuấn]

Hiện tại mình update hướng dẫn colorbox rồi, bạn đưa cái mà bạn đã chỉnh sửa lên làm mình thành kẻ lạc hậu. Nếu là coppy thì yêu cầu giữ nguyên nội dung.

Em xin thề chỉ lấy mỗi 1 đoạn code của ông anh từ cái bài slimbox gì đó qua (đã ghi bản quyền cuối bài rồi nha). còn lại thì là lấy ra từ index.html trong demo của colorbox .

[Sấm]

double clb xoá bớt 1 cái đi

[baivong]

Bên 4r mình đã có bài hướng dẫn colorbox từ lâu, nếu ko phải cậu chép từ đó thì thôi vậy.

[Trung H]

Hô hô! TUT này của bác khác với 3 cái JS kia nhỉ

[IceFox]

batuan ơi! Có bộ rank đẹp quá, share đi bạn.

[Tuấn]

Hô hô! TUT này của bác khác với 3 cái JS kia nhỉ

Lúc chỉ cậu là vội quá nên lấy mấy cái của mình lun, mình ghép mấy script vào 1 file nên dễ xung đột.

batuan ơi! Có bộ rank đẹp quá, share đi bạn.

Mình toàn xài hàng của mà bạn. Trong có share rồi đó

[blogkien]

Sao làm theo y chang mà hông thấy hiệu ứng gì khi xem ảnh giống trong Demo nhỉ?

[rua_can_91]

uh mình làm cũng không thấy được hic hic chẳng hiểu sao nữa...
làm cái nãy có cần phải chỉnh lại phần Images resize ko mọi người?

[Tuấn]

Làm cái này thì không dùng resize của FM, chuyển về dùng CSS đi.
Bạn nào không làm dc cho mình xin link forum và 1 cái nick test.

[blogkien]

Mình ko xài resize của FM nhưng trong viewtopic_body và CSS có code resize. Bỏ luôn bạn nhỉ? hay là sao... mình giừ đang ăn cơm chưa test được.

[rua_can_91]

Làm cái này thì không dùng resize của FM, chuyển về dùng CSS đi.
Bạn nào không làm dc cho mình xin link forum và 1 cái nick test.

forum của mình nè http://svdientuvienthong.co.cc/
tên đăng nhập : test123
pass: forumotion1234

sau khi làm không được mình lại chuyển về dùng resize của FM hichic

[notme]

xin lỗi mình làm theo nhưng không được
không thiếu bước nào tại sao vẫn như vậy

[badboy10a8]

ko có tác dụng, tut này còn hạn sử dụng không đây ?

[badboy10a8]

khi kích vào hình ảnh là nó nhảy sang tab mới, vậy là sao mọi người ?!?

[notme]

mình đã hiểu và đã áp dụng thành công thanks

[nobody]

Làm cái này thì không dùng resize của FM, chuyển về dùng CSS đi.
Bạn nào không làm dc cho mình xin link forum và 1 cái nick test.

Code:

ID: Trần
Pass: 09092009

Qua test rồi chỉ mình làm với. Làm mãi mà không được.

[singh]

làm sao để code này có tác dụng với hình trong bài viết.mình làm đúng hướng dẫn mà k thấy có tác dụng với ảnh trong bài viết

[Sponsored content]