画像の切り替えやパネルの表示にフェード効果を使用したスライドショーのスクリプトをDynamic Driveから紹介します。
[JS]画像切り替えやパネル表示にフェードを使ったスライドショーのスクリプト -Fade-in slideshow
画像の切り替えやパネルの表示にフェード効果を使用したスライドショーのスクリプトをDynamic Driveから紹介します。
[JS]省スペース用に二種類のズーム機能を備えた画像スライダー -Portfolio Zoom Slider
Portfolio Zoom Slider with jQuery デモページ [ad#ad-2] ズーム機能は省スペース用に二種類実装されています。 一つ目のズームは上キャプチャのように、ホバー時にそのエリアのみズームで表示します。二つ目はクリック時に拡大画像をLightbox風エフェクトで表示します。
Pixiv画像をFirefoxでダウンロードする「Ank Pixiv Tool」 | 教えて君.net
イラストSNS「Pixiv」で公開されているフルサイズ画像を、Firefoxで簡単にダウンロードするアドオンが「Ank Pixiv Tool」。「絵師名 - 作品名.jpg」で画像を保存できるので後から探しやすいし、「8点以上をつけた画像を自動で保存」といった設定も可能だ。 参考：欲しいFirefoxアドオンが公開停止になっちゃって手に入らない。「Ank Pixiv Tool」なんだけど…… :教えて君.net Pixivでは、作品別ページには縮小版画像が表示されていて、縮小版画像クリックで開くページにフルサイズ画像が表示されている。フルサイズ画像を保存するのが面倒なのだが、「Ank Pixiv Tool」なら作品別ページから一発でフルサイズ画像をダウンロードできる。あらかじめ設定しておいたフォルダへ、保存ダイアログを出さずに画像を保存する設定や、「○点以上つけたとき、イラストをダウンロー
[JS]シンプルながら優れモノ！ホバーやクリックでさまざまなツールチップを表示するスクリプト -DarkTooltip
ツールチップ系のスクリプトは数多くありますが、これはなかなか使いやすそう！ トリガーはホバーだけでなくクリックにも対応、HTMLコンテンツの表示にも対応、カスタマイズにも優れており、カラー、サイズ、不透明度、表示方向、アニメーションのさまざまなエフェクト、Confirmからのイベントにも対応しています。 上段はサイズ、中段は方向、下段はアニメーション アニメーションなどの実際の動作はデモページでぜひ試してみてください。 DarkTooltipの使い方 Step 1: 外部ファイル jquery.jsと当スクリプト・スタイルシートを外部ファイルとしてhead内に記述します。 <head> ... <link rel="stylesheet" href="darktooltip.css"> <script src="jquery-1.10.2.min.js"></script> <script
[JS]複数のエレメントをスクロールしても指定した場所に留まらせるスクリプト -ハチ公
デモページ：一番下までスクロール 「Hachi, stay!」ボタンをクリックすると、復活します。 ハチ公の使い方 実装は非常に簡単で、複数の要素にハチ公を適用することもできます。 Step 1: 外部ファイル 「jqeury.js」と当スクリプトを外部ファイルとして記述します。 <script type="text/javascript" src="jquery.js"></script> <script type="text/javascript" src="jquery.hachiko.1.0.0.min.js"></script> Step 2: HTML HTMLは通常通りに実装し、ハチ公を適用するエレメントがスクリプトで指定できるようにidなどを付与します。 例：id=sticky <div id="sticky">Click me to see how the state i
[JS]雑誌をめくるようにぺらっと画像を表示するスクリプト -mLivre
雑誌をめくる「Pege Flip」のエフェクトで画像を次々に表示するjQueryのプラグインを紹介します。 mLivre デモ [ad#ad-2] mLivreの実装 外部ファイル 「jquery.js」と当スクリプトを外部ファイルとして指定します。 <script type="text/javascript" src="jquery-1.6.1.min.js"></script> <script type="text/javascript" src="jquery.mLivre.min.js"></script> HTML img要素をdiv要素で内包します。 <div id="demo1"> <img src="celestin/couverture.jpg" width="650" height="325" /> <img src="celestin/illustration2.jp
[JS]jQueryのプラグイン33+1選 -2010年3・4月
紹介済みから未紹介のものまで、jQueryのプラグイン34選です。 YoxView 画像をスタイリッシュに拡大表示するスライドショー。 Roundabout Shapes 複数のオブジェクトをさまざま
コンテナに画像がぴったり収まるように画像のサイズを変更するjQueryプラグイン・imgLiquid
画像を包括したコンテナに その画像がぴったり収まる ようにサイズを調整する、 というjQueryプラグイン。 必要になるか分かりません が、需要はありそう。 コンテナ一杯に画像を表示させる、というもの。 上が使用した状態、下が未使用です。下はコンテナに隙間があるのに対し、上はコンテナに隙間無く画像が収まっています。画像をメインとしたコンテンツでグリッドレイアウトなWebサイトなどにも良さそうです。 コード<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js" type="text/javascript"></script> <script src ="imgLiquid-min.js" type="text/javascript"></script>コアとプラグインを読み込みます。 $("
複数要素をランダムにフェードインさせられるjQueryプラグイン「champagne.js」:phpspot開発日誌
champagne.js | fresh tilled soil 複数要素をランダムにフェードインさせられるjQueryプラグイン「champagne.js」。 画像などの要素が一杯あって単に並べるより、アニメーションを加えて徐々に出すというのはまた違った印象が得られます。 ギャラリー的な物に実装してみるといい感じになるかもしれませんね。 ULリストを定義したら、<script>タグでchampagne.jsをインクルードして次のように呼び出せば実装できるお手軽さがいいです $("ul.champagne").champagne(); 関連エントリ フリーで使えるPHP製画像ギャラリースクリプト「PhotoShow」 Twitter Bootstrapを使ったイメージギャラリーサンプル フルスクリーンでぼかしがカッコいいHTML5ギャラリーを作るサンプル レスポンシブなPhotoギャラリー
写真上にコメントが載せられるjQueryプラグイン「iPicture」:phpspot開発日誌
Home - Tooltip your images - iPicture jQuery Plugin 写真上にコメントが載せられるjQueryプラグイン「iPicture」 写真の上に＋のアイコンをオーバーレイでき、マウスオーバーでコメントが表示されます。 写真上でそこまで邪魔にならないけどそれなりに目立ち、説明を読んでもらいたいような場合に使えそうです コメント表示例。半透明なのでそれほど嫌な感じでは無いですね 商品の説明等に使うと分かりやすい商品説明ページが作れるかもしれませんね 関連エントリ Flickrみたいに写真内に枠を作ってコメントできるようにするjQueryプラグイン CSSのみで画像に違和感なく注釈を入れるサンプル
画像の任意の箇所にツールチップを配置出来るjQueryプラグイン・iPicture
画像内の任意の箇所に自由にホバーで テキストを表示するツールチップを 配置出来るjQueryプラグイン・iPicture のご紹介。この手のライブラリは、 実務でかなり有効的に使えますので 覚えて置いて損は無いのでは。 画像上にツールチップを配置出来るライブラリです。ECサイトや不動産、ホテル、アミューズメント施設などなど用途は沢山ありそうです。 こういうやつ。画像の上にオブジェクトを配置してマウスホバーで情報が見られる。 ECサイトなんかでは、こうやって生活してる写真にしてあげることでユーザーはプロダクトを使用してるイメージをしやすくなりますので、訴求力アップに貢献できます。 コード<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></s
最近よくみる定番の動きは、だいたいこれで対応できるjqueryライブラリ | バニデザノート
ウェブデザインのなかで、 jqueryをつかった、さりげない「動き」をウェブサイト上で導入するのが 定番になりつつありますね。 ふわっと、ポップアップみたいに浮き上がってくるウインドウ、 画像やテキストのスライドなど 最近良く見るjqueryでつくる「動き」で、おすすめのライブラリをまとめてみます。 要素をスライドさせるならJquery.cycle.plugin 画像や、テキストなど、 非常にシンプルなhtmlソースを認識して対応してくれるプラグイン。 上から落ちてきたり、横にスライドしたり、フェードイン・フェードアウトしたり スライド番号をつけたり、スライド領域の要素の右左に矢印をつけたりもできます。 シンプルなdemo Even More Demosもオススメです。 オプション一覧はこちら → jquery.cycle.plugin ページ内ポップアップ、lightbox風表現ならfa
[JS]大量の画像コンテンツに便利！ サムネイルを自動生成するスクリプト -NailThumb
大きいサイズの画像から、クロップやリサイズなどして小さいサイズのサムネイルを自動生成するjQueryのプラグインを紹介します。 サムネイルはテキスト配置やさまざまなエフェクトにも対応しています。 jQuery NailThumb [ad#ad-2] NailThumbのデモ NailThumbの使い方 NailThumbのデモ NailThumbは元画像のアスペクト比を維持したまま、クロップやリサイズをしてサムネイルをスクリプトで生成します。 サムネイルはさまざまなフォーマットが用意されています。 キャプション テキストをオーバーレイで表示することもできます。 NailThumbの使い方 NailThumbの基本的な使い方は、サムネイル用のコンテナとサムネイルのサイズ設定です。 外部ファイル スクリプトとスタイルシートを外部ファイルとして記述します。 <script type="text/
[JS]デスクトップはそのまま、新しいiPad, iPhone4には高解像度の画像を配置するスクリプト -jQuery Retina
Retinaディスプレイを採用している新しいiPad, iPhone4用にimg要素で配置した画像を高解像度のものに変更するjQueryのプラグインを紹介します。 jQuery Retina Plugin jQuery Retina -GitHub [ad#ad-2] jQuery Retinaのデモ jQuery Retinaの使い方 jQuery Retinaのデモ jQuery Retinaを使って画像を配置する方法は大きく分けて、3つあります。 imgタグに「data-retina」属性を加える。 画像のファイル名に「-2x」を加える。 コールバック関数を使ってファイル名を指定する。 表示はどの方法を使っても一緒ですが、下記にそれぞれの方法で実装したデモがあります。 デモページ [ad#ad-2] jQuery Retinaの使い方 jQuery Retinaの使い方は簡単です。
[JS]直感的な操作性がたのしい、画像ギャラリーのスクリプト -Fotorama
デスクトップだけでなく、iPhoneをはじめとするスマートフォンなど、さまざまなデバイスに対応した画像ギャラリーを実装するjQueryのプラグインを紹介します。 Fotorama [ad#ad-2] Fotoramaの主な特徴 Fotoramaのデモ Fotoramaの実装 Fotoramaの主な特徴 Fotoramaはセットアップも簡単で、直感的な操作性が楽しい画像ギャラリーのスクリプトです。 メインの画像をスライドするにはいくつかの方法が用意されています。 矢印ボタンでメイン画像をスライド ドラッグ操作でメイン画像をスライド ナビゲーションでメイン画像をスライド サムネイルでメイン画像をスライド サムネイルもドラッグでスライドすることができます。 サムネイルもドラッグでスライド サムネイルのボーダーはアニメーションで動作し、読み込み時のエフェクトも用意されています。 Fotoramaの
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
[JS]jQueryのプラグイン33+1選 -2011年8月
何百件先の画像まで一気に検索してしまうインターフェイスを搭載したfirefoxプラグイン*ホームページを作
トイカメラ風にデジカメ画像を変換するPhotoshop用プラグイン : Gizmodo Japan（ギズモード・ジャパン）