スライドショーの使い方について教えてください！

2023/08/10 09:38

このQ&Aのポイント

画像をクリックすると、画面全体がグレーになり、真ん中に絵が表示される仕組みを使いたいです。
最初から下部に「Prev」「Next」の画像を配置することはできるのか、教えてください。
画像表示時に白い部分の大きさが動かないスライドショーで、「Prev」「Next」が最初から表示されているものを探しています。

ベストアンサー

スライドショーの使い方について教えてください！

2010/11/21 15:32

http://www.serinori.com/gallery.html http://www.ohmorimika.com/p-work.html ↑ こちらのサイトでやられているように、画像をクリックすると画面全体がグレーになって真ん中に絵が表示される仕組みを使ってみたいと思っています。色々試行錯誤をやって、何とか自分のローカルでも同じ感じのことはできるようになりました。そこで質問なのですが、「Next」や「Prev」の画像を、最初から下部（Closeがあるところなど）に配置しておくようにはできないのでしょうか？もしくは、それをやられているサイトなどがありましたら、教えて頂けると助かります。 ※前述のサイトのように、画像表示時に（画像が表示されるための）白い部分の大きさが動いたりしないもの（下部URL）だと「Prev」「Next」が最初から表示されてますが、私が求めてるのは画像表示される白い部分が動くやつで「Prev」「Next」が最初から表示されているものです。 http://www.aimix.jp/thickboximgslide.html すみませんが、よろしくお願いします。

ryo201007
お礼率71% (5/7)

HTML
回答数2
ありがとう数1

みんなの回答 （2）
専門家の回答

質問者が選んだベストアンサー

ベストアンサー

yyr446
ベストアンサー率65% (870/1330)

2010/11/22 16:04 回答No.2

「画像表示される白い部分が動くやつで「Prev」「Next」が最初から表示されているもの」の意味がよくわかりませんが、javascriptを使ったスライドショーのライブラリーはどっさりあるので気に入ったのを探すか、カストマイズ可能なのを選びましょう。 Highslide JS http://highslide.com/#examples galleryview http://spaceforaname.com/galleryview#demos lightview http://www.nickstakenburg.com/projects/lightview/ shadowbox http://www.shadowbox-js.com/index.html lightbox http://www.huddletogether.com/projects/lightbox2/ fancybox http://fancybox.net/ miltibox http://phatfusion.net/multibox/ colorbox http://colorpowered.com/colorbox/core/example1/index.html NivoSlider http://nivo.dev7studios.com/

その他の回答 (1)

oktuburero
ベストアンサー率22% (102/446)

2010/11/21 15:44 回答No.1

Lightboxで調べればいい。

関連するQ&A

jqueryのスライドについて
お分かりになる方、お知恵をお貸しください。現在下記URLを参考にポップアップウィンドウを作成しています。 http://detail.chiebukuro.yahoo.co.jp/qa/question_detail/q14106485334 これに以下の条件を組み込みたいと思い悪戦苦闘しています。 [1] ---------- 画像を表示した際の「next」と「prev」。一番最初の画像には「prev」を表示させない。一番最後の画像には「next」を表示させない。 ---------- 上記だと難しいかなと思いループでもと考えています。 [2] ---------- 最初の画像(prev)→最後の画像へ最後の画像(next)→最初の画像へ ---------- どちらかお分かりになる方がいましたらお知恵をお貸しください。よろしくお願いします。
- ベストアンサー
- JavaScript
jQuery スライド（カルーセル）のカスタマイズ
jQuery スライド（カルーセル）のカスタマイズで困っています。 http://slidesjs.com/ こちらのサイトのJqueryライブラリを使って、常時3つ表示のスライドギャラリー（カルーセル）を作成したいと思っています。サンプルの中に3つ表示のタイプが含まれているのですが、（/Slides/examples/Carousel/) スライドも3つ同時に動きます。この部分を1つずつ動かしたいと思いカスタマイズしていますが、うまくいきません。要件としては、下記です。・同時に3つ表示させたい・スライドは１つずつ動かしたい・きれいにループさせたい（最後と最初のアイテムをスムースに接続）・「Prev」「Next」「pagination」はそのまま活かしたい・「pagination」のボタンは現状、1つに対して3つのアイテムがスライドするが、１つに対して1つにしたい。別のライブラリをベースにしたほうがよいでしょうか。何分素人なので、どなたかご教授くださいませ。よろしくお願いします。
- 締切済み
- JavaScript
画像スライドのナビゲーション設置
こんにちは。先ほど質問させて頂き画像スライドは希望通り出来ました。 http://okwave.jp/qa/q7245904.html $(function(){ var images = $('#setup').find('img'), max = images.length -1, current = 0; images.nextAll().hide(); $('#prev,#next').bind('click', function(e) { images.eq(current).hide(); if(this.id==='prev'){ if(current > 0)current -=1; }else{ if(current < max)current +=1; } images.eq(current).show(); }); }); html <div id="setup"> <img src="*****" alt="*" width="*" height="*"> </div> <span id="prev">前へ</span> <span id="next">次へ</span> ナビゲーションも付ける事が出来たんですが、もう一つ希望があり、質問させて頂きます。ナビゲーションの「戻るボタン」と「次へボタン」これを最初の画像が表示されてる時は、戻るボタンを消し、最後の画像が表示されている場合は次へボタンを消したいです。わからないながら試行錯誤し、このように書き足してみましたが動きません・・・ $("#prev").ready(function(){ if( $( '#slideImg img:first' ) ) { $(this).css('display', 'none'); } $("#next").ready(function(){ if( $( '#slideImg img:last' ) ) { $(this).css('display', 'none'); } どうか皆様のお知恵をお貸しください。宜しくお願い致します。
- ベストアンサー
- JavaScript
WEBサイトでのスライドショーについて教えてください
お世話になります。WEBサイトでクリックするたびに画像が変わるスライドショーを他のページなどを参考にfunction prev()等を使って設置しました。具体的にはこんな感じです <script type="text/javascript">  </script> <img name="img1" src="001.jpg" alt=""> <form action="#"> <input type="button" value="▼" onclick="prev()"><input type="button" value="▲" onclick="next()"> </form> これは順調に稼動しました。その後同じページ（上記の下側）に、最初の画像を「201.jpg」、スライドショーで表示させたい画像を「210.jpg」「211.jpg」に変更して同じものを記述しました。画面上はきちんと表示されるのですが下に設置したほうの▼▲をクリックすると「201.jpg」が「210.jpg」に変わるのではなく、上に設置した「010.jpg」「011.jpg」に画像が変わります。onclick="prev()"が同じなのがいけないのかと思うのですが、上と下を区別する方法がわかりませんでした。初心者のような質問で恐縮ですがご存知の方よろしくお願いします。
- ベストアンサー
- ホームページ作成ソフト
jQueryサンプルを使用したギャラリーの切換方法
Gallerifficを使用してギャラリーを制作中です。 http://www.twospy.com/galleriffic/ こちらのexample-2.htmlを元にして、このギャラリーのサムネイルの上部と下部にあるページリンク（１　２　Next　とある　ページのリンクの部分）をタブのように扱いたかったのですが、cssが読める程度の私では、わかりませんでした。せめて（１　２　Next）部分を個別画像で指定できる方法が有るのか無いのか知りたいですもし有るのであれば、どこを直せば良いのか、ご指導お願いしたします。
- 締切済み
- JavaScript
galleriffic.jsの画像増殖エラーの回避
ホームページを作成しているのですが、 galleriffic.jsを使い、ギャラリーページを作ろうと思っています。しかし、このgallerifficを使用し、ギャラリーページのメイン画像をダブルクリックすると画像が増殖？というか、不具合が生じます。下記デモページですが、こちらでも不具合が生じます。 http://demo.webmache.com/PhotoGalleryGalleriffic これを何とか回避したいのですが、何か方法はありませんでしょうか？ Prev / Next (1 of 5）といった感じで画像を表示出来ればと思っています。どなたかご教授頂ければと思います。何卒宜しくお願い申し上げます。
- ベストアンサー
- JavaScript
jQuery GalleryViewスライドショー
http://spaceforaname.com/gallery-customized.html このスライドショーを使いたくて色々と試していますが（ローカル環境・IE8）１）　オーバーレイ部分に表示されるテキストの位置、大きさの設定方法が分かりません。２）　カーソルを画像に持っていった時にスライドショーがストップするハズなのですが止まりません。３）　画面上部の矢印ボタン（←・→・↓）が表示されません。４）　JSに色々なバージョンがあり、どの組み合わせが最適なのか分かりません。 XP-Pro SP3,Dreamweaver8で製作しております。どなたかお助けください。
- ベストアンサー
- JavaScript
背景色と連動するスライドショープラグイン
お世話になります。スライドの画像が変わるたびに背景色も変わるタイプのスライドショープラグインを探しています。サンプルとして http://elegantthemes.com/preview/eStore/ こちらのサイトの様な感じにしたいと思っています。中央部分がスライドショーになっており両サイドが背景となっているようです。ソースを見てみるとslideというクラスがついた要素全体をスライドするようです。画像だけでなく文字や背景も変わっています。ようはインラインコンテンツそのものをスライドするタイプのものであれば良いのかなと思います。 lightboxのようなイメージギャラリーですとインラインコンテンツを表示するタイプのものがありますが、単純にフェードインアウトするスライドショーでインラインコンテンツをスライドさせるものは無いでしょうか？もしくは簡単なjQueryで出来そうならご教授願いたいと思います。
- ベストアンサー
- JavaScript
jsのスライドショーのボタンの時間制御について
jsのスライドショーについて質問です。メイン画像とサムネール画像が連動していて、５秒間で次の画像及びサムネールに自動的にスライドするというものを作りました。そして、Prevボタンやnextボタンをつけ、クリックと、手動で次のスライドに移るようにしました。これに、切り替わったスライドから５秒間止まり次の画像に切り替わるという設定を加えたいのですが、うまくいきません。自動再生中の４秒後にボタンをクリックすると、次のスライドが１秒で、また次のスライドに切り替わってしまうのです。どうか方法を教えてください。＜スクリプト＞ //自動再生 var timerID = setInterval(function(){ $('#thumbsNext').click(); },5000); $('#gallery ul').hover(function(){ clearInterval(timerID); }, function(){ timerID = setInterval(show, 5000); // マウスアウト時にスライドショーを再開 }); function show(){ $('#thumbsInner').animate({ marginLeft:parseInt($('#thumbsInner').css('margin-left'))-248+'px' },'slow','swing', function(){ $('#thumbsInner').css('margin-left','-248px'); $('#thumbsInner ul li:first').appendTo('#thumbsInner ul'); $('#thumbsList .active').next().click(); }); }
- 締切済み
- JavaScript
jQueryサンプルを使用したギャラリーの変更方法
jQueryサンプルを使用してギャラリーを制作中です。 Galleriffic http://www.twospy.com/galleriffic/ こちらのexample-3.htmlを元にしていますが、このギャラリーのサムネイルの上部と下部にあるページリンク（１　２　Next　とある　ページのリンクの部分です）ですが、上部のみを取り除きたいのですが、どこの部分を変更すればいいのかわかりません。また、下部のページリンクは残しておきたいのですが、この色を変更する場合はどこのCSSを変更すればよいのでしょうか？ご指導お願いしたします。
- ベストアンサー
- JavaScript