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

GALLERY (Other theme):
 

<a href="images/4.jpg" class="kool-box" rel="kool-box"><img src="images/thumb/4.jpg" alt="" /></a> 
<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>

HTML:

• noct-land
• vnblogspot
• TTB

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

MEDIA:
 

<a href="http://www.adobe.com/products/flashplayer/include/marquee/design.swf"
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>  

CÁC THEME KHÁC

• Facebook
• White
• Violet
• Widnow 7
• 003366

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

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:

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