WPやっててアイキャッチ画像の拡大は大きなテーマでしたが、ほかの機能とぶつかったり動作がいまいちだったり、ありそうでなかなかいいのが見つかりませんでした。
今回、設置も超簡単で動きもスムーズ。（今のところですが）他の機能とぶつからない秀逸なjQueryを見つけたので記録しておきます。
名前は「Lity」。
HTMLのヘッダーに
<link rel="stylesheet" href="lity.min.css">
<script src="lity.min.js"></script>
それとjQuery本体を読み込み
リンクタグに
<a href="画像URL" data-lity="data-lity"><img src="画像URL"></a>
として「data-lity="data-lity"」を記述するだけ。
今回、ほかの機能として「bxslider」や「waypoints」等を設置するためjQueryは
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js">
としました。
問題なく動作してます。
「Lity」の設置はこちらを参考にさせて頂きました。
ついでに、固定表示しているヘッダーナビと買い物カゴボックスが上に出てしまったのでz-indexを増やしたのですが、今まで”999999”くらいが上限と思っていたのが実は
-2147483647から2147483647
とのことでした。
こちらを見させていただきました。
アイキャッチ画像拡大機能追加で
・トップページのスライダー「bxslider」
・スクロールでふわっと出てくる「Waypoints」
・カートシステムの「Welcart」（カートない表示ボックスも固定表示）
・ヘッダーのグローバルナビと”ページのトップ”がスクロールで移動するちょっとしたパララックス
・Perlで組んだリクルート募集システム
それと今回の
・アイキャッチ画像拡大
の６つの機能がそろいました。
あと、できれば予約システムも、と思っていますが、こちらはウェブで完結させるにはかなり高度な技が必要そうなので検討中です。
しかし、すべて無料でここまでできるとは。。
0 件のコメント:
コメントを投稿