【jQuery】サムネイルをクリックするとメイン画像が切り替わるシンプルな写真ギャラリー
- 2012年02月08日
- Javascript, プログラミング
- jQuery, ダム
余計な機能を省いたシンプルな写真ギャラリーをサイトに設置したい時には試してみてください。
HTMLもjavascriptも短く、理解しやすいのでカスタマイズも容易だと思います。
まずはデモ
javascript
jQuery依存のスクリプトなので、まずjQueryを読み込んでください。
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
その後、下のスクリプトを記載します。
$(function(){
$("img.ChangePhoto").click(function(){
var ImgSrc = $(this).attr("src");
var ImgAlt = $(this).attr("alt");
$("img#MainPhoto").attr({src:ImgSrc,alt:ImgAlt});
$("img#MainPhoto").hide();
$("img#MainPhoto").fadeIn("slow");
return false;
});
});
HTML
サムネイル画像にclass=”ChangePhoto”を指定します。
切り替えるメイン画像にid=”MainPhoto”を指定します。
サムネイル画像をクリックすると、メイン画像のURLとalt属性をサムネイルと同じものに差し替えます。
<div class="wrap"> <p><img src="img/01.jpg" width="400" height="400" alt="下筌ダム" id="MainPhoto"></p> <ul> <li><img src="img/01.jpg" width="72" alt="下筌ダム" class="ChangePhoto"></li> <li><img src="img/02.jpg" width="72" alt="石打ダム" class="ChangePhoto"></li> <li><img src="img/03.jpg" width="72" alt="船津ダム" class="ChangePhoto"></li> <li><img src="img/04.jpg" width="72" alt="緑川ダム" class="ChangePhoto"></li> <li><img src="img/05.jpg" width="72" alt="荒瀬ダム" class="ChangePhoto"></li> </ul> </div>
CSS
.wrap {
width:400px;
background:#000;
margin:20px auto;
padding:10px;
}
.wrap p {
height:400px;
}
.wrap ul {
display:block;
overflow:hidden;
margin-top:10px;
margin-right:-10px;
clear:both;
}
.wrap li {
display:block;
float:left;
background:#fff;
argin-right:10px;
}
.wrap li img {
cursor:pointer;
}
参考にさせていただきました。
1ページ内に複数設置して使うには、どの辺を変更すればよろしいでしょうか？
もしよろしければ教えていただければ幸いです。
[…] サムネイルをクリックするとメイン画像が切り替わるシンプルな写真ギャラリー […]
いつもブログを拝見させていただいております。
今度サイトを制作する時にこちらのjavascriptを使用したいと思っておりますが、ライセンスはどのようになっておりますでしょうか？
商用サイトでの使用を考えております。
またご使用しても問題なければ著作権表示などの必要はございますでしょうか？
お手数お掛けしますが、何卒よろしくお願いいたします。
是非使ってください。
商用でも二次配布でもなんでもOKですが、不具合への責任は負いかねますので、ご了承ください。
とてもシンプルで初心者の私でも設置できました☆
ありがとうございます。
ところで、こちらに短いキャプをつけるとしたら、
どんな風にしたらよいのでしょうか？
宜しくお願いしますm（＝＝）m
私も無事に設置することができました。
ありがとうございました。
サムネイルをマウスオーバーしたときに、少し透過させたいのですが、可能でしょうか。
教えていただければ幸いです。
宜しくお願い致します。
[…] １枚の大き目の画像を置き、その下に選択用のサムネイル画像を５枚表示させるものを作った。参考にさせて戴いたのは、次のURLです。 KLUTCHE web design techniques ( http://klutche.org/archives/460/ ) […]
解りやすい内容でした。
clickをmouseoverに変えたのを使わせていただきます。
ありがとうございます。
ソースにこちら様を明記する必要はありますか？
ソース明記は必要ありません。
参考になってよかったです。
こんにちは。
この写真ギャラリー利用させていただいております。
軽く安定してとても好感を持って利用させていただいております。
最近、多数の写真を掲載する機会がありまして、
サブの写真をクリックしてメインに表示させたものを見るたびに、
ブラウザを上下に移動しなくてはいけなくなった事例がありました。
なので、こちらのギャラリーでメインとサブの間に
「戻る」「次へ」といったリンクを用意し、
それをクリックすると順に切り変わることができれば良いなと思いました。
こういったことは可能でしょうか？
よろしくお願いします。
はじめまして。
ちょっとした写真集表示をしたくこちらのソースをそのまま利用させていただいております。
ありがとうございます。
１点質問があるのですが、サムネイルをクリックすると無事にメイン画面の方に表示はされるのですが、表示される画像がボケてしまっています。
どうやらサムネイルサイズのものがメイン画像のサイズに拡大されて表示されているように見えるのですが、そういった問題が発生する事例はございますでしょうか？
なお、ソースはCSSもそのままですが、利用環境はwordpress上で使用しております。（jqueryもwordpressのものをそのまま利用しています）
宜しくお願い致します。