jQueryプラグインのMosaicを試してみる

JavaScript

jQueryプラグインのMosaicを試してみる

Mosaic - Sliding Boxes and Captions jQuery Plugin
http://buildinternet.com/project/mosaic/

設置

ファイルを下記のような感じで設置。

├ css/
├ img/
├ js/
├ index.html
└ sample.png

基本

基本的にHTMLは下記のような感じで書く。

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
  <link href="css/mosaic.css" rel="stylesheet">
  <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.0/jquery.min.js"></script>
  <script src="js/mosaic.1.0.1.min.js"></script>
  <style type="text/css">
  .mosaic-block {
    width:400px;
    height:200px;
  }
  </style>
  <script>
  $(function(){
    $('.fade').mosaic();
  });
  </script>
</head>
<body>

  <div class="mosaic-block fade">
    <a href="http://www.yahoo.co.jp" target="_blank" class="mosaic-overlay">
      <div class="details"><h4>タイトル</h4><p>テキスト</p></div>
    </a>
    <div class="mosaic-backdrop"><img src="sample.png"/></div>
  </div>
		
</body>
</html>

デモ


他にも色々パターンがある

barの場合

  <script>
  $(function(){
    $('.bar').mosaic({animation:'slide'});
  });
  </script>

  <div class="mosaic-block bar">
    <a href="http://www.yahoo.co.jp" target="_blank" class="mosaic-overlay">
      <div class="details"><h4>タイトル</h4><p>テキスト</p></div>
    </a>
    <div class="mosaic-backdrop"><img src="sample.png"/></div>
  </div>

デモ

coverの場合

  <script>
  $(function(){
    $('.cover').mosaic({animation:'slide', hover_x:'400px'});
  });
  </script>

  <div class="mosaic-block cover">
    <div class="mosaic-overlay"><img src="sample.png"/></div>
    <a href="http://www.yahoo.co.jp/" target="_blank" class="mosaic-backdrop">
      <div class="details"><h4>タイトル</h4><p>テキスト</p></div>
    </a>
  </div>

デモ