2019.12.31スポンサーリンクこの記事では、サムネイル付きの画像ギャラリーにスライダー機能をつけたい時に便利なjavascriptプラグインFOTORAMAをご紹介しています。この記事は、商品ページなどで商品画像が多い時にサムネイルを表示しつつ商品画像はスライダーで切り替えたいていスマホでスワイプで切り替えたいフルスクリーンでも同じような操作性が欲しいと思ったときに色々探した結果、FOTORAMAが一番簡単だったので、その時の導入方法をまとめたものです。FOTORAMAにはサムネイル表示する機能がありますが、別途自前でサムネイル表示させている場合に、サムネイルクリックでスライダー表示位置を切り替える方法についてもご紹介します。最近では、画像スライダーといえばslickかswiperという流れですが、サムネイル付きギャラリーでスライダーもつけたい時に、slickとかswiperを使うと結構面倒です。以前、slickでサムネイル付きスライダーの実現方法について以下の記事でご紹介しました。スライダーをサムネイルと連動させて切り替える方法この記事は、slick.jsでslickGoToを使用したら反応が悪い?と思ったときにチェックしたいslick.jsのオプション(waitForAnimate)について記載しています。この記事を読むことでslick.jsのslickGoT...nldot.info2019.09.22この方法は、便利なのですが、商品紹介ページなどのすでにあるHTMLに組み込もうとした時に、既存のstyleが邪魔してうまくいきませんでした。FOTORAMAの入手先FOTORAMは以下の公式サイトから入手できます。a...fotorama.ioでも、ダウンロードしなくてもCDNで読み込めるので、特にダウンロードしなくてもOKです。使い方は公式サイトにある通りにすればよく、とても簡単です。src="2.jpg"></div>HTMLを書く時の注意点FOTORAMAのHTMLの注意点imgタグじゃないとダメなようです。⇒ul/liタグやdivタグだとスライダーとして上手く認識しません。imgのsrcは必須です。⇒lazy-loadなどでsrcを使わない記述になっていると、スライダーとして上手く認識されません。ページ読み込み時にスライドが全て見えてしまうjsのスライダーによくある問題があります。その問題とは、ページ読み込み時にjsが読み込まれるまでの期間、スライド画像がすべて表示されてしまう現象です。javascriptをフッターで読み込むとHTMLが表示された後でスライダーが有効になるためです。この現象は、slickだとslick-initializedを使う方法で回避できますが、FOTORAMAの場合は決まった方法というのは無いようです。公式サイトに載っていた作者が提示した回避策は以下の通りです。}おそらく上記だと動かないので、以下の様なCSSの方が実情に合っているかと思います。考え方としては、FOTORAMA初期化前のHTMLの一枚目のスライド(img)だけ表示して、あとは非表示にします。ポイントは、直下セレクタを使っていることで、jsが有効になるとdivの階層が複数間に挟まるので、この指定はFOTORAMA初期化前しか意味を持ちません。FOTORAMAが有効になると存在しないセレクタになることを利用して、FOTORAMA初期化後に残っていても影響しない記述方法になっています。}よく使うオプション(スライダー)data-allowfullscreen=”native”全画面表示を有効にするオプションdata-nav=”thumbs”サムネイル表示を有効にするオプションdata-transition=”crossfade”スライダーの切り替えアニメーションの指定data-autoplay=”7000′′スライダーの切り替え時間よく使うオプション(スライド)data-caption=”説明”キャプションを入れる応用編:サムネイル画像とFOTORAMAを連動させるちょっとわかりにくいですが、FOTORAMAにあるサムネイル機能ではなく、slickでサムネイル連動スライダーを作成した時のようにサムネイルを自前で用意して、サムネイルがクリックされたらFOTORAMAのスライダーの表示を連動させるというものです。FOTORAMAのサムネイルは、一列しか表示できないので、スライダーとは別にサムネイルをすべて表示して、スライダーと連動させる場合には必要な処理になります。2015年のリリースから更新されていないためか、あまり話題にも上らないプラグインですが、古さも感じないとても使いやすいプラグインだと思います。SlickやSwiperだと複雑なオプション指定が必要ですが、FOTORAMAだととても簡単にレスポンシブに対応したサムネイル付きの高機能なスライダーを実現できます。大量の画像をスライダーで表示したいときには、とても便利なプラグインだと思います。最新情報をお届けします。この記事を書いた人ブーンはるばる日本よりオランダ王国へやってまいりました。自分の経験が少しでも参考になれば嬉しいです。お問い合わせは、『こちら』からお願い致します。国内シェアNo1の安定性と実績が魅力。SSDで死角なしの万能サーバー。【カスタマイズ】WordPressプロフィール欄にHTMLが書けるようにするWordpressにはあなたのプロフィールを記入できる箇所があります。実は、このプロフィール欄は自由にテキストを記入することができますが、HTMLタグを埋め込んでも初期状態だと無視されます。3.7以降は自動アップデートが有効になっているそうです。マイナー・セキュリティアップグレードに関しては何もする必要がありません。TOP3オランダではロリポップ!を使っている人を良く見かけますが、さくらインターネットがシェア一位です。オランダ国内のWebホスティングシェアについては別記事をご覧ください。7で作成したフォームは送信ボタンを押すとすぐに送信されてしまいます。送信前に内容の確認画面を入れたいときに使えるプラグインがあります。Migrationと言うプラグインがあります。このプラグインとても便利なのですが、2つ問題があります。confirmが動かない時に確認すべきポイントホームサイト運営スポンサーリンクブーンはるばる日本よりオランダ王国へやってまいりました。自分の経験が少しでも参考になれば嬉しいです。お問い合わせは、『こちら』からお願い致します。目次TOPへ情報スポンサーリンクブーンはるばる日本よりオランダ王国へやってまいりました。自分の経験が少しでも参考になれば嬉しいです。お問い合わせは、『こちら』からお願い致します。目次サムネイル付きスライダーの作成する方法FOTORAMAの入手先FOTORAMAの使い方HTMLを書く時の注意点ページ読み込み時にスライドが全て見えてしまう公式にあるけど動かない回避策FOTORAMA初期化前に画像が見えてしまう問題の回避策よく使うオプション(スライダー)data-allowfullscreen="native"data-nav="thumbs"data-transition="crossfade"data-autoplay="7000"よく使うオプション(スライド)data-caption="説明"応用編:サムネイル画像とFOTORAMAを連動させるjavascriptHTMLまとめタイトルとURLをコピーしました。