［JS］画像をスライドショーさせるスクリプト
- Category ：
- Javascript
クリック後に画像の切替やテキスト表示の切替、サイドにあるアイコンで画像をスライドさせるスクリプトについてWeb Development Blogさんで配布されていたのが気に入ったので紹介しておきたいと思います。
…ここからが続き
使い方やサイズ変更について
スクリプトのダウンロードについてはAnimated JavaScript Slideshow - 5KB下にClick here to download the source.って場所があるので、そこから一式ダウンロード出来ます。
コンテンツの幅を変更とかしたい際に何処のCSSを変更すれば良いのか画像でまとめてみたので参考にでもして下さい。
上記画像で説明した通り、横幅を変更したければ｢#fullsize｣｢#information｣｢#slidearea｣に指定されているwidthを任意のサイズに変更して下さい。
後下に小さく表示されている画像が｢thumbnailsフォルダ｣へ拡大画像に関しては｢photosフォルダ｣にあげるようにして下さい。
これだけでけっこう簡単に使えちゃうので、もし使う機会があれば是非使ってみて下さい。
Comments
mogeさん。
おそらくですが、スクリプト内の
slideshow.info="information";
を削除して検証して頂けないでしょうか？
それのみでいけるかもしれません。
最悪邪道ですが、CSS
#information { display:none; }
でいけるとうは思いますよ。
初めまして
とても分かりやすいのでこのスクリプトを使わさせて頂きたいのです。
不明な点があるのでどなたか教えて頂きたいのですが、h3とpタグの部分を省いて画像だけで使用しようと考えています。
この箇所(h3とp)を消してしまうと画像の部分が表示されなくて困っています…スクリプトをいじればいいのでしょうか？
初めまして
インラインフレームで使用する場合、1htmlの中に2html（スライドショー）を使用しようと考えています。
インラインフレームで表示は可能なのですが、
ターゲット指定をしてもインラインフレーム上にしか表示されません。
どのようにすれば新しいウィンドウを開いたりできますか？
MIYAさん、はじめまして。
いつも参考にさせていただいてます。
こちらのスクリプト、非常に簡単に設置できたのですが、1ページ内に複数のスライドショーを設置しようとすると、なかなか上手くいきません。
複数設置の方法をご教授くださいませ。
よろしくお願いいたします。
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まで動作しました。
お騒がせしてすいませんでした。
ご報告まで。
MIYAさん、早速のお返事ありがとうございます。
fullimageの部分なんですが、FFで確認すると画像のど真ん中に、リンクだよ〜って記す□に→のアイコンが表示されて、デモだと「#」にリンクされますが、IEの６，７，８で確認したところ、
１）カーソルがリンク状態にならない
２）リンク状態であるアイコンが表示されない
って感じになるようです。
でも、MIYAさんのIEでは正常に動作するようですね。IEの設定でしょうか。
私ももうちょっと調べてみます。
本家のデモでもIEではリンクが効かないとなっていますが、どの部分のリンクが効かなくなっているんでしょうか？
自分で確認した所そのような現象を見れない状態ですので…
紹介有り難うございます。
是非利用してみたいと思います。
ところで、テストで設置してみたのですが、ＩＥではリンクが効かないようです。
本家のデモも同じでした。
ＩＥの設定が必要なのでしょうか。
参考になれてうれしいです＾＾
初めまして
画像をスライドショーさせるスクリプトを
ホームページで使用させていただきました。
ありがとうございます。