[Bxslider]スライドショーが正常に動作しない、設置できない場合の対処法まとめ
以前このサイトの記事にて、jQueryで動作するスライドショー「bxSlider」の簡単な設置方法について解説しました。 すると、一部の方々から、スライドショーが正常に動作しないとの報告を少なからず頂きます。 そこで今回は「bxSliser」のスライドショーに関して、 「設置はできたがスライドショーが動かない」 「スライドショーに不自然な余白ができてしまう」 といった場合の対処法についてまとめてみました! スライドショーが正常に動作しない場合の対処法 対処法① jQuery実行コードの書き換え 正常に動作 ...
ホームページにサムネイル付きスライドショーを簡単に設置する方法(jQuery)
ホームページやブログに設置した「bxslider」のスライドショーに簡単なカスタマイズを施して、 下に各スライドの画像が表示される"サムネイル付き"のスライドショーにする方法について解説します! ▼実装例(このようなデザインのスライドショーが設置できます) 既にjQueryによるスライドショーが設置できている事が前提となりますので、初めてスライドショーを設置する方は、以下の記事を参考にスライドショーを設置しておいてください。 htmlへの記述 すでに「bxslider」のスライドショーが設置出来てる方はh ...
クリックでその場に画像を拡大表示!ホームページに「LightBox」機能を実装する方法
画像をクリックすると、 別ページに飛ぶことなくその場で拡大表示してくれるjQueryの有名プラグイン「LightBox」を ホームページに実装する方法について、簡単に解説します! ▼ 実装例(画像をクリックすると拡大します) ①「LiteBox Plus+」プラグインのダウンロード 「LightBox Plus+」のダウンロードサイトへ行き、下の方にスクロールすると見える Downloadボタンを押して「lightbox_sample.zip」という.zipファイルをダウンロードしてください。 ダウンロー ...
ページのスクロールに合わせて付いてくるサイドバーを実装する方法
色々なホームページでよく見かける、"ページのスクロールに合わせて付いてくるサイドバー" を実装する方法について紹介します!(Ggoogle Chrome, IE11動作確認) 具体的にどんな感じになるかについては、PC表示にしてこのページのサイドバーに注目しながらページを下の方に スクロールしてみてください。 スクロールすると、それに合わせて一緒についてくると思います。 ① Jqueryプラグインのダウンロード この機能を実装するためにはJqueryの「Sticky」というプラグインを導入する必要がありま ...
超簡単!ホームページにスライドショー機能を実装する方法(JQuery)
自分のホームページに画像がどんどん移り変わるスライドショー機能を追加して賑やかにしたい! という方々のために今回、超簡単にスライドショーを設置する方法をご紹介します! ちなみに導入に成功すると↓このようなスライドショーが実装されます(GoogleChrome, IE11, IOS動作確認) ▼こちらのスライドショーもおすすめ! スライドショーの簡単な設置方法 まずは「bxSlilder」さんのサイトで配布されている JQueryのプラグインファイルをダウンロードしてください(画像の赤枠部分からダウンロード ...