Relocator

JavaScript

画像にマウスオーバーでタイトルがスライド表示するギャラリーを実装できるjQueryプラグイン「Relocator」

RelocatorというjQueryプラグインを使えば、画像にマウスオーバーした時にタイトルをスライド表示させるギャラリーを実装することができます。実際のデモではマウスオーバーすると下から上に向かってタイトルがスライドしてきます。画像にちょっとしたアニメーションを付け加えたギャラリーを作る際に役立ちそうですね。

[ads_center]

Relocatorの使い方

Relocator

こんな感じでマウスオーバーすると画像上にタイトルが表示されます。

$(document).ready(function(){
    $('#relocator').relocate({
        title: true,
        highlight: true,
        direction: "top",
        speed: 250,
    });
});

画像はリサイズされるので、サイズを合わせて整列させたレイアウトのイメージギャラリーを作ることも可能です。プラグイン自体が軽量なところも嬉しいですね。

Relocator

関連記事

  1. Nivo Lightbox

    JavaScript

    Lightbox系のレスポンシブ対応のjQueryプラグイン「Nivo Lightbox」

    シンプルでレスポンシブにも対応しているLightbox系のjQuery…

  2. jQuery googleslides
  3. JavaScript

    Lightbox風のjQueryプラグインColorBoxの使い方

    綺麗なイメージギャラリーを簡単に設置できるColorBoxの使い方の紹…

  4. Easy Z modal

    JavaScript

    シンプルなモーダルウィンドウ・ダイアログボックスを表示できる「Easy Z modal」

    Easy Z modalはシンプルでダイナミックなモーダルウィンドウ・…

  5. Viewer

    JavaScript

    画像の拡大や縮小、回転などができるイメージギャラリー「Viewer」

    Viewerは画像の拡大や縮小、回転、上下左右の切り替えといった機能を…

最近の記事

  1. macOS Mojaveのダークモード
  2. Olli
  3. 単語帳メーカー(Flashcard Maker App)
  4. 1Password 7

Facebookページ

PAGE TOP