[JS]画像をスライドショーさせるスクリプト

JavaScriptスライドショーさせるスクリプト

クリック後に画像の切替やテキスト表示の切替、サイドにあるアイコンで画像をスライドさせるスクリプトについてWeb Development Blogさんで配布されていたのが気に入ったので紹介しておきたいと思います。

…ここからが続き

使い方やサイズ変更について

スクリプトのダウンロードについてはAnimated JavaScript Slideshow - 5KB下にClick here to download the source.って場所があるので、そこから一式ダウンロード出来ます。

コンテンツの幅を変更とかしたい際に何処のCSSを変更すれば良いのか画像でまとめてみたので参考にでもして下さい。

demo

上記画像で説明した通り、横幅を変更したければ「#fullsize」「#information」「#slidearea」に指定されているwidthを任意のサイズに変更して下さい。

後下に小さく表示されている画像が「thumbnailsフォルダ」へ拡大画像に関しては「photosフォルダ」にあげるようにして下さい。

これだけでけっこう簡単に使えちゃうので、もし使う機会があれば是非使ってみて下さい。

Comments

MIYA

MIYA

mogeさん。

おそらくですが、スクリプト内の
slideshow.info="information";
を削除して検証して頂けないでしょうか?

それのみでいけるかもしれません。


最悪邪道ですが、CSS
#information { display:none; }
でいけるとうは思いますよ。

2010年11月01日 15:00

moge

moge

初めまして

とても分かりやすいのでこのスクリプトを使わさせて頂きたいのです。

不明な点があるのでどなたか教えて頂きたいのですが、h3とpタグの部分を省いて画像だけで使用しようと考えています。
この箇所(h3とp)を消してしまうと画像の部分が表示されなくて困っています…スクリプトをいじればいいのでしょうか?

2010年10月31日 19:01

DAI

DAI

初めまして

インラインフレームで使用する場合、1htmlの中に2html(スライドショー)を使用しようと考えています。

インラインフレームで表示は可能なのですが、
ターゲット指定をしてもインラインフレーム上にしか表示されません。

どのようにすれば新しいウィンドウを開いたりできますか?

2010年06月19日 11:49

KONI

KONI

MIYAさん、はじめまして。
いつも参考にさせていただいてます。

こちらのスクリプト、非常に簡単に設置できたのですが、1ページ内に複数のスライドショーを設置しようとすると、なかなか上手くいきません。

複数設置の方法をご教授くださいませ。
よろしくお願いいたします。

2010年04月12日 09:39

MIYA

MIYA

vzzvさん。帰ってから詳しく見てみようと思っていたんですが、早い解決出来たみたいでよかったです^^それと力になれずにすみません…。

2010年03月01日 19:05

vzzv

vzzv

MIYAさん こんにちは。

本家のコメントをみて、解決策を投稿している人がいたので、早速やってみたところうまくいきました。

1)透明gifファイルを作成し、imagesディレクトリへアップロード
2)CSSファイルへ
#imglink_fix {width:100%; height:100%; background-image:url(images/fix.gif);}
  を追加
3)HTMLのwrapper部分にある、
  を、
  に変更する。
4)ついでに不要かもしれませんが、JavaScriptの「slideshow.init」に"imglink_fix"を追加しました。

これで、IE6〜IE8まで動作しました。

お騒がせしてすいませんでした。
ご報告まで。

2010年03月01日 18:38

vzzv

vzzv

MIYAさん、早速のお返事ありがとうございます。

fullimageの部分なんですが、FFで確認すると画像のど真ん中に、リンクだよ〜って記す□に→のアイコンが表示されて、デモだと「#」にリンクされますが、IEの6,7,8で確認したところ、

1)カーソルがリンク状態にならない
2)リンク状態であるアイコンが表示されない

って感じになるようです。

でも、MIYAさんのIEでは正常に動作するようですね。IEの設定でしょうか。

私ももうちょっと調べてみます。

2010年03月01日 14:54

MIYA

MIYA

本家のデモでもIEではリンクが効かないとなっていますが、どの部分のリンクが効かなくなっているんでしょうか?

自分で確認した所そのような現象を見れない状態ですので…

2010年03月01日 10:58

vzzv

vzzv

紹介有り難うございます。
是非利用してみたいと思います。

ところで、テストで設置してみたのですが、IEではリンクが効かないようです。
本家のデモも同じでした。
IEの設定が必要なのでしょうか。

2010年02月28日 00:31

MIYA

MIYA

参考になれてうれしいです^^

2009年01月21日 01:03

lucky

lucky

初めまして

画像をスライドショーさせるスクリプトを

ホームページで使用させていただきました。

ありがとうございます。

2009年01月20日 20:24

Comment Form

※コメントが認証されるまで、コメントは反映されません。ご了承くださいませ。


(公開されません)
 
Captcha

画像の中に見える文字を入力してください。

page top へ

Sponsor

  • heteml
  • Movable Type

Category

Recent Article

2011 04-05
iPhone スマートフォンサイトのデザインのまとめ
2011 04-04
スマートフォン対応にしてみました
2011 04-01
CSS3 要素を透明に出来る Opacity と RGBa の使い方
2011 03-31
サイトリニューアルしました
2010 12-01
CSS3 でボタンを作る為のテクニック、サンプル集
2010 11-24
綺麗でリッチなフッターデザイン集のまとめ 60
2010 11-18
緑と黒色を使った Webデザインのサイト 25
2010 11-10
知っておいた方が便利なエクセルの知識

Recent Comments

Archive

2011年
2010年
2009年
2008年

Related Article