スライドショー

「ふるさと富来」の写真館スライドショーを、jQuery『Juicy Slider』に変更しました。

最初は、HPが有料のプロバイダーを利用していたのですが、どうしても容量の増加が気になり、写真館のスライドショーを外部サイトに接続していました。 その名残でそのままにしていたのですが、今回は改めて内部リンクのスライドショーにしました。 スライドショーのjQueryもたくさん出ているので決定するまでには試行錯誤の繰り返しでしたが、どのクエリーも一長一短があって・・・。

代表的なブラウザ(IE Chrome Firefox Opera)で確認した結果、一番安定していそうなので『Juicy Slider』に決めました。 ただ、一時停止(ポーズ)出来ないのが不満なのですが、まあ良いか。



(↑)が、外部サイト(CANON iMAGE GATEWAY)にリンクしていた時の画面です。
フルスクリーンでの表示やマニュアル操作で1枚ごとに表示が出来る等、多機能で良かったのですが別ウィンドウでの表示となることや管理面での不安もありました。 


20150208_after.jpg

サムネイル表示にも出来るのですが、シンプルな画面にすることを重視し、全画面表示ではなくて左右に余白を設定しました。 また、「閉じる」ボタンを追加して無駄なウィンドウ表示をなくしました。

先日の記事のような不具合がないように検証したつもり(あくまでも・・)ですが、不具合を発見したらメールなりコメントなりでお知らせ頂ければ幸いです。


◆CSS に追加


/* Private Setting -----------------------*/
#myslider {
max-width:100%;
margin:0px auto 0;
}
.return{
position : absolute ;
bottom : 3% ;
right : 2% ;
z-index: 200;           !重要ポイント
opacity: .5;
filter: alpha(opacity=50);
}



◆HTML の記述

<body style="height:600px">
<div id="myslider" class="juicyslider">
<div class="return"><a href="../x_pGallery.html" target="_self"><img src="img/close.png" alt="" title="閉じる" /></a></div>



<div class="nav next"></div>
<div class="nav prev"></div>    !追加
<div class="mask"></div>


<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.0/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.9.0/jquery-ui.min.js"></script>
<script src="js/juicyslider.js"></script>
<script type="text/javascript">
$(function() {
$('#myslider').juicyslider({
   mode: 'contain',         !オプション
   bgcolor: '#FFF',
   autoplay: 5000,
   width: null,
   height: null,

  });
});
</script>
</div>


スポンサーサイト
     

コメント

Secret

     
カレンダー
05 | 2017/06 | 07
- - - - 1 2 3
4 5 6 7 8 9 10
11 12 13 14 15 16 17
18 19 20 21 22 23 24
25 26 27 28 29 30 -
ホームページ
プロフィール

チャッピー

名  前:チャッピー
誕生日:2000年8月13日
性  別:男性
趣  味:散歩(最近は昼寝)
特  技:お座り、お手&待て!

メール ・ 管理画面
カウンター
今日の天気&予報

※日本気象協会(tenki.jp)

最新記事
月別アーカイブ
〖日付の古い順で表示します〗
カテゴリ
〖日付の新しい順で表示します〗
リンク
ブログ内検索
RSSリンクの表示