2009年01月05日

Highslideと格闘中

今、この記事を使って、実装しようと奮闘しているトコ。
なので、記事を閲覧されている方、タイミングによっては嫌ぁなことになってるかも。
ごめんね。

とりあえず、このSeesaaブログ、ファイルをアップロードする時、
フォルダを入れ子にできない・・・し、ガサっとまとめてアップロードできない。。。
しかたがないので、highslideフォルダを作成し、必要な気がする画像とJS,CSSをアップ。
んで、メインのHTMLに下記のようにJSとCSSを読み込む表記を追加。



<script type="text/javascript" src="http://illdemizm.up.seesaa.net/highslide/highslide.js"></script>
<script type="text/javascript">
 hs.graphicsDir = 'http://illdemizm.up.seesaa.net/highslide/';
hs.outlineType = 'outer-glow';
hs.wrapperClassName = 'borderless';
hs.restoreTitle = 'ドラッグで移動できます。クリックで元のサイズに戻ります。';
hs.registerOverlay({
overlayId: 'closebutton',
position: 'top right',
fade: 2 // fading the semi-transparent overlay looks bad in IE
 });
</script>
<link rel="stylesheet" href="http://illdemizm.up.seesaa.net/highslide/highslide.css" type="text/css" />
<!--[if lt IE 7]><link rel="stylesheet" type="text/css" href="http://illdemizm.up.seesaa.net/highslide/highslide-ie6.css" />
<![endif]-->


さてと、これで大丈夫かどうか、早速画像を貼ってみましょうか・・・


Highslide JS
水団の術





下記の記事を参考にさせてもらって頑張っているのよ。
小粋空間: Highslide JS でサムネイル画像を拡大表示する

nlog(n): Highslide JS をカスタマイズして使う

nlog(n): Highslide JS の表示を Lightbox JS 風にカスタマイズ

idly blog:Highslide JSで画像表示

 頭脳外部メモリー 「独学で趣味を満喫」:「Highslide JS」 設置説明 java script 

 頭脳外部メモリー 「独学で趣味を満喫」:「Highslide JS」 カスタマイズ 各種設定方法


タグ:js CSS 画像拡大
posted by ilm at 23:32 | Comment(2) | TrackBack(0) | WEB | このブログの読者になる | 更新情報をチェックする

CoRichブログランキングブログランキング・にほんブログ村へ 人気ブログランキング【ブログの殿堂】 人気ブログランキングへ ブログランキング【くつろぐ】


画像の拡大表示をしたいのだよ。

にほんブログ村 IT技術ブログへ

どうしても、大きい画像を表示したいのに、
3カラムにしているせいで、ここの記事部分の幅が狭い。

今までは、imagemove.jsとゆーのを使って
サムネイルからにょろ〜っとアニメーションしてその場で画像が大きくなるようにしていたんだが、
画像がデカ過ぎると、サイドのレイアウトがイヤぁなことになる。

ファイルをScribdに上げて埋め込んでみると、元画像がエクセルで横長に作った表なので、
やっぱりだいぶ調子悪い。
だって、そのコンテンツの中でスクロールしなきゃその表全体は表示されないんだもの。
拡大したら一気に見れないじゃん、表って。


ので、サムネイルを表示させといて、クリックで、
ページ内で(フローティング)で拡大してみようと画策する。
ウィンドウ内別窓作成ってヤツね。

FancyZoomは、
ページ内の画像全てに適用されてしまう。
画像を拡大したくない場合にはrel="nozoom"といちいち入れないといけないのがイヤだ。
全ての画像がデフォルトでそうゆー効果になるのではなく、
必要な画像の時だけに記述を追加するようじゃなきゃメンドウ。
アタシは、アンカーにclass="○○○"と入れて適用されるヤツが好きなのよぅ。
よって、却下。

Live ThumbnailRevealing Photo Sliderは、
今まで使ってたimagemove.jsと変わんないからダメ。

LightWindowPrototype Windowiz_zoomなんかめんどうで別に嬉しくないカンジ。

tjpzoom.jsCSS Photo ZoomHoverboxSuckerfish HoverLightboxは、
求めているものとだいぶ違う。

LightviewLightBoxGreyBoxThickbox
multiboxSexy LightBoxLeightboxLyteboxLiteboxSlimbox
Slightly ThickerBoxMOOdalBoxも別にヤじゃないんだけど、なんかな〜

ModalboxControl.Modalはさらにアレだし。
100% CSSのPure CSS LightBox
Create a Lightbox effect only with CSS - no javascript neededってのも
同様にアレだしね。

というワケで、残ったのはiBoxFaceboxHighslide
で、別窓が移動できるHighslideにしよかな。

いや、本当は、Table、CSS、Javascriptを使って、
ソート可能な表を作ればいいだけなんだけどね。
画像として表示したいだけに、こんなしちめんどうなコトに・・・


*この記事は、
Lightboxスクリプトいろいろ | DesignWalker
を参考に色んなヤツを見てみました。

posted by ilm at 18:33 | Comment(0) | TrackBack(0) | WEB | このブログの読者になる | 更新情報をチェックする

CoRichブログランキングブログランキング・にほんブログ村へ 人気ブログランキング【ブログの殿堂】 人気ブログランキングへ ブログランキング【くつろぐ】


×

この広告は1年以上新しい記事の投稿がないブログに表示されております。