最近、スライドショー何回か依頼されております。
最近使ったもの・・・・ライブラリ名だけ。
○ SudoSlider デモ
○ FlexSlider2
・
・
・
○ 自作
かなり試したけど忘れてる・・・アカンｗ
なかでも上記２つが最終的に残りました。
いろいろいじってみると 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 —-
デモを変更しました！
●●●●●●●● のようなコントロール並びに「＜」と「＞」のコントロールが以前のバージョンでは出ていませんでした。
その修正を行いました。
どうぞよろしくお願いいたします。
コメント Comments
コメント一覧
必ず微糖 がコメント
2014年5月23日 11:00
できました～。
感謝感激です。
ありがとうございました。
さとう がコメント
2014年5月23日 11:03
良かったです！・・・というかこちらも昔のサンプルとはいえ修正することが出来ましたのでありがたく思っています。今後ともどうぞよろしくお願いいたします。
管理者（さとう） がコメント
2014年5月22日 18:38
なるほど！そういうことですね。
こちらのサイトにくわしーーーく載ってました。
http://sterfield.co.jp/designer/%E3%82%B9%E3%83%9E%E3%83%BC%E3%83%88%E3%83%95%E3%82%A9%E3%83%B3%E5%AF%BE%E5%BF%9C%E3%81%AE%E7%94%BB%E5%83%8F%E3%82%B9%E3%83%A9%E3%82%A4%E3%83%80%E3%83%BC.html
わかりました。
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"); }); }, controlNav: true, directionNav: true, //trueで前へ、次へを表示 }); });これで●●●●●●を表示できそうです・・・が、サンプルでは画像サイズの統一がないので出てこない位置にあったり z-indexあたりが変だったりしてそうです。
サンプルではない FlexSlider2をダウンロードしてそこのサンプルに
LazyLoadを組み込む方が良いかもしれません。
サンプルテキトーでした。すみません。
CTRL+AとかCommand+A とか押すと●●● が表示されてそうなところに四角い残骸があるのがわかります・・・。
ソースを見ると
となっているところが、そうです。
お確かめください。
必ず微糖 がコメント
2014年5月22日 17:47
すばやい対応ありがとうございます。涙・・
勘違いしていました。
写真のしたによくみかける、何枚目の写真を表示しているかわかる
●●●●
みたいなのを表示させたいのですが・・・できますでしょうか？
flexsliderで調べてみるとjavascriptの記述で
$("document").ready(function(){$('.flexslider').flexslider({/*ここの部分にオプションを記述できる*/
animation: "slide",animationLoop: false,itemWidth: 100,maxItems: 2,itemMargin: 0});});いろいろオプションを記述できるので
<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>
の中にflexsliderのオプションを記述すれば
●●●●みたいのが表示されるのかな？と思ったのですが・・・
できなくて悩んでおります。
すみません。知識がないもので可能でしたら教えて頂けないでしょうか？
管理者（さとう） がコメント
2014年5月23日 06:21
原因究明＋デモの修正＋ダウンロードファイルの置き換えを行いました。
やはり、昔作ったデモがテキトーだったです。
今回あらためて FlexSliderの最新版をダウンロードしそこにLazyLoad組み合わせ、補正をかけて作りなおしました。
ダウンロードしてみてください！
よろしかったらFacebookページ・Googleページへのいいね！をお願いします！
管理者 （さとう） がコメント
2014年5月22日 17:23
コメントありがとうございます！！
というのがどういう状況かわからないのですが、このサンプルでは
ひたすら
このタグを HTMLのボディの表示位置に出しています。
ご使用されているカルーセルがHTMLのbodyタグ内にイメージタグを羅列しているタイプであれば同様にご利用いただけると思います。
あとは、状況としてはすでに「jQuery(document).ready(function()」という記述がある・・・ということでしょうか。
その場合はその ready( の対になっている ); 閉じカッコセミコロン の後に改行を入れてコピペすれば動くかもしれません。
ready何個か書いても動いたと思います。※検証してません。すみません。
必ず微糖 がコメント
2014年5月22日 17:14
検索して１時間・・・やっと自分がしたいと思っていることを
先にしている人にあえました。
サンプルをダウンロードさして頂いたのですが、さらにカルーセルを表示する事は可能でしょうか？
jQuery(document).ready(function()のどこにかけばいいのかわかりません・・・
教えていただけますでしょうか？
そもそもできますでしょうか？
いろいろ試行錯誤しているのですが・・・
現在までできておりません