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

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

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

ここからが続き

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

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

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

demo

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

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

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

Related Article

Comments

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

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


(公開されません)