Help us understand the problem. What is going on with this article?

jQueryでおしゃれなスライドショーを作る。Fotoramaの紹介

More than 1 year has passed since last update.

スライドショーが欲しい。

画像をオシャレにスライドショーにしたい!
jQueryで画像のスライドショーを表示するプラグインはたくさんあるのですが、その中でも自分が気に入ったものを紹介します!

商用、オープンソース共にフリーのライセンス

fotorama
http://fotorama.io/

fotoramaはMITライセンスで提供されているので商用、趣味の利用等がフリーになっています。
つまり、「あ、これ仕事でも使いたいと思った時はそのまま使える訳ですね。」

使い方

使い方はとてもシンプル!
まずベースになるjQuery、そして fotorama.jsとfotorama.cssをhtmlに組み込みます

page.html
<!-- 1. Link to jQuery (1.8 or later), -->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <!-- 33 KB -->

<!-- fotorama.css & fotorama.js. -->
<link  href="http://cdnjs.cloudflare.com/ajax/libs/fotorama/4.6.4/fotorama.css" rel="stylesheet"> <!-- 3 KB -->
<script src="http://cdnjs.cloudflare.com/ajax/libs/fotorama/4.6.4/fotorama.js"></script> <!-- 16 KB -->

次に、画像の上下に

タグを挟むだけです!

自分の場合はSpringでのウェブサービスなのでこんなんになります
(※このimgタグはData URI スキーム、というリンクに直接バイナリデータを入れる特殊な書き方です。
詳しくはJavaサーブレットとかjspを調べてみてね wikipedia)

page.html
<div class="fotorama"
     data-nav="thumbs" data-fit="cover" >
<!-- 画像表示ループ -->
<c:forEach var="picture" items="${albumPicutresList}" varStatus="status">

        <img src="data:image/${picture.extension};base64,${picture.base64string}"data-caption="${picture.pictureName}"  data-fit="contain"/>
</c:forEach>

今回は自分の好みで
 サムネ表示。
 画像の最大幅をスライドショーの幅に合わせる、
 DBから読み込んだ名前をキャプションとして表示

という設定をしています。

fotoramaがdata-navというタグをつけるだけでこういう事もできちゃいます!

レッツ実行

image.png

image.png

素晴らしいアルバムが出来ました!ヾ(。>﹏<。)ノ゙✧*。

オマケ

Fotoramaには選択した画像の情報を取得できるAPIがあります。
これも公式の通りにすることで動かせます。

公式のをそのままコピペ

fotoramaApiSample.html
<script>
  $(function () {
    // 1. Fotoramaを手動で起動します
    var $fotoramaDiv = $('#fotorama').fotorama();

    // 2. APIオブジェクトを取得します
    var fotorama = $fotoramaDiv.data('fotorama');

    // 3. オブジェクトを動かしてみてください
    console.log(fotorama);
  });
</script>

<div id="fotorama"
     class="fotorama"
     data-auto="false">
<!-- ↑ 重要な属性です。FotoramaのAPIを使う時は付けてください。. -->
  <img src="1.jpg">
  <img src="2.jpg">
</div>

取りあえず idの値を取得してみました。

myPage.js
 var fotorama
    /**
     * fotoramaオブジェクトを取得
     */
     $(function () {
            // 1. Initialize fotorama manually.
            var $fotoramaDiv = $('#fotorama').fotorama();
            // 2. Get the API object.
            fotorama = $fotoramaDiv.data('fotorama');

            // 3. Inspect it in console.
            //console.log(fotorama.activeFrame.id);
          });
    /**
     * 画像編集ボタンを押下
    */
    $(function(){
        //ボタン押下イベント
        $("#picutureInfoEdit").click(function() {
          console.log("選択した画像のIDは" + fotorama.activeFrame.id + "です");
        });

結果

image.png

画像のIDが取得できました。
これをPOSTなりGETなりすれば、編集機能にも使えそう。

Why do not you register as a user and use Qiita more conveniently?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away