日記ブログ、または雑多なメモ
2014年1月13日

ポップアップ+lazyload機能付き埋め込みギャラリー改造さらに続編 /swipeshow(javascript)





 続編というか直しというか、
オーバーレイ表示をわざわざdiv+imgをappendしていたのをdivだけにして、画像はdivのbackground- imageのcss指定に変更。

。。。 ん?だけか?

あとは繰り返し使う部分を外部関数化してみたり、オーバーレイ表示にタイマーで時間差を入れてみたり
……やっぱり汚いコードだなぁ。
誰かキレイにまとめあげてくだちい。


一応完成。
*swipeshowのプラグイン的なモノ*
【主な追加機能】
画像の逐次ロード(lazyload)
画像自動リサイズ
読込中、file not found時のオーバーレイ表示

swipeshow一部追記ソース(改行してるところが追記部。 本体コード自体は改造なし)
jquery.swipeshow.min-c.js (deleted)
lazyload追加コード(ヘッダに埋め込むとまともに動かないのでbodyから呼び出すこと)
slideshow.lazyload.js (deleted)

css
slideshowlLazyload.css (deleted)

サンプル(画像1枚目はわざと404 not found)
test-slideshow.htm (deleted)

「待機中」画像 (deleted)
「読込中」画像 (deleted)
「ローディングくるくる」画像 (deleted)

ちなみに改造元のslideshowは 氏作のMITライセンスオープンソースコードです。


*おまけ*
fancybox直呼び出しonclick wrapper
【機能】
fancyboxで表示させたいものを
<div class="mypopup" rel="URL">もの</div>
で、囲うとクリックでfancyboxが起動して「URL」を表示してくれるラッパー
【特徴】
標準のonclickだとクリックとドラッグが同時発生することがあるがそれを抑制する
タッチデバイス対応
onclick.wrapper.js (deleted)
サンプルは上記のswipeshowと一緒になってるのでそちら参照



それにしても、z-indexを使うとopacityが使えず、opacityを使うとz-indexが使えないのね……
常にドラッグしたいメインのopacityが1の要素の上に何かをopacity1以下にしてオーバーレイ表示すると、いくらz- indexを設定していようが、そのopacityが1以下のオーバーレイ表示の方にマウスカーソルのフォーカスが行ってしまうという。 スマートな回避方法があってもいいと思うんだが、特に見つけられなかったので、

オーバーレイ表示のopacity設定は0か1のみ。 0の時は同時にhideする

とやるしかなかった。 今回はたまたま本体画像とオーバーレイ表示「読み込み中」の存在の関係が排他的なのでよかったけども、画像の上にキャプションをopacity使って半透明表示、とかいうのはよくありそげなシチュエーションだと思うが、その場合キャプション部分がクリッカブルになってしまうのは今の自分の知識では避けられない。 回避方法はあるんだろうか。


ふーむ。 ちょっと思いついて当たり前っぽいことをやってみたが、なるほど。
<div> //親これにjavascriptでオーバーレイappend
  <div>各スライド</div>
  <div id='overlay'></div> // で、ここに挿入される?
</div>
とやっていてマウスのフォーカスをオーバーレイに持って行かれていたが

<div> //親
 <div id='overlay'></div>
  <div>各スライド</div>
</div>
こうやってHTMLでこの位置に埋め込んでおくと、オーバーレイのopacityを1以下にしてもz-indexが適用されてマウスのフォーカスは各スライドの方に行く模様。

まあ、解決か。 下のパターンの場合のappendの仕方がわからないので直接HTMLに埋め込んだが、
<div id='オーバーレイID'></div>
を足すだけでしかもソースは短くなるのでこっちのほうがスマートかもだ。

ついでに外部関数化完了。
もういじらん!
原稿描く!



コメント欄
(投稿なし)

コメントなどありましたらこちらからどうぞ
名前
内容
 ※名前、内容ともに入力必須です
- C'sGallery Blogっぽく見えるシステム3.2 -
小武 (管理人) eta2@tim.hi-ho.ne.jp