2008年03月19日

2008年02月22日

画像拡大表示スクリプト「Lightbox Plus」

「Lightbox JS」の追加機能版「Lightbox Plus」を試してみた。

Lightbox JS
http://www.huddletogether.com/projects/lightbox/

Lightbox Plus
http://serennz.sakura.ne.jp/toybox/lightbox/?ja


posted by localghost at 11:23| WEB(HTML,CSS,Javascript,DHTMLなど)

2008年02月09日

シンプルで軽快に動作する画像拡大スクリプト -FancyZoom

以前、「Javascriptを使ってサムネイル画像をポップアップ拡大表示する」というエントリーを書いたが、これより軽快かつ簡単な画像拡大スクリプトが下記で紹介されていたのでチェック。

[JS]シンプルで軽快に動作する画像拡大スクリプト -FancyZoom | コリス
http://coliss.com/articles/build-websites/operation/javascript/803.html

外部スクリプトはウェブページのルートディレクトリ("/")直下に置くようになっているが、ブログに書く場合はルートディレクトリがわからない場合もあるので、任意の場所においてフルURLの絶対パスで読み込むよう変更した。拡大画像のサイズはブラウザのその時の表示可能エリアに合わせて自動調節されるので、元画像の大きさを気にしなくてよいところがすばらしいです。


ただ、IE6,7だと拡大画像周辺のドロップシャドウが効かないみたい。FirefoxではOK。
posted by localghost at 11:13| WEB(HTML,CSS,Javascript,DHTMLなど)

2008年01月28日

ウェブページの画像が動き回るブックマークレット

もとネタは↓
裏ワザ?バグ?Googleで検索した画像が踊りだす技
http://news.ameba.jp/hl/2007/11/8504.html
(前略)
Googleで画像検索をした後、「javascript:R=0; x1=.1; y1=.05; x2=.25; y2=.24; x3=1.6; y3=.24; x4=300; y4=200; x5=300; y5=200; DI= document.images; DIL=DI.length; function A(){for(i=0; i<DIL; i++){DIS=DI[ i ].style; DIS.position='absolute'; DIS.left=Math.sin(R*x1+i*x2+x3)*x4+x5; DIS.top=Math.cos(R*y1+i*y2+y3)*y4+y5}R++}setInterval('A()',5 ); void(0)」というコードをアドレス欄に入力しEnterキーを押すと、検索された画像たちが列を成し画面上を動き回る
(後略)

試してみたら確かに列を成してブラウザ上を移動するが、スピードが速いためリンク画像を捉える(オンマウスしてクリックする)のが難しい。
上記コードをみると、移動間隔が 5(=5/1000秒) なので、ゆっくり動かしたい場合はこの数値を大きくすればいい。

実用性はあまりないが、退屈しのぎにこれで画像を眺めてみるのも一興かもしれない。
posted by localghost at 12:17| WEB(HTML,CSS,Javascript,DHTMLなど)

2008年01月19日

CSSでDivを天地左右中央に配置する方法

以前、「クライアント領域の中心(中央)に画像を表示する」というエントリーを書いたが、これと似たような方法で「CSSでDivを天地左右中央に配置する」という記事があったので引用して紹介。

■CSS

<style type="text/css">
body {
background:#ccc;
margin:0;
padding:0;
}
#wrap {
position:absolute;
width:500px;
height:100px;
left:50%;
top:50%;
margin-left:-250px;
margin-top:-50px;
background:#fff;
color:#999;
}
</style>

■HTML

<body>
<div id="wrap">locate div at the center vertically and horizontally.</div>
</body>

■以下がポイント

width:500px;
height:100px;
margin-left:-250px;(widthの1/2)
margin-top:-50px;(heightの1/2)

マイナスで半分のpxにするのがポイント


posted by localghost at 17:51| WEB(HTML,CSS,Javascript,DHTMLなど)

2007年12月03日

自分の写真を有名雑誌の表紙にしてくれるジェネレータ『MagMyPic』

百式」で見ておもしろいと思ったのでここにブックマーク

posted by localghost at 09:51| WEB(HTML,CSS,Javascript,DHTMLなど)