最近のイケてるwebサービスは、見た目がカッコいい！と感じる、ユゲタです。
なんでカッコいいのか考えて見たら、イケてるアニメーションがされているんですね。
動画を使ったり、cssアニメで、コンテンツをグリグリ動かしたり、見ていて飽きないのがポイントなのかもしれませんね。
本日のIT謎掛け
「cssアニメ」と、かけまして・・・
「お正月の遊び」と、ときます。
そのココロは・・・
コマをイメージする事が重要です。
概要
先日、とあるwebサイト構築作業をしていた時に、画像のサムネイルが並ぶページを作っていて、それぞれの画像が小さくて見えにくいので、ポップアップして見るようにしようとしたところ、
クリックして、別タブで画像が表示されるのは、いちいちタブが増えるのが、うざいと感じるし、
スマホでピンチインしてみても、ページ内の構成が少し複雑になるので、
サムネイルを便利に扱いたいと考えて、「picview」というライブラリを作ってみました。
説明としては、「LightBox」と同じようなツールと考えるとわかりやすいと思います。
プログラムの軽量さと、設置の手軽さ、実行処理のスピードなど、かなり優位点があるので、メリットは大きいかと・・・
GithubでMIT配布
実際に、使ってみたい人は、githubにソースコードをアップしているので、お好きにcloneして使ってください。
https://github.com/yugeta/picview
使い方は簡単で、使いたいwebページのheadタグ内にライブラリを読み込んで、scriptタグで関数起動するだけです。
その時に、実行関数にオプション設定を付けてあげると、カスタマイズもできるので、便利に使えるでしょう。
使い方
gitデータ内のsampleをブラウザで実行すると、以下のような画面が立ち上がります。
マウスポインタでクリックすると、その画像が読み込まれると画面中央で、拡大表示されます。
アニメーションをさせて、見栄え良くなるようにしてみました。
設置方法は、元ページにscriptタグを貼り付けることができれば、コンテンツ内への設置は、ほぼいりません。
ただし、サムネイル画像と、表示画像を切り替える場合は、元エレメントに記述するか、起動オプションで指定するかのどちらかでセットする必要があるあります。
サムネイル画像と拡大表示画像を切り替える場合
サムネイル画像と、picviewで拡大表示させる画像を切替えたい場合は、何パターンかの設定を用意しています。
1. タグに直接記述
# 元画像の指定
<img src="sample.jpg">
# picviewで別画像を表示させる場合
<img src="sample.jpg" data-picview-src="sample_2.jpg">
2. 起動オプションで指定する
ページが画像表示固定で、静的である場合は、配列で別画像をセットしてから起動することが可能です。
# sample/index.htmlの設定
<script>
new $$picview({
target : ".img-lists img",
mouseover_action : true,
window_limit_weight : 0.95,
swap_images : ["001_view.jpg","","003_view.jpg"]
});
</script>
サンプルの場合は、1番目と3番目の画像を指定していて、2番めはブランクかnullにすることで、対象から外すことが可能です。
3. それ以外は、imgファイルのsrc属性をそのまま表示
targetで指定されているのが、imgタグである場合は、そのままにしておくと、勝手にsrc属性を読み込んでくれます。
ただし、サムネイルがcssのbackgroundを使っている場合や、divタグなどをしてしている場合は、上記2パターンの指定が必要になります。
