Trình diễn đa năng với koolbox
Trong lúc đi dạo các blog chuyên về design thì Yolks thấy, một số designer dùng plugin của jQuery là koolbox. Cho một số trang web của họ để làm đẹp ảnh trình bày bai viết.
Tuy nhỏ gọn , nhưng bảo đảm với các bạn koolbox có thể sẽ đánh ngã được prettyphoto trong thời gian sắp tới vì đây chỉ mới phiên bản v1.
Chúng ta sẽ xem qua các kiểu của nó nhé:
BASIC:
<a href="images/1.jpg" class="kool-box" title="Dragon ball"> <img src="images/thumb/1.jpg" alt="" /></a>
<a href="images/2.jpg" class="kool-box"> <img src="images/thumb/2.jpg" alt="" /> </a>
<a href="images/3.jpg" class="kool-box"> <img src="images/thumb/3.jpg" alt="" /></a>
GALLERY:



<a href="images/4.jpg" class="kool-box" rel="kool-box"><img src="images/thumb/4.jpg" alt="" /></a>GALLERY (Other theme):
<a href="images/5.jpg" class="kool-box" rel="kool-box"> <img src="images/thumb/5.jpg" alt="" /></a>
<a href="images/6.jpg" class="kool-box" rel="kool-box"> <img src="images/thumb/6.jpg" alt="" /></a>



<a href="images/4.jpg" class="kool-box" rel="kool-box"><img src="images/thumb/4.jpg" alt="" /></a>HTML:
<a href="images/5.jpg" class="kool-box" rel="kool-box"> <img src="images/thumb/5.jpg" alt="" /></a>
<a href="images/6.jpg" class="kool-box" rel="kool-box"> <img src="images/thumb/6.jpg" alt="" /></a>
<ul>MEDIA:
<li><a href="#infoContent" class="kool-box {width:300,height:200}">Inline Content</a></li>
<li><a href="ajax.htm" class="kool-box {width:600,height:400}">Ajax Content</a></li>
<li><a href="http://www.google.com/search?sclient=psy&hl=en&biw=1920&bih=920&site=&source=hp&q=vngreenzone" class="kool-box {
type:'iframe',width:800,height:600}" >Iframe</a></li>
</ul>










<a href="http://www.adobe.com/products/flashplayer/include/marquee/design.swf"CÁC THEME KHÁC
class="kool-box"><img src="images/video/flash.png" /></a>
<a href="http://trailers.apple.com/movies/disney/tronlegacy/tronlegacy-tsr1_r640s.mov"
class="kool-box"><img src="images/video/quicktime.gif" /></a>
<a href="http://www.youtube.com/watch?v=EFJOZkKi7gk" class="kool-box"> <img src="images/video/youtube.png" alt="Youtube" title="Youtube" /></a>
<a href="http://vimeo.com/8578886" class="kool-box"><img src="images/video/vimeo.png" alt="vimeo" title="vimeo" /></a>
<a href="http://www.megavideo.com/?v=22DU0O7O" class="kool-box"> <img src="images/video/megavideo.png" alt="Megavideo" title="Megavideo" /></a>
<a href="http://www.facebook.com/video/video.php?v=452462259845" class="kool-box"> <img src="images/video/facebook.png" alt="Facebook" title="Facebook" /></a>
<a href="http://www.dailymotion.com/video/xhzwb7_videotest-de-dragon-ball-z-budokai-3-sur-ps2_videogames"
class="kool-box"> <img src="images/video/Dailymotion.jpg" alt="Dailymotion" title="Dailymotion" /></a>
<a href="http://www.veoh.com/watch/v20859242sSZ5BzKR" class="kool-box"> <img src="images/video/veoh.png" alt="veoh" title="veoh" /></a>
<a href="http://www.metacafe.com/watch/6415350/dragon_ball_game_project_age_2011_teaser_trailer/"
class="kool-box"> <img src="images/video/Metacafe.png" alt="Metacafe" title="Metacafe" /></a>
<a href="http://clip.vn/watch/DragonBallZ056,zOr" class="kool-box"><img src="images/video/clip.vn.png" alt="clip.vn" title="clip.vn" /></a>
<ul>1.Cách cài vào blog:Thêm đoạn .js sau vào trước </body> rồi dùng các đoạn code nêu ở trên ví dụ để làm hiệu ứng:
<li><a href="images/1.jpg" class="kool-box {theme:'facebook'}" title="Dragon Ball Z">Facebook</a></li>
<li><a href="images/1.jpg" class="kool-box {theme:'white'}" title="Dragon Ball Z">White</a></li>
<li><a href="images/1.jpg" class="kool-box {theme:'violet'}" title="Dragon Ball Z">Violet</a></li>
<li><a href="images/1.jpg" class="kool-box {theme:'window7'}" title="Dragon Ball Z">Widnow 7</a></li>
<li><a href="images/1.jpg" class="kool-box {theme:'003366'}" title="Dragon Ball Z">003366</a></li>
</ul>
<link href="http://nasa8x.com/demo/koolbox-jquery-plugin/css/koolbox/003366/theme.css" rel="stylesheet" type="text/css" />
<link href="http://nasa8x.com/demo/koolbox-jquery-plugin/css/koolbox/facebook/theme.css" rel="stylesheet" type="text/css" />
<link href="http://nasa8x.com/demo/koolbox-jquery-plugin/css/koolbox/white/theme.css" rel="stylesheet" type="text/css" />
<link href="http://nasa8x.com/demo/koolbox-jquery-plugin/css/koolbox/violet/theme.css" rel="stylesheet" type="text/css" />
<link href="http://nasa8x.com/demo/koolbox-jquery-plugin/css/koolbox/window7/theme.css" rel="stylesheet" type="text/css" />
<!--<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js" type="text/javascript"></script>-->
<script src="http://nasa8x.com/demo/koolbox-jquery-plugin/scripts/jquery.min.js" type="text/javascript"></script>
<script src="http://nasa8x.com/demo/koolbox-jquery-plugin/scripts/jquery.validate.min.js" type="text/javascript"></script>
<script src="http://nasa8x.com/demo/koolbox-jquery-plugin/scripts/jquery.easing.min.js" type="text/javascript"></script>
<script src="http://nasa8x.com/demo/koolbox-jquery-plugin/scripts/metadata.min.js" type="text/javascript"></script>
<script src="http://nasa8x.com/demo/koolbox-jquery-plugin/scripts/koolbox.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(function () {
/* regex = /http\:\/\/www\.youtube\.com\/watch\?v=(\w{11})/;
url = 'http://www.youtube.com/watch?v=Ahg6qcgoay4';
var url = 'http://abc.com/a.swf'; // \\"http://vimeo.com/7058755";
var regExp = /[^\.]\.(swf)\s*$/i; // /youtube\.com\/watch\?v=([A-Za-z0-9._%-]*)[&\w;=\+_\-]#1# ; ///youtube\.com\/watch\?v=(\w{11})/ ; // /vimeo.com\/(\d+)($|\/)/; //|| /http:\/\/(www\.)?vimeo.com\/(\d+)($|\/)/;
var match = url.match(regExp);
alert(match.length);
if (match) {
alert("id: " + match[1]);
} else {
alert("not valid url");
}*/
$('.kool-box').koolbox();
$('img').css({ opacity: 0.8 }).hover(
function () {
$(this).animate({ opacity: 1.0 });
}, function () {
$(this).animate({ opacity: 0.8 });
});
});
</script>
Anonymous
November 2, 2011 at 12:26 PM
Haha , áp dụng thấy chạy trơn tru chưa này , thích cái window 7.
VIP
November 2, 2011 at 1:59 PM
Hiệu ứng Fade out bắt mắt thật =]]
Ngân cứu code auto luôn nhé + kinh lúp khi rê chuột vào ảnh =)
Pika Rock
November 2, 2011 at 4:17 PM
đẹp phết