[JS]多彩なカスタマイズ、設置も簡単な画像の一部を拡大するスクリプト -Zoomy
画像の一部を拡大するスクリプトは数多くリリースされていますが、その決定版ではないか、というjQueryのプラグインを紹介します。 Zoomy デモページ [ad#ad-2] Zoomyの設置 Zoomyのオプション Zoomyの設置 Zoomyの設置は簡単で、ユーザビリティにも配慮されています。 使用する画像ファイル ページに配置する画像、拡大時に使用する画像、の2枚が必要です。 外部ファイル 「jquery.js」とZoomy用のJS, CSSファイルを外部として記述します。 <link type="text/css" rel="stylesheet" href="path-to/zoom.css"/> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.
HugeDomains.com
Captcha security check isenne.com is for sale Please prove you're not a robot View Price Processing
jQuery hoverZoom - a lightbox and gallery alternative
A lightbox and gallery alternative for jQueryThe demo Actions speak louder than words. So here is what you get (just hover over the images): The story One day i stumbled across http://www.sohtanaka.com/web-design/fancy-thumbnail-hover-effect-w-jquery/ and i liked the effect of the zooming images. But it has one big downside: When a zoomed image covers another thumbnail you can´t zoom that thumbnai
[JS]複数の商品写真を見せるのに適したコンテンツスライダー -FancyMoves
複数の商品写真を見せるのに適した、画像拡大にも対応したコンテンツスライダーのスクリプトを紹介します。。 画像を拡大表示したキャプチャ FancyMovesの特徴 滑らかなアニメーションで画像がスライド表示。 画像はスライドすると拡大・縮小表示。 スライダーの送りは、矢印・画像のクリック。 キーボード（矢印）操作にも対応。 画像は拡大表示が可能（FancyBox使用）。 FancyMovesのオプション スクリプトのオプションでは、下記の設定が可能です。 パネルのサイズ パネルで使用する画像のサイズ 見出し・本文の文字サイズ 移動距離 また、FancyBoxを使用しているので、そちらのオプションも変更できます。 FancyMovesでは下記のオプションを調整しています。 ズームイン・アウト時のスピード 不透明度 オーバーレイのカラー
[JS]背景画像をブラウザの枠いっぱいに広げて表示するスクリプト -fullscreenr
背景画像のアスペクト比を維持しつつ、ブラウザの枠いっぱいに広げて表示するスクリプトを紹介します。 デモではオプションで、ドットの画像をオーバーレイさせています。 スクリプトがオフ時の表示 fullscreenrの実装 fullscreenrはjQueryのプラグインのため、実装にはjquery.jsが必要です。 HTML 当スクリプト（jquery.fullscreenr.js）とjquery.jsを外部ファイルとして記述します。 <script src="js/jquery-1.3.2.min.js" type="text/javascript"></script> <script src="js/jquery.fullscreenr.js" type="text/javascript"></script> JavaScript head内に下記のスクリプトを記述します。 <script
DivGrow jQuery Plugin – Easily make your DIV containers expandable & collapsable (with animation)
DivGrow jQuery Plugin – Easily make your DIV containers expandable & collapsable (with animation) I had the need for a number of divs on a page that would show a certain amount of content, then grow (animate) with a ‘show more’ button, and shrink back with a ‘show less’ button. There were solutions out there, but the ones I found were based on the number of characters in the text and had issues wi
[JS]水平・垂直など多彩なデザインが可能なDock風ナビゲーションのスクリプト -jqDock
水平タイプ、垂直タイプなど多彩なデザインが可能なMac OS XのDock風ナビゲーションを実装するスクリプトを紹介します。 下記のキャプチャは水平タイプのもので上から、上揃え、中央揃え、下揃えとなっています。 jqDock デモ [ad#ad-2] デモでは、HTML5, XHTML 1.0(Transitional, Strict), HTML 4.01(Transitional, Strict)のDoctype有り・無しごとの動作確認ができます。 下記では、その多彩なデザインをいくつか紹介します。 左から、Sleep Slide（アイドル時にスライドで隠れる）、Colourise（カラー）、ClickFreeze（クリックで固定）、ラベル表示 [ad#ad-2] スクリプトのオプションも豊富で、下記にいくつか紹介します。 サイトのデモではこれらのオプションが簡単に試せます。 acti
[JS]画像をさまざまなアニメーションで拡大表示するスクリプト -imgZoom
imgZoom デモ [ad#ad-2] imgZoomの主な特徴 lightbox風のインターフェイス（暗いオーバーレイ、次の画像へのスイッチ） CSS/HTMLベースでのカスタマイズ フェードや回転のアニメーションで画像を拡大 ズームイン、ズームアウトのAPIの提供 jQueryのプラグインとして動作する軽量（7KB）スクリプト imgZoomの実装方法 外部ファイル 下記の3ファイルを外部ファイルとして記述します。 <link rel="stylesheet" type="text/css" href="css/imgzoom.css" /> <script type="text/javascript" src="sc
Movable TypeでjQuery lightBoxプラグインを使う
2024年2月1日 拙作プラグインの譲渡について 拙作のMovable Typeのプラグインを、株式会社ワールドイズマインに譲渡いたしました。 長きにわたり拙作のプラグインをご愛顧いただき、ありがとうございました。 以前に書いた「ブログ簡単パワーアップ Movable Type4 スーパーカスタマイズテクニック」という本の中で、Liteboxを使って画像を表示する方法を紹介しました。 この件に対し、「Movable Type 5でLiteboxを使うにはどうすれば良いのか」というご質問をいただきました。 Liteboxはprototype.jsベースのJavaScriptですが、現在ではjQueryを使うことが多いかと思います。 そこて、Liteboxの代わりに、jQueryのlightBoxプラグインを使う方法を紹介します。 なお、クラシックブログテーマを使ってカスタマイズを行いますので
Apple-like Retina Effect With jQuery
Apple has long applied a winning strategy in marketing - create well designed products, have a dedicated fan base, and let the hype build up before every product release. This is also the case with the latest version of their iPhone. But what I found interesting is the term they coined - "Retina display" and the promo image accompanying it. What made me wonder is if it was possible to turn this st
jQuery Image Scroller Plugin | Viget
Building websites for PUMA has given me the opportunity to do some pretty cool stuff. The latest feature was dreamed up by Owen, and it turned out to be pretty easy to do with JavaScript. These large individual product images work great for products like shoes, but when we needed to introduce clothing items we couldn't fit the entire product in without shrinking the image down until it was too sma
Polymaps
A JavaScript library for image- and vector-tiled maps using SVG. Polymaps is a free JavaScript library for making dynamic, interactive maps in modern web browsers. Polymaps provides speedy display of multi-zoom datasets over maps, and supports a variety of visual presentations for tiled vector data, in addition to the usual cartography from OpenStreetMap, CloudMade, Bing, and other providers of im
[JS]後発だけに一味違う高性能なツールチップのスクリプト -Poshy Tip
Poshy Tip - jQuery Plugin for Stylish Tooltips デモページ ツールチップのスクリプトは既に多くリリースされていますが、このスクリプトはかゆいところに手が届くような便利な機能が豊富に備わったものとなっています。 まず、一番の特徴となるのは、背景に画像を使用している点です。画像はサイズが1024x768pxの大きなもので、これによりツールチップの拡大縮小表示が可能となっています。 また、画像を変更することで、好みの背景に簡単に変更できます。
指定したセレクタ内の文字サイズの拡大/縮小に超便利な「FontScale」:phpspot開発日誌
Plugins | jQuery Plugins 指定したセレクタ内の文字サイズの拡大/縮小に超便利な「FontScale」。 $(element).fontscale('p', 'up', {unit:'px', increment:1}); のように記述するだけで、element 内のフォントサイズが簡単に大きくできます。 upをdownに変えれば縮小させることが出来ます。3番目の引数で、単位と増加量を指定できるので細かな調整が可能。 文字を大きくする、小さくするといった操作を簡単に実装できてしまいます。 拡大・縮小の他にも、リセット機能があるので、大きくしすぎてしまっても安心です。 リセットする場合は、$(element).fontscale("p","reset"); のよう呼び出してあげるだけです。 関連エントリ コンピュータに指定フォントが入ってるかチェックできるjQueryプ
[JS]ドラッグベースのいろいろなインターフェイスが実装できるスクリプト -Dragdealer JS
Dragdealer JS デモ スクリプトはjQueryなど他のスクリプトに依存せずに動作し、圧縮版は12KBと軽量なものになっています。 以下に公開されているデモを紹介します。 シンプルなスライダー
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
http://ti.y1.ru/retina/
[JS]ダイナミックにウェブサイトをナビゲートするスクリプト -jQuery Panel Magic
Mapbox
Web Design and Development Blog - APL - Andrew Lowndes
unwrongest.com