［JS］画像をスライドショーさせるスクリプト | CSS Lecture

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

Category
： Javascript

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

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

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

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

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

demo

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

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

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

2009 01-07 19:40 PM

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

2010年03月01日 19:05

vzzv

MIYAさん　こんにちは。

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

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

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

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

2010年03月01日 18:38

vzzv

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

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

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

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

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

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

2010年03月01日 14:54

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

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

2010年03月01日 10:58

vzzv

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

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

2010年02月28日 00:31

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

2009年01月21日 01:03

初めまして

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

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

ありがとうございます。

2009年01月20日 20:24

2010年

2009年

2008年