先に公開した同型のギャラリーは、枚数が増えるとその数だけラジオボタンを設置する必要があるなど、CSSの記述が煩雑になるので、このたびは、target疑似クラスを使ってその点を改良したのと、いくつかの記述上の工夫を加えた。レスポンシブ対応型である。
JqueryのプラグインFancyBoxを意識して作ってみたが、まあまあ、それらしいものができたと思う。
サンプル
実装サンプルは、こちらの別ページにあります。
ボタン類画像の用意
・あらかじめ、送りボタン（next.gif）、戻りボタン（prev.gif）、閉じるボタン（end.gif）の各画像を作成し、サーバーにアップロードしておく
・サンプルではimagesフォルダに格納していますが、HTMLで設定フォルダにパスを通してください。
HTMLのポイント解説
・target疑似クラスでクリックイベントを認識するには、イベント元から、表示要素に a href でリンクを貼る必要がある。
・targetを認識する要素div（.photo）それぞれには、画面を覆う半透明の黒色スクリーンdiv（.dark）、スライド写真、ボタン類を配置している。
・.darkに#P11（何も中身がないので初期画面に戻る）をリンクさせている。
・スライド、ボタン類を配置しているdiv（.frame）は、cssでtransitionを使って、FadeIN/Outさせる。
・スライド送りは、以前にも実装したように、写真の右側（40%）部にカーソルがのったら右送りボタンが表示され、矩形平面部のクリックでスライドが送られるようにしている。左も同様である。
CSSのポイント解説
・サムネイルはlist形式で記述し、max-width:800pxのdiv（.contnr）に並べる。
・.photoおよび.darkは、画面全域。
・.frameは、横幅を画面幅の80%に指定し、画面中央に配置する。中央配置は、positionをabsoluteにし、top:50%、left:50%に指定、transform:translate(-50%,-50%)で、写真縦横サイズの半分を補正して配置している。
・ボタン類は、スライド写真のコーナーや左右の端に配置しているが、画面サイズの変化によって、多少ずれる。
こちらのプログラムを拝借させていただき、ホームページに設置してみたのですが
画像拡大時に表示される「×印」が機能しません。
cssの.frameの横幅を画面幅の70％に変更したのと、html側で画像枚数を倍に増やすといった
改良を加えて利用させていただいているのですが、他にもどこか値を変えないと「×印」が無効になってしまうのでしょうか….？
こんにちは。
<span class="btn1"><a href="#p11"><img src="images/end.gif"></a></span>
とありますが、#p11のところを、画像枚数の範囲外にしてください。
例えば、#p21とかです。
ありがとうございます！
お陰さまで解決することができました。
これからも、利用させていただくことがありましたら、宜しくお願いします。
解決おめでとうございます。
これからも、弊サイトを楽しんでください。
初めまして、ページに活用しようとしているのですが、
サムネイル部分と拡大した時の画像を分けるのはどうすればよいでしょうか？
サムネイル部分をバナーみたいにして、それをクリックするとメインの画像が表示される感じのイメージです。
タケシさんはじめまして。
すみません、ご質問のイメージがわかなくて、戸惑っています。
サムネイルクリック型ではないんでしょうか？
初めましてmasamiともうします。初心者なりに活用させていただこうと思って挑戦していますがクリック時の写真がモニターいっぱいになり矢印やバッテンマークがでないのです。写真データのサイズを小さくしてみたのですがダメでした。上にかぶった状態でボタン類見えないのでしょうか、どこを触ればいいのか教えていただけますか。よろしくお願いいたします。
masamiさんはじめまして。
ちょっと説明が不親切でしたね。
あらかじめ、ネクストボタン画像（next.gif）、プリービアスボタン画像（prev.gif）、閉じるボタン画像（end.gif）をアップロードしておかなければなりません。
ここでは、img src="images/next.gif"となっていますが、imagesは、格納したフォルダを指定してください。なお、画像を作るのが面倒なら、このサンプル表示画面で、右クリックでダウンロードしてください。
masamiです、お世話になります。できました、ありがとうございました。ただ我が家の旧タイプのモニターと最近のワイドモニターでは上下がカットされるのは仕方ないですね。なにはともあれありがとうございました。
とりあえず、出来上がってよかったですね。
上下がカットされる？
レスポンシブになっているので、画面内に画像が収まるはずですが。
masamiです、お世話になります。『画面内に画像が収まるはずです』ですが、我が家のモニターでは右上にバッテンマークが出るのですが、職場のワイド画面ではバッテンがでないのです。それから矢印マークが家ではOKなのですが職場では写真外に出てちょっとブサイクな状態であり我慢しようかと迷っているところです。どこか触る部分があれば教えていただけますか。それから画面表示の大きさを調整する場合、データサイズを触ればいいのかCSSのどこかかなと思ったりするのですが・・・。ここも教えていただけますか。よろしくお願いいたします。
masamiさんの用意している写真のサイズですが、小さいのではないでしょうか。このサンプルは、フルサイズ（1920*1080）の写真用に設定しています。写真サイズが画面サイズよりも小さい場合には右側に表示されるボタンが写真からはみ出てしまいます。
それと、画面表示の大きさは、.photo img { width:100%; } の100%を望みの大きさに設定すれば調整できますが、表示位置、ボタン位置がずれますので、それに応じて、.photo img の位置設定、
.btn1 img { border:none; width:30px;height:30px;position:absolute;top:-1%;right:-1%;}
のtop,left の数値をうまく設定してください。（btn2,btn2も同様）
masamiです、お世話になります。なるほど少しわかったような気がします。
今わかってないことは
①フルサイズ（1920*1080）にするとネットの動きが遅くならないのですか、
データーの画素数とまた別ですか。
②100％を小さくすると表示は小さくなるのですが、だんだん左に寄ってしまうので中央に表示させたいのです、どこをさわればよろしいですか。
よろしくお願いいたします。
①フルサイズにすると、解像度を下げてもPCの性能によっては遅くなります。
それが心配でしたら、
画像のサイズを小さくして、表示位置を調節すれば同様のLightboxタイプが作成できます。
・.photo { の中の、left及びtopの値を％指定で調整します。
・btn1 img から btn3 img の位置も、適正な表示位置になるよう調整します。
② ①と同様に位置調整してください。
お世話になります。できました、ボタンの位置も体裁よくなりました。ありがとうございます。
おめでとうございます。ホッとしました。
引き続き、本サイトをご活用ください。
That really caruepts the spirit of it. Thanks for posting.
Graet thanks.
初めまして。急なメッセージ失礼します。
html、css初心者なのですが、独学で今HP作成をしています。
このサイトを拝見させていただき、とても助かっています。
やっていたところ順調だったのですが、以前のコメントにも似たような質問があったのですが、バツ印が機能しません。これからも枚数を増やしていく予定だったので、だいぶ範囲外の数字にしたのですが連番でなければいけないのでしょうか？
もう一つ、<a href="#p50" rel="nofollow"></a>
の他にも<a href="#p50" rel="nofollow"></a>
も変えたのですが機能しません。
初歩的で申し訳ないのですが、教えていただけないでしょうか？
よろしく御願い致します。
koniさんはじめまして。
バツ印は範囲外であれば連番でなくてもいいです。バツ印は、各スライドごとに表示させていますから、各スライドのa href="#p11"のところの11を決めた番号に変えてください。
すみません、<a href="#p50" rel="nofollow"></a> を変えたとありますが（質問の方は消えています）、rel="nofollow"の記述はどこにありますか？
早速の返信ありがとうございます。
（質問が消えてしまい申し訳ありません）
<a href="#50" rel="nofollow"></a>のrel=nofollow記述ですが、ありません。最初から入っているものでしょうか？
a href="#p11"を変えるところは１つの項目で２箇所ですよね？
本当に初歩的で誠に申し訳ありません。
一つの項目（スライド）に対して、背景とバツ印の2カ所ですね。
rel=nofollowと言う記述は、あっても影響はないのですが、ページで示した記述にないものが、なぜ質問に登場するかが知りたいのですが。と言うのは、以前にも質問受けたことがありますので。
その２箇所を範囲外の数値をいれてもできなかった場合は他に何が考えられますでしょうか？
rel=nofollowに関しては、質問にのせていないのですが、もしかしたらhtmlのコードをコピペして投稿したら投稿した途端に、そのコピペの部分がコメントから消えてしまいました。
多分そこの部分がrel=nofollowの記述になっているのかもしれません。
最初のコメントでのせていたコードはサンプルの#p11の所を#p50に変えただけのコードで２箇所のコードをのせました。
nofollowについては了解です。このコメント記述欄では、<は<にセミコロン、>は>にセミコロンをつけないと表示されません。そうしないとhtmlの記述として認識されてしまうのです。
wordpressの方で、nofollowの記述を自動的に加えたのだと思います。koniさんの責任ではありません。
さて、バツ印が効かない件は、わかりません。以前質問された方は、これで解決しました。
それ以外と言われても、koniさんがどのように作られているかがわからなければ、特定できません。もし、koniさんがサーバーに上げたものが閲覧できれば、判断できると思いますが。
丁寧な回答ありがとうございました。
今まだ作っている段階でサーバーにあげられていないので、その段階までいきましたら、閲覧してもらってもよろしいでしょうか？
お忙しいところ誠に申し訳ありませんでした。
了解です。
仮に置くことができれば、その時点でご連絡ください。
３月にお世話なったmasamiともうします、お世話になります。サイトに使わせていただきたいのですが、
１１枚の画像ですが最終ページのみクリックすると本文の裏に表示されて画像の右バツ印部分がかろうじて表示されてします。本文とＣＳＳを眺めるのですがわかりません、ご教授いただければ幸いです。（1～10枚目は正常動作をし、バツ印時のジャンプ先は#12としています。）。よろしくお願いいたします。
masamiさんこんにちは。
11枚目の記述を加えるだけで、正常に表示されるはずです。
１．<li><a href="#p11" rel="nofollow"><div><img src="img7/s11.jpg"></div></a></li>を加え
２．
<div id="p11" class="photo">
<a href="#p12" rel="nofollow"><div class="dark"></div></a>
<div class="frame">
<img src="img7/11.jpg">
<a href="#p1" rel="nofollow"><div class="cover_right"><span class="btn2"><img src="images/next.gif"></span></div></a>
<a href="#p10" rel="nofollow"><div class="cover_left"><span class="btn3"><img src="images/prev.gif"></span></div></a>
<span class="btn1"><a href="#p12" rel="nofollow"><img src="images/end.gif"></a></span>
</div>
</div>
を加え、dark、btn1 の#p11を全部#p12に変換してください。
以上検討ください。なお、上文の rel="nofollow"は不要です。
masamiです、できました。ありがとうございました。ＣＳＳの意味合いがさっぱりわからないのですが表示をコントロールしてるだけなのですか？。
CSSの意味ですか…..
ウェブページのスタイルを指定するための言語と一般的には言いますが、よく分かりませんよね。
ここで簡単に説明できるようなものではありません。ただ、ウェブぺージを作っていると必ず必要になりますので、必要に応じて一つ一つ覚えていくことで、意味も分かってくると思います。
初めまして。
こちらのギャラリーを参考にさせていただいております！
スマホ用にも使用したいのですが、送るボタン、戻るボタンをhover時ではなく常に表示したい場合、どのように記述すればよいでしょうか？
ご教示いただけますと幸いです。
nacoさんはじめまして
CSS記述の、.cover_left, .cover_right { 内の、opacity:0; を opacity:1; に書き換えてください。
.cover_left:hover, .cover_right:hover {
opacity: 1;
} は不要となります。
ありがとうございます、表示できました！
ちなみに、ページの読み込み時にスライドの画像が一瞬見えてすぐに消えるのですが、
これは仕方がないことでしょうか？
＞ページの読み込み時にスライドの画像が一瞬見えてすぐに消える
ページの読み込み時とは？
スライドの画像とは？
もう少し説明してください。
初めまして。こちらのギャラリーを使わせて頂いてホームページを作成中です。
あちこちネット検索しましたが、こちらほど充実しているサイトは、有りませんでした。
さて、2016/3/16；masami様と同じ症状=画面からはみ出る、がでました。小さいサイズ
ですが、縦長画像(0.68)です。
試行錯誤の末、これを1920*1080の比率(1.78)=890*500：両サイドにスペースを追加、
したところ正常に表示されました。送り、非表示ボタンも変更なし。データ量も少ない。
しかし、縦長画像は縦長で表示したく、htmlタグやcssプロパティを探していたところ、
transform: translateにたどり着きました。それまでは、htmlソースやcss内の.pho
to､.photo imgなどを触ってましたがダメでした。こちらのcssでは.frameにありました
ので、まずtranslateのheight -50％を0％にしたところ、サイトトップから画像トップ
が150px程下がりました。しかしheightを-20％にすると、又はみ出てしまいます。
次に.frameの top : 50%を0％(translateは0％で)にすると画像トップが80px程、
下がりました。色々試した結果、topは18%、transform: translateは(-50%, -5%)で
落ち着きました。他の比率の画像1700*1155(1.47)でもうまく表示されました。
何かの参考になれば幸いです。最後にギャラリー・スライドショーで、これ程多種多彩で
充実したサイトは、他に有りませんでした。感謝します。
yamakuniさんはじめまして。
当サイトをご活用いただき有難うございます。
その上、詳細にご検討いただき、大変参考になります。
ありがとうございました。
初めまして。
こちらのギャラリーを使わせて頂いてホームページを作成中なのですが、ソフト上、パソコンでのブラウザ上では問題なく動作しているのですが、スマホで見るとレイアウトが崩れて動作しません。
Lightbox タイプ – FadeIn/Out型だけでなく、他のギャラリーも同じ症状が出ます。
スマホのブラウザには対応していないという事でしょうか？
kokusさんはじめまして。
本サイトの制作例は、確かに、スマホのOS、機種、表示方法を十分確認できていませんし、スマホ用に最適化してはいません。
レイアウトが崩れるということですが、私のandroid機種での確認では、PC同様に正常作動しています。どのような現象か、もう少し説明願えませんか。