この記事の所要時間: 454

最近、スライドショー何回か依頼されております。
最近使ったもの・・・・ライブラリ名だけ。
SudoSlider デモ
FlexSlider2



○ 自作
かなり試したけど忘れてる・・・アカンw
なかでも上記2つが最終的に残りました。

[adsense]

いろいろいじってみると SudoSliderではやりにくいものがあって結果、FlexSlider2に落ち着きそうだったんです。
でも、アルバムみたいな写真数でスライドショー・・・ってなるとPHPで回して出力HTMLは <img src="~~ って何個書くのぉぉぉ・・・って感じになっちゃう。
で、それをブラウザで見ると一気に何個イメージ持ってくんのヨォおおぉ・・・ってなっちゃう。
ま、当たり前。
で、遅延読込を考えたら SudoSliderって最初から ajax [ ・・・・ ] っていうプロパティがあって画像を Javascriptに書くんだけど、それだけでよかったりしました。
・・・ただ、いろいろあって・・・

・・・というわけで調べた結果、英語の文献しか見つからなかったんだけど
FlexSlider2 + Lazyload の組み合わせが良さそう・・・ってことで、今回作ってみたのですよ。
(参考:Lazyloadの記事)
結果・・・劇的・・・ってわけでもないけど、スマホなんかでは重すぎてブラウザ落ちちゃうものとかもあったのが、なんとか見られるようになりました。
そのコードがこれ・・・
スクリプト部 ライブラリの読込含む

<link rel="stylesheet" type="text/css" href="js/flexslider.css"/>
<script type="text/javascript" src="js/jquery.lazyload.min.js"></script>
<script type="text/javascript" src="js/jquery.flexslider-min.js"></script>
<script type="text/javascript" >
   jQuery(document).ready(function(){
        jQuery('.flexslider').flexslider({
             start: function (flexslider) {
                   // lazy load
                   jQuery(flexslider).find("img.lazy").each(function () {
                      var src = jQuery(this).attr("data-src");
                      jQuery(this).attr("src", src).removeAttr("data-src");
                   });
                 }
        });
   });
</script>

そんでもって、表示部がこれです。

<div id="container">
<div class="flexslider">
<ul class="slides">
<?php
    foreach ($files as $file) {
?>
<li><a href="<?php echo $file->path; ?>"><img class="lazy" src="images/loading.gif" data-src="<?php echo $file-/>path; ?>" /></a></li>
<?php
        }
    }
?>
</ul>
<br clear="all" />
</div>
</div>

はじめにHTMLの方には Loading… 画像をいっぱいはるイメージですね。
その後、読み込めたところから data-src を src に入れてあげたら、本物登場 with フェードイン という感じです。

いやー、手が空いたらサンプル作りますね。


サンプル作りました!
http://ful.jp/resources/ajax/flexLazy/

では、また。
参考になれば幸いです。

株式会社ジーティーアイ

超テキトーな感じですがサンプルをダウンロードできます・・・↓↓
一式を、ZIP形式に圧縮しております。
FlexSlider2+Lazyloadサンプル ダウンロードする

2014/4/22
Facebookの「いいね!」をいただかなくてもダウンロード出来るようにしました。

気に入ったら是非Facebook株式会社ジーティーアイ に「いいね!」ください。

よろしくお願いいたします!

—- 追記 2014/5/23 —-
デモを変更しました!
●●●●●●●● のようなコントロール並びに「<」と「>」のコントロールが以前のバージョンでは出ていませんでした。
その修正を行いました。
どうぞよろしくお願いいたします。

この記事が気に入ったら
いいね ! しよう

Twitter で