Highslide JS でサムネイル画像をクールにポップアップ | バシャログ。
実装 まずはサイトからファイルをダウンロードします。バージョンを選択し『Download now!』ボタンをクリック。遷移したページ内にある Highslide Download 項目から『Yes』をクリックしてファイルを保存します。 解凍したファイルから「highslide」フォルダを、実装するサイトのドキュメントルートにコピー HTML の<head>～</head>内に以下を記述 <script type="text/javascript" src="highslide/highslide.js"></script> <link rel="stylesheet" type="text/css" href="highslide/highslide.css" /> <script type="text/javascript"> hs.graphicsDir = 'highslide/gr
Highslide JS-サムネール画像を拡大表示するスマートなjavascript - WEBデザイン BLOG
サムネールをクリックすると同一ウィンドウ上に画像を表示するというjavascriptでLightbox JS・Lightbox が有名かと思います。以前からあまりスマートではないと思っていたら、スマートにしたタイプのHighslide JSが公開されていましたので紹介します。 Highslide JS-サムネールをクリックすると同一ウィンドウ上に画像を表示します。サムネイル画像をワンクリックで拡大画像表示、そして拡大画像をワンクリックでサムネイル画像に戻します。とってもスマートです。Lightbox JSよりも若干ストレスなく画像表示できます。 Highslide JS - JavaScript thumbnail viewer http://vikjavev.no/highslide/ IE 4.0・Netscape 4.79には対応していませんが、その他の最新ブラウザには対応しています
ThickBox 3.1
ThickBox is a webpage UI dialog widget written in JavaScript on top of the jQuery library. Its function is to show a single image, multiple images, inline content, iframed content, or content served through AJAX in a hybrid modal. Features: ThickBox was built using the super lightweight jQuery library. Compressed, the jQuery library is 20k, uncompressed it's 58k. The ThickBox JavaScript code and C
これはカッコいい、テレビのノイズ画面風背景のLightBox作成:phpspot開発日誌
Lights Out ? Dimming/Covering Background Content with jQuery | Build Internet! これはカッコいい、テレビのノイズ画面風背景のLightBox作成。 次のように、テレビのノイズ画面のような背景がアニメーションするカッコいいLightBoxの作成チュートリアル。 デモページ 単純に背景をGIFアニメーションにしているだけっぽいけど、なんかオシャレです。 1ネタとして覚えておいて損はなさそう。サンプルもダウンロード可能です。 関連エントリ ナビゲーションメニューを1歩進んだものに引き上げるjQueryチュートリアル集 無限に回転するカルーセルＵＩ実現用jQueryプラグイン実装チュートリアル jQueryやPHPを使った便利な仕組みのチュートリアル集
25 Detailed Tutorials for Coding Up Your Web Designs
One of the best ways to get into web design is to learn the process of transforming your Photoshop concept into a fully working coded website. Luckily there are various handy tutorials from across the web that document the process of writing a site with HTML and CSS in a step by step guide. This post pulls together the best web design tutorials for coding and also some PSD to HTML conversion tutor
dottony.com - dottony リソースおよび情報
This webpage was generated by the domain owner using Sedo Domain Parking. Disclaimer: Sedo maintains no relationship with third party advertisers. Reference to any specific service or trade mark is not controlled by Sedo nor does it constitute or imply its association, endorsement or recommendation.
Sign in - Google Accounts
Not your computer? Use a private browsing window to sign in. Learn more about using Guest mode
表示法が新しくセクシーなLightBox「SexyLightBox」:phpspot開発日誌
SexyLightBox - www.coders.me 表示法が新しくセクシーなLightBox、その名も「SexyLightBox」。 次のような、角丸で、表示時にアニメーションするLightboxが公開されました。 実装法もLightbox風に、アンカータグに属性をつけるだけでOKみたい。 関連エントリ スライドショー付きLightBox風イメージアルバムのサンプル jQueryベースのLightBoxクローン「prettyPhoto」 ＵＩがクールでサクサク使えるMacウェブギャラリー風画像ギャラリー「qGallery」 画像を同一Window内でスムーズにズームしてくれるJSライブラリ色々 LightBox風に角丸で可愛く画像をポップアップしてくれる「Facebox」 YUIを使ってLightBoxを実現するサンプル 自動で画像のスライドショーが可能なLightBox風ライブラリ
画像を同一Window内でスムーズにズームしてくれるJSライブラリ色々:phpspot開発日誌
画像を同一Window内でスムーズにポップアップしてくれるJSライブラリ色々。 LightBox風ではなく、クリックした画像がそのままズームイン、されるライブラリを紹介。 FancyZoom 1.1 - 最近リリースされたFancyZoom。クリックでアニメーションしながら画像がズーム Highslide JS - 以前にも紹介した、Highslide JS。FancyZoomと動きはほぼ同じ。 Live Thumbnail Demo - 画像をその場でズイズイっとリサイズ (参照記事: サムネイルと元画像の見せ方) 今回新しく紹介する「FancyZoom」は、スクリプトを読み込んで、初期化するだけで、<a href="大きい画像"><img src="小さい画像(サムネイル)"></a> のマークアップにズーム機能が追加されるという点で実装はすごく容易でマークアップも綺麗にできます。
複数のライブラリに対応したLightboxスクリプト -Shadowbox.js
Shadowbox.jsは、Prototype、jQuery、YUI、Extなど複数のJavaScriptのライブラリに対応した、画像や動画などを拡大表示できるLightbox風のスクリプトです。 Shadowbox.js Media Viewer デモ ダウンロード Shadowbox.jsは複数のライブラリに対応しているというだけでもすごいですが、画像や動画の拡大表示にもさまざまなオプションがあり、多数あるLightbox風スクリプトの中でも充実した機能を持っていると思います。 下記に主な特徴を挙げます。 拡大する際のコードは、簡易です。 <a href="image.jpg" rel="shadowbox">Image</a> 併用するJavaScriptのライブラリは、下記の中から好きなものを選べます。 jQuery Prototype + Scriptaculous YUI Ex
カスタマイズできる多機能LightBox「Lightview」:phpspot開発日誌
Lightview Lightview was built to change the way you overlay images on a website. カスタマイズできる多機能LightBox「Lightview」。 次のように、背景色を赤にカスタマイズしたりできるLightBoxの登場です。 背景色のほか、角丸の度合いや、灰色背景の描画ON/OFFとその透明度、zIndex、表示の際のエフェクトなどをカスタマイズ可能です。 インストールは、必要なCSS/JSを読み込んだ後、<img> タグの rel 属性に lightview を設定するだけ。 (例： <a href='image.jpg' rel='lightview'>My image<a/> ) スライドショーの機能なんかも実装されています。 関連エントリ LightBox風に角丸で可愛く画像をポップアップしてくれる「F
【ハウツー】ゼロからはじめるLightbox 2.0 - 簡単にWebで写真アルバム機能を (1) Lightbox 2.0とは？ | パソコン | マイコミジャーナル
Lightbox 2.0とは？ Lightbox 2.0はAjaxを利用して画像を表示するライブラリです。画像は単独の表示だけでなく、複数画像をグループ化してスライドとして表示させることもできます。 Lightbox 2.0の大きな特長としてスクリプト(プログラム)を記述しなくてよいという点があります。つまり、全くプログラムが分からない人手も気軽に使う事ができます。Lightbox 2.0ではHTMLの<a>タグのrel属性にlightboxの文字を記述するだけでできてしまうという手軽さです。また、JavaScriptのコードが実行できるブログであればLightbox 2.0を利用することができます。 Lightbox 2.0は作者であるLokesh Dhakar氏のサイトからダウンロードすることができます(*1)。 「Lightbox2のダウンロードサイト」 「Lightbox v2.0
自動で画像のスライドショーが可能なLightBox風ライブラリ「splash.image.js」:phpspot開発日誌
自動で画像のスライドショーが可能なLightBox風ライブラリ「splash.image.js」 2007年06月07日- Du cde chez Xuan - Ressources / Javascript / Splash (image plein ・ran et diaporama) 自動で画像のスライドショーが可能なLightBox風ライブラリ「splash.image.js」 画像をクリックするとそのウィンドウ内で画像を表示できるLightBoxで、スライドショーが可能なライブラリが公開されました。 右下にある、「次へ」「前へ」ボタンによって画像が送れるだけでなく、まんなかの「再生」ボタンで自動再生が可能です。 実装もLightBox同様に、必要なライブラリとCSSを読み込んだ後、アンカータグの rel 属性にグループ設定を書くだけです。 <!-- 必要ライブラリの読み込み --
様々なLightBox風ダイアログを超簡単に作れるJavaScriptライブラリ「Control.Modal」:phpspot開発日誌
様々なLightBox風ダイアログを超簡単に作れるJavaScriptライブラリ「Control.Modal」 2007年03月29日- Control.Modal : Unobtrusive CSS Modal Windows and Lightboxes for Prototype Control.Modal is a light weight, unobtrusive JavaScript library for creating modal windows and lightboxes using HTML that is already on the page, images, AJAX calls or iframes. 様々なLightBox風ダイアログを超簡単に作れるJavaScriptライブラリ「Control.Modal」。 LightBox は、同じウィンドウ内で背景
JavaScriptとLightBoxを組み合わせたスマートな写真の見せ方サンプル「Suckerfish HoverLightbox Redux」:phpspot開発日誌
JavaScriptとLightBoxを組み合わせたスマートな写真の見せ方サンプル「Suckerfish HoverLightbox Redux」 2007年02月21日- Suckerfish HoverLightbox Redux - Monday By Noon When the original Suckerfish HoverLightbox was published, I was honestly surprised at the amount of attention it received. JavaScriptとLightBoxを組み合わせたスマートな写真の見せ方サンプル「Suckerfish HoverLightbox Redux」。 次のような写真の見せ方のサンプルファイル(html+JavaScript+CSS)がダウンロードできます。 ↓ マウスオーバーで画像レ
画像の拡大プレビューを超クールに行える「Highslide JS」:phpspot開発日誌
Highslide JS - JavaScript thumbnail viewer Highslide JS, formerly Vevstein Thumbnail Expander, is a piece of JavaScript that streamlines the use of thumbnail images on web pages. The library offers these features and advantages: 画像の拡大プレビューを超クールに行える「Highslide JS」。 サムネイルをクリックするとそのまま画像がズームされ、影付きで写真を表示できます。 設置は次のように行います。 スクリプトインクルード <script type="text/javascript" src="highslide/highslide.js"></script>
Lightbox 2
Overview Lightbox is a simple, unobtrusive script used to overlay images on the current page. It's a snap to setup and works on all modern browsers. What's New in Version 2 Image Sets: group related images and navigate through them with ease Visual Effects: fancy pants transitions Backwards Compatibility: yes! How to Use Part 1 - Setup Lightbox 2 uses the Prototype Framework and Scriptaculous Effe
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Highslide JS - JavaScript thumbnail viewer
Lightboxスクリプトいろいろ - DesignWalker