My Vector Space

人生は寄り道してなんぼ

JQuery

【TIPS】サムネイルプレビュー付きスライダー【 Sweet Thumbnails Preview Gallery 】

サムネイルプレビュー付きスライダー。 demo 記述の流れは、まず対象とする<img>タグにhtmlタグを追加して、以下のサイトから外部ファイルをダウンロードする。 http://tympanus.net/codrops/2011/01/19/sweet-thumbnails-gallery/ 外部ファイルの中からCS…

【TIPS】画像をオーバーレイで表示する「LightBox」プラグイン

「LightBox」プラグインはプロトタイプで動いているものが多いらしいけど、ここで紹介するものはJQueryで実装するもの。 手順は、ダウンロードしたファイルからスクリプトを任意の箇所に設置し、対象となる画像にタグを指定すれば完了。 以下、手順の詳細 画…

【TIPS】「FlexSlider」を使用して複数の画像をスライドショーさせる

「FlexSlider」を使用して複数の画像をスライドショーさせる手順をまとめておきます。 「FlexSlider」を設置する際に行なう作業は、以下の三箇所です。 ● htmlのhead内にJQuery本体と各ファイルを読み込ませる。 ● htmlのhead内にスクリプトを記述する。 ● b…

画面をスクロールさせて、指定した要素がトップの位置に来た時に固定表示させる方法

画面をスクロールさせて、指定した要素がトップの位置に来た時に、トップに固定表示させる方法をまとめておきます。 グローバルナビやサイドバーをはじめ、ページ途中にある要素を固定配置させたい時に便利です。 作業内容は以下の三箇所です。 ● htmlのhead…

JQueryを使うための準備 手順

JQueryを使うための準備についてをまとめておきます。 手順は以下のようになります。 1 スクリプトを動かすために必要な JQuery のファイル( 本体 )をhead 内に設置する。 2 プラグイン本体を設置し、色々なスクリプト(実行コード) を書いていく。 1. まずは…

PAGE TOP