JavaScript + Ajax 実践サンプル集 - イメージを水平方向にスクロール(thickbox版)

イメージを水平方向にスクロール(thickbox版)

説明補足説明コード関連書籍コメント投稿

このサンプルは、jQueryのjcarousel()プラグインを利用してイメージを水平方向にスクロールします。イメージをクリックするとイメージが拡大されて表示されます。

$('#mycarousel').jcarousel({
  size: mycarousel_itemList.length,
  itemLoadCallback: { onBeforeAnimation: mycarousel_itemLoadCallback }
});

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
  <title>jQuery - jCarousel with Thickbox </title>
  <link href="jQuery/jCarousel/style.css" rel="stylesheet" type="text/css" />
  <link href="jQuery/jCarousel/lib/jquery.jcarousel.css" rel="stylesheet" type="text/css" />
  <link href="jQuery/jCarousel/lib/thickbox/thickbox.css" rel="stylesheet" type="text/css" />
  <link href="jQuery/jCarousel/skins/ie7/skin.css" rel="stylesheet" type="text/css" />
  
  <script src="jQuery/jCarousel/lib/jquery-1.2.3.pack.js" type="text/javascript"></script>
  <script src="jQuery/jCarousel/lib/jquery.jcarousel.pack.js" type="text/javascript"></script>
  <script src="jQuery/jCarousel/lib/thickbox/thickbox.js" type="text/javascript"></script>

// Set thickbox loading image
    tb_pathToImage = "jQuery/jCarousel/images/loading-thickbox.gif";

var mycarousel_itemList = [
      { url: "http://static.flickr.com/66/199481236_dc98b5abb3_s.jpg", title: "Flower1" },
      { url: "http://static.flickr.com/75/199481072_b4a0d09597_s.jpg", title: "Flower2" },
      { url: "http://static.flickr.com/57/199481087_33ae73a8de_s.jpg", title: "Flower3" },
      { url: "http://static.flickr.com/77/199481108_4359e6b971_s.jpg", title: "Flower4" },
      { url: "http://static.flickr.com/58/199481143_3c148d9dd3_s.jpg", title: "Flower5" },
      { url: "http://static.flickr.com/72/199481203_ad4cdcf109_s.jpg", title: "Flower6" },
      { url: "http://static.flickr.com/58/199481218_264ce20da0_s.jpg", title: "Flower7" },
      { url: "http://static.flickr.com/69/199481255_fdfe885f87_s.jpg", title: "Flower8" },
      { url: "http://static.flickr.com/60/199480111_87d4cb3e38_s.jpg", title: "Flower9" },
      { url: "http://static.flickr.com/70/229228324_08223b70fa_s.jpg", title: "Flower10" }
    ];

function mycarousel_itemLoadCallback(carousel, state) {
      for (var i = carousel.first; i <= carousel.last; i++) {
        if (carousel.has(i)) {
          continue;
        }

if (i > mycarousel_itemList.length) {
          break;
        }

// Create an object from HTML
        var item = jQuery(mycarousel_getItemHTML(mycarousel_itemList[i - 1])).get(0);

// Apply thickbox
        tb_init(item);

carousel.add(i, item);
      }
    };

/**
    * Item html creation helper.
    */
    function mycarousel_getItemHTML(item) {
      var url_m = item.url.replace(/_s.jpg/g, '_m.jpg');
      return '<a href="' + url_m + '" title="' + item.title + '"><img src="' + item.url + '" width="75" height="75" border="0" alt="' + item.title + '" /></a>';
    };

$(function() {
    
      $('#mycarousel').jcarousel({
        size: mycarousel_itemList.length,
        itemLoadCallback: { onBeforeAnimation: mycarousel_itemLoadCallback }
      });

});
  </script>

</head>
<body>

</div>

</body>
</html>