jQueryでの画像ビューアー用プラグインはたくさん公開されていますが、
単純にサムネイルを並べて、クリックしたらメインビジュアルが切り替わる
シンプルなスライドショー的ビューアーを作ってみたので紹介してみます。
まずは動作のサンプルから。
サムネイル画像をクリックしてください。
jQuery SIMPLE IMAGE VIEWER【SAMPLE】
「jQueryでシンプルなサムネイル付き画像ビューアーを作成する方法」サンプルを別枠で表示
下部に並べてあるサムネイルをクリックすると
メインビジュアル部分がクロスフェードして切り替わります。
（自動でスライドする動作などは今回は付けていません。）
サムネイルは透過具合でアクティブ状態か、
そうでないかを変化させています。
全体構成についてHTMLから。
◆HTML <div id="viewer"> <div> <img src="img/photo01.jpg" width="400" height="300" alt="" /> <img src="img/photo02.jpg" width="400" height="300" alt="" /> <img src="img/photo03.jpg" width="400" height="300" alt="" /> <img src="img/photo04.jpg" width="400" height="300" alt="" /> </div> <ul> <li><a href="#"><img src="img/photo01.jpg" width="100" height="75" alt="" /></a></li> <li><a href="#"><img src="img/photo02.jpg" width="100" height="75" alt="" /></a></li> <li><a href="#"><img src="img/photo03.jpg" width="100" height="75" alt="" /></a></li> <li><a href="#"><img src="img/photo04.jpg" width="100" height="75" alt="" /></a></li> </ul> </div><!--/#viewer-->
大枠をID「#viewer」で覆い（ID名は任意）
画像が切り替わるメインビジュアル部分は＜div＞で囲んで、
サムネイルは＜li＞リストで形成しています。
メインビジュアルとサムネイルの並び（順序）は
同じにしておく必要があります。
メインビジュアルで使用する画像も、サムネイル画像に対しても
HTML側ではIDやクラスはつけていません。
そしてこのHTMLソースに対してのCSSは以下の様に。
◆CSS
#viewer {
margin: 0 auto;
width: 400px;
text-align: left;
}
#viewer div {
width: 400px;
height: 300px;
overflow: hidden;
position: relative;
}
#viewer div img {
top: 0;
left: 0;
position: absolute;
}
#viewer ul {
width: 400px;
}
#viewer ul li {
width: 100px;
float: left;
display: inline;
}
#viewer .active {
filter:alpha(opacity=100)!important;
-moz-opacity: 1!important;
opacity: 1!important;
}
/* =======================================
ClearFixElements
======================================= */
#viewer ul:after {
content: ".";
height: 0;
clear: both;
display: block;
visibility: hidden;
}
#viewer ul {
display: inline-block;
overflow: hidden;
}
メインビジュアル部分の「#viewer div」と「#viewer div img」と
サムネイルの透過具合を制御する「#viewer .active」以外に書かれている
各プロパティは今回のサンプルのレイアウトを形成するものなので
あまり重要視しなくていいものになります。
そして実際に動作を実行させるスクリプトは以下の様になります。
◆SCRIPT
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.0/jquery.min.js"></script>
<script type="text/javascript">
$(function(){
$('#viewer div img').each(function(i){
$(this).css({opacity:'0'}).attr('id','view' + (i + 1).toString());
$('#viewer div img:first').css({opacity:'1',zIndex:'99'});
});
$('#viewer ul li').click(function(){
var connectCont = $('#viewer ul li').index(this);
var showCont = connectCont+1;
$('#viewer div img#view' + (showCont)).siblings().stop().animate({opacity:'0'},1000);
$('#viewer div img#view' + (showCont)).stop().animate({opacity:'1'},1000);
$(this).addClass('active');
$(this).siblings().removeClass('active');
});
$('#viewer ul li:not(.active)').hover(function(){
$(this).stop().animate({opacity:'1'},200);
},function(){
$(this).stop().animate({opacity:'0.5'},200);
});
$('#viewer ul li').css({opacity:'0.5'});
$('#viewer ul li:first').addClass('active');
});
</script>
まずメインビジュアル部分の＜div＞に入っている画像の数を数えて
それぞれ順番にIDを付けます。
そしてサムネイルの＜li＞をクリックした際に、
そのクリックされた＜li＞の順序番号を判断して、
同じ数のメインビジュアルID番号を表示させる構成になっています。
スクリプト実行後のHTMLソースについては
イメージとして以下の様になっています。
◆HTML（スクリプト実行後） <div id="viewer"> <div> <img src="img/photo01.jpg" width="400" height="300" alt="" id="view1" style="z-index:99;" />【ID="view1"とz-index="99"が付与】 <img src="img/photo02.jpg" width="400" height="300" alt="" id="view2" />【ID="view2"が付与】 <img src="img/photo03.jpg" width="400" height="300" alt="" id="view3" />【ID="view3"が付与】 <img src="img/photo04.jpg" width="400" height="300" alt="" id="view4" />【ID="view4"が付与】 </div> <ul> <li><a href="#"><img src="img/photo01.jpg" width="100" height="75" alt="" /></a></li>【クリックでメインビジュアルID="view1"を表示】 <li><a href="#"><img src="img/photo02.jpg" width="100" height="75" alt="" /></a></li>【クリックでメインビジュアルID="view2"を表示】 <li><a href="#"><img src="img/photo03.jpg" width="100" height="75" alt="" /></a></li>【クリックでメインビジュアルID="view3"を表示】 <li><a href="#"><img src="img/photo04.jpg" width="100" height="75" alt="" /></a></li>【クリックでメインビジュアルID="view4"を表示】 </ul> </div><!--/#viewer-->
ECサイトなどのサイトで商品を紹介する写真がたくさんある場合など
シンプルな構成の画像ビューアーが便利に使えるかな、と思います。
画像の切り替えビューアーが必要になった際に是非。。。
始めまして。
とても素敵なビューアーに出会えてうれしいのですが、こちらIE6に対応する事は出来ませんでしょうか？
ご回答いただけると嬉しいです。
はじめまして。
コメントありがとうございます。
こちらで確認する限り、このビューアーはIE6でも動作しているのですが
サンプルデータをダウンロードしても、同じ現象が起こりますでしょうか？
もしダメな場合、ご使用のOS環境など
教えていただければ調べてみます！
よろしくお願いします。
ご返信ありがとうございます！
私はIETesterを使用してIE6環境の確認をしていたのですが、もう一度確認してみたところ、動作に不具合があるように見えるのはIETesterのせいかもしれないという事が分かりました。
実際のIE6で動作しているようであれば問題ありませんので、お返事を頂けて嬉しかったです。
今後も更新楽しみにしています。
確認ありがとうございます！
私もIE6で確認する際はIETesterのv0.4.10と
MultipleIEsというものを使用して確認しています。
IETesterはバージョンが古かったりすると
JavaScriptでエラーが出てしまったりするので
その影響かもしれませんね。。。
また何か、おかしい、と思う事があればご連絡くださいませ。
よろしくお願いします。
jQueryでサムネイル付きスライドショーをシンプルに作成する方法 | BlackFlag | 2011.11.22 10:46
[...] 以前にここで「jQueryでシンプルなサムネイル付き画像ビューアーを作成する方法」と題して、 jQueryでの画像切替ビューアーを紹介しましたが、 これを応用して、自動で画像エリアが切 [...]
はじめまして、質問させて頂きたいことがあり投稿させて頂きます。
上のスクリプトを使わせて頂こうと、ダウンロードしまして設置しました。
上の解説と異なる点は、メインで表示する画像の縦横の比率が画像によって異なります。
例えば、3つ画像があり、順番に、400*300 300*400 400*300というサイズだとします。
この場合、ページを初めて表示した際、1番目と2番目の縦のサイズ差100ピクセルから、2番目の画像の100ピクセル分が、1枚目の下部に表示されてしまいます。
上記では全てが400*300なので「差」が出ることはありませんが、このように差が出た場合、表示されないようにするには、スクリプトを修正しなければならないと思いますが、どのように修正すればよいでしょうか。
ご多忙とは存知あげますが、ご返答お待ちしております。
＞Shinsakuさん
コメントありがとうございます！
ここで紹介しているスクリプトでは
＜img＞タグ自体を重ね合わせて表示を切り替える構成にしているので
サイズ違いの画像を使用する場合はその様な現象になってしまいます。
サイズの違う画像を使用する場合は
全体のスクリプト構成を当ブログで紹介している別記事のもので
考える必要がありそうです。
◆jQueryでサムネイル付きスライドショーをシンプルに作成する方法
http://black-flag.net/jquery/20111122-3597.html
こちらのスクリプト構成では＜img＞タグではなく
＜div＞要素を切り替える構成にしているので
切り替える個々の＜div＞に対して背景色（もしくは背景画像）を
指定することで余白部分に他の画像が出現してしまうことが防げると思います。
こちらの構成でのスクリプトで、自動で画像が切り替わる動作を外して、
当記事で紹介している内容と同じ動作にあわせたサンプルを用意してみましたので
下記のURLからダウンロードしてみていただけますか。
http://black-flag.net/devel/jQuerySimpleImageViewer/jQuerySimpleImageViewerBG.zip
サムネイルをクリックして切り替わる画像のサイズを変更してありますので
ご希望の動作になっていると思うのでご確認ください。
データを確認していただき、
また不明な点などありましたら
ご連絡くださいませ。
よろしくお願いします。
>Black Flag様（で宜しいでしょうか？）
早速のご返答有難う御座います。また早速サンプルをUPして下さり、大変恐縮です。
今、解凍して拝見させて頂きました。期待通りのものとなっています。
今回、貴殿のスクリプトを使わせて頂こうと思ったのには、理由があります。
まず、フォトギャラリーにてサムネイル表示、クリックすると画像が大きく表示される。
次に、その大きく表示された画像にカーソルを合わせるとさらに部分的に拡大して表示する。
というのが目的でした。カーソルを合わせた際に拡大されるのは、下記のスクリプトを使用する予定です。
つまりは、大きく表示された画像もサムネイルだということになります。
http://www.professorcloud.com/mainsite/cloud-zoom.htm
貴殿のスクリプトと、上記拡大するためのスクリプトの組み合わせを考えた際、HTMLの構造がほぼ同じであったために、導入可能だと考えました。
単純なフォトギャラリーであれば、jQueryを使わずとも導入ずみでしたが、HTMLの構造の違いから今回質問させて頂きました。
また不明な点が御座いましたら、投稿させて頂きます。
今回は、本当に有難う御座いました！
再度投稿させて頂きます。
上記で改良して頂いたスクリプトにて、期待通りに動作しました。有難う御座いました！
改良版では、divで囲むと同時に、メインで表示する画像もa hrefで囲んでいるかと思います。
先の投稿でもお伝えしたように、フォトギャラリーにてメインで表示された画像を、さらに拡大するのが目的です。
そのために、他のjqueryを利用したいと考えています。URL：http://www.professorcloud.com/mainsite/cloud-zoom.htm
このjqueryスクリプトは、小さく表示されたimgに、元の画像をa hrefで囲むことで拡大鏡のように表示しております。
a hrefの多重はできないので、どうにか方法がないかと挑戦しましたが、私の力では限界だと感じ、再度投稿させて頂きました。
できましたら、再度ご教授頂ければ幸いです。
ご多忙とは存知あげますが、ご返答お待ちしております。
＞Shinsakuさん
データのご確認ありがとうございます。
ご希望の動作に近づけたようで何よりです。
ズーム機能を追加するプラグインの構成も見てみましたが
私の方で作成しているスクリプト内では、
切り替えエリアの＜div＞要素すべてに対してアクションを起こす構成にしている為
ズーム機能jQueryプラグインのスクリプトとぶつかってしまっていると思われます。
今回お使いしているズーム機能「cloud-zoom.js」のプラグインファイル内で
＜div＞要素を生成している部分を＜span＞タグで生成されるように構成を変更して
＜span＞ではインライン要素になってしまうので
必要箇所に要素をブロック要素にする「display:block;」の指定を追加すればいけそうな気がしています。
簡単な動作サンプルも用意してみましたので
下記URLから再度ご確認してみてください。
http://black-flag.net/devel/jQuerySimpleImageViewer/jQuerySimpleImageViewerBG-Zoom.zip
「common.css」内も前回のものから
一部変更しているところがあるのでご注意ください。
おそらくこの方法でご希望の動作が実装できるのではないかと思っております。
よろしくお願いします。
早速のご返答有難う御座います！
希望通りに動いており、非常に嬉しく感じております！
今後もサイトへ訪問させて頂きます。今回は本当に有難う御座いました！
＞Shinsakuさん
データのご確認ありがとうございます！
ご希望の動作になっていたようで安心しました。
またみなさんのお役にたてるようなスクリプトなど
いろいろ発信できるようにがんばります！
はじめまして。
簡単シンプルなスライドを探していたのでとても助かりました。
2点、お聞きしたいのですが、
(1)大きい画像にこのまま＜a href=”#” rel=”nofollow”＞でリンクを貼りたい
(2)大きい画像にマッピングでリンクを指定したい
こちら2点は実現できそうでしょうか？
お時間ある際で結構です、
ご回答いただけると嬉しいです。
宜しくお願いいたします。
＞SKさん
コメントありがとうございます！
ここで紹介している画像ビューアーのスクリプトでは
＜img＞タグを重ね合わせて表示切り替えしている構成になっているので
そのままではリンクを張ると動かなくなってしまいます。
当ブログでの別記事になるのですが
同じような画像ビューアーを＜div＞要素ベースで切り替えているものがあります。
◆jQueryでサムネイル付きスライドショーをシンプルに作成する方法
http://black-flag.net/jquery/20111122-3597.html
こちらのスクリプトを元に構成すれば
———————————————
(1)大きい画像にこのまま＜a href=”#” rel=”nofollow”＞でリンクを貼りたい
(2)大きい画像にマッピングでリンクを指定したい
———————————————
の２点は実現できるのではないかと思っています。
こちらのスクリプトで、自動で画像が切り替わる動作を外して、
当記事で紹介している内容と同じ動作にあわせたサンプルを用意してみたので
下記のURLからダウンロードしてみてください。
http://black-flag.net/devel/jQuerySimpleImageViewer/jQuerySimpleImageViewerDIV.zip
切り替わるブロックは＜div＞になっているので
その中で＜a＞タグを使用することが可能になっています。
データを確認していただき、不明な点などありましたら
ご連絡くださいませ。
よろしくお願いします。
初めまして。
簡単でシンプルなので、とても気に入りました。
質問なのですが、
この画像ビューアーをスクロールしていきページ下部に配置した場合、
画像は切り替わるのですが、サムネイルをクリックするとページ上部まで戻ってしまいます。
ページ上部まで戻らず、その場で画像が切り替わるようにするには、どうしたらいいでしょうか？
当方未熟者で申し訳ないのですが、ご返答いただけると幸いです。
＞johnnyさん
コメントありがとうございます。
このビューアーを気に入っていただけたようで嬉しく思っております。
ご質問いただきました内容についてですが
サムネイルに対して張っているリンクタグのhrefの中を
「#」ではなく「javascript:void(0);」と記述することで
ページ上部まで戻らずに動作させることが可能になります。
記述方法は
———————————————————————————
＜a href=”javascript:void(0);”＞ ～ ＜/a＞
———————————————————————————
という形になります。
お試しください。
よろしくお願いします。
返信遅くなってしまい申し訳ありません。
思ったように動作させることができました！
本当にありがとうございました！
これからも、BlackFlagさんに通い詰めて勉強していきたいと思います。
＞johnnyさん
思い通りの動きを実装できたようで安心しました。
また何かありましたらご連絡くださいませ。
これからもみなさんのお役に立てる情報を発信できるようにがんばります。
はじめまして。mammaと申します。
こちらのビューアー、シンプルで大変ありがたいです。
一つ質問なのですが、このビューアーでは、サムネは通常色が薄く表示され、
選択したものが濃くなりますが、これを逆にすることは出来ますでしょうか？
通常100％の濃度でサムネが表示され、選択したものが明るく（薄く）なる
という感じです。
スクリプトのopacity:’0.5′などの辺りを弄ってみたのですが、
上記のような動きになってくれなくて。。。
お時間ありましたら、何卒よろしくお願いいたします。
＞mammaさん
コメントありがとうございます！
このスクリプトをご活用いただいているようでうれしく思っております。
ご質問いただきましたサムネイルの透過についてですが、
これを逆にするにはCSSとスクリプトの両方を変更する必要があります。
まずはCSS側で「.active」に指定している
透過指定を50％透過させておきます。
——————————————-
#viewer .active {
filter:alpha(opacity=50)!important;
-moz-opacity: 0.5!important;
opacity: 0.5!important;
}
——————————————-
そしてスクリプト側の21行目～27行目の
透過の値をすべて逆にします。
——————————————-
$(‘#viewer ul li:not(.active)’).hover(function(){
$(this).stop().animate({opacity:’0.5′},200);
},function(){
$(this).stop().animate({opacity:’1′},200);
});
$(‘#viewer ul li’).css({opacity:’1′});
——————————————-
念の為、各値を変更したサンプルファイルも用意しましたので
必要あれば下記URLよりダウンロードしてみてください。
http://black-flag.net/devel/jQuerySimpleImageViewer/jQuerySimpleImageViewerThumb.zip
ご確認よろしくお願いします。
早速のお返事。誠にありがとうございます。
ご丁寧にファイルまでご用意いただきまして、恐縮です。
大変助かりました。
早速試したところ、私の希望通りの動作となりました！
こちらのサイトの情報で大変助かっております。
本当にありがとうございました。
＞mammaさん
無事に思い通りの動作が実装できたようで安心致しました。
ご報告ありがとうございました！
これからも皆さんのお役に立てるような情報を
発信していけるようにがんばりますので
今後ともよろしくお願いします。
初めまして。
わかりやすいご説明で、理想通りのビューアーが作成でき、大変感謝しております。
質問なのですが、
こちらを参考に作成したページを色々なブラウザで試してみたところ、
Firefoxのみで、動作しませんでした。
サムネイルの透過処理もされておらず、サムネイルをクリックしても画像が変更しませんでした。
サンプルから変更した点としては、サムネイルを画像の右横に配置したことと、
jsの部分を外部ファイルにしたことくらいしか思い当たりません・・。
何か原因として思い当たることはありますでしょうか？？
お時間よろしければ、ご返答いただけると嬉しいです。
（※こちらのページのサンプルは、他のブラウザと同じように動作いたしました）
＞佐藤さん
コメントありがとうございます。
このスクリプトをご活用いただいているようで嬉しく思っております。
ご質問いただきましたFirefoxでの動作に関してですが
今のところ、その様な事象はこちらでは確認できていない現状です。。
実際のHTMLやCSSの全体構成を見てみないと何とも言えないのですが
スクリプト側ではなくてHTMLやCSSの構成が何か影響してしまっているのではないかと感じています。
現状のデータをご確認させていただければ調査も出来ますが
まずHTMLとCSSを再度見直していただき、
何かスクリプト部分に影響してしまっていないか確認してみてください。
よろしくお願いします。
先日は大変お世話になりました。
こちらのビューアー、大変便利で助かっております。
こちらのビューアーで、最初に表示される写真を、リンクなどで
変更にすることは可能でしょうか？
あるリンクから飛んだ場合には、2つ目の写真が最初に表示され、
また別のリンクからの場合には、3つ目の写真が最初に表示される。。
といった具合です。
お時間ありましたら、是非よろしくお願いいたします。
＞mammaさん
コメントありがとうございます！
このビューアーをいろいろと試していただいているようで
とても嬉しく思っております。
ご質問いただきました別ページからのリンクで
表示する写真の番号を切り替える件についてですが
リンクされるURLに対して、アドレスの後に何番目の写真を表示させるか判断させる
アンカーリンク的な「#n」を付ける形ならば可能かと思います。
【例】———————————
ｈｔｔｐ：／／○○○○○．ｈｔｍｌ＃２
—————————————
※２番目の写真を表示させる為のURL
そして実際のタブが存在するページのスクリプトには
以下の内容を追加します。
—————————————
var url = document.URL;
if(url.indexOf(‘#’)){
var numSplit = ((url.split(‘#’)[1])-1);
$(‘#viewer ul li’).eq(numSplit).click();
}
—————————————
飛んできたURLの「#」のついた番号を判別して
その番号のサムネイルをクリックさせます。
サンプルファイルも用意しましたので
必要であれば下記URLよりダウンロードしてみてください。
http://black-flag.net/devel/jQuerySimpleImageViewer/jQuerySimpleImageViewerURLswitch.zip
※ファイル内の「list.html」から確認してみてください。
ご確認よろしくお願いします。
早速ご返答いただきまして、恐縮です。
いつもお世話になっております。
いただきました内容でやってみたいと思います。
ちょっとバタバタしてしまって。。汗
本当にありがとうございました！
＞mammaさん
ご確認ありがとうございます！
if文使って「document.URL;」で変数に入れたURLと
特定のURLが一致した際に表示番号を変える、ということも
出来るかもしれないので、いろいろ試してみてください。
よろしくお願いします！
>Black Flag様
先日質問させていただいた、佐藤です。
早速ご返答をいただいていたのに、長い間返信もなく、申し訳ありませんでした。
ご指南いただきましたように、htmlファイルとcssファイルを見直してみたのですが、わたしの知識では、原因を特定することができませんでした・・・
下記に、htmlとcssの抜粋を記載いたします。
もしよろしければ、お時間のある時にでも一度ご覧いただけたらと思います。
初心者が勝手なお願いをしてしまい、大変恐縮です。
どうぞ、よろしくお願いいたします。
■html
＜div id=”viewer”＞
＜div＞
＜img src=”img/top/top01.jpg” width=”600″ height=”360″ alt=”photo01″＞
＜img src=”img/top/top02.jpg” width=”600″ height=”360″ alt=”photo02″＞
＜img src=”img/top/top03.jpg” width=”600″ height=”360″ alt=”photo03″＞
＜img src=”img/top/top04.jpg” width=”600″ height=”360″ alt=”photo04″＞
＜img src=”img/top/top05.jpg” width=”600″ height=”360″ alt=”photo05″＞
＜img src=”img/top/top06.jpg” width=”600″ height=”360″ alt=”photo06″＞
＜img src=”img/top/top07.jpg” width=”600″ height=”360″ alt=”photo07″＞
＜img src=”img/top/top08.jpg” width=”600″ height=”360″ alt=”photo08″＞
＜/div＞
＜ul＞
＜li＞＜a href=”javascript:void(0);”＞＜img src=”img/top/top01_thumb.jpg” width=”45″ height=”45″ alt=”photo01″ /＞＜/a＞＜/li＞
＜li＞＜a href=”javascript:void(0);”＞＜img src=”img/top/top02_thumb.jpg” width=”45″ height=”45″ alt=”photo02″ /＞＜/a＞＜/li＞
＜li＞＜a href=”javascript:void(0);”＞＜img src=”img/top/top03_thumb.jpg” width=”45″ height=”45″ alt=”photo03″ /＞＜/a＞＜/li＞
＜li＞＜a href=”javascript:void(0);”＞＜img src=”img/top/top04_thumb.jpg” width=”45″ height=”45″ alt=”photo04″ /＞＜/a＞＜/li＞
＜li＞＜a href=”javascript:void(0);”＞＜img src=”img/top/top05_thumb.jpg” width=”45″ height=”45″ alt=”photo05″＞＜/a＞＜/li＞
＜li＞＜a href=”javascript:void(0);”＞＜img src=”img/top/top06_thumb.jpg” width=”45″ height=”45″ alt=”photo06″＞＜/a＞＜/li＞
＜li＞＜a href=”javascript:void(0);”＞＜img src=”img/top/top07_thumb.jpg” width=”45″ height=”45″ alt=”photo07″＞＜/a＞＜/li＞
＜li＞＜a href=”javascript:void(0);”＞＜img src=”img/top/top08_thumb.jpg” width=”45″ height=”45″ alt=”photo08″＞＜/a＞＜/li＞
＜/ul＞
＜/div＞＜!–/#viewer–＞
■css
div#viewer {
margin: 0 auto;
width: 645px;
float: left;
}
#viewer div {
width: 600px;
height: 360px;
overflow: hidden;
position: relative;
float:left;
}
#viewer div img {
top: 0;
left: 0;
position: absolute;
}
#viewer ul {
width: 45px;
float:right;
}
#viewer ul li {
width: 45px;
display: inline;
}
#viewer .active {
filter:alpha(opacity=100)!important;
-moz-opacity: 1!important;
opacity: 1!important;
}
/* =======================================
ClearFixElements
======================================= */
#viewer ul:after {
content: “.”;
height: 0;
clear: both;
display: block;
visibility: hidden;
}
#viewer ul {
display: inline-block;
overflow: hidden;
}
※実際のページがこちらです。
http://www.huckfinnfactory.com/test/
＞佐藤さん
ご返答ありがとうございます。
ご連絡いただいたテストページ確認させていただきましたが
やはりJS側の問題では無くHTMLソース内の誤植の影響だと思われます。
＜head＞タグ内に記載されているJavaScriptのmetaデータ
—————————————————–
＜meta http-equiv=”content-style-type” content=”text/javascript”＞
—————————————————–
ここに記載されている「content-style-type」はスタイルシート用の記述になるので
スクリプトの場合は「content-script-type」になり、
—————————————————–
＜meta http-equiv=”content-script-type” content=”text/javascript”＞
—————————————————–
といった記述になります。
この部分の記載が誤っていた影響で
スクリプトが正常に動作していない原因と思われるので
上記部分を修正してみてください。
よろしくお願いします。
>Black Flag様
ご返信、ありがとうございます！！
ご指摘いただいた通り、metaデータの誤植が原因でした・・・
安易にコピペを使用してしまったためのミスです。恥ずかしいです・・・
ミスに気づいていただき、大変助かりました！！
本当にありがとうございました！！！
こんにちは、はじめまして。
とてもわかりやすく、利用しやすく大変助かってます。本当にありがとうございます。
一点、お伺いしたのですが、現在はクリックでメイン画像が変わる仕様になっていますが、
マウスオーバーでメイン画像が該当画像に切り替わるような仕様にはできるでしょうか？
大変お手数ですがご確認何卒よろしくお願い致します！
＞tkさん
コメントありがとうございます。
このスライドショースクリプトがお役に立ったようで嬉しく思っております。
ご質問いただいたマウスオーバーでの動作についてですが
スクリプト10行目にある
——————————————————————
$(‘#viewer ul li’).click(function(){
——————————————————————
の部分を
——————————————————————
$(‘#viewer ul li’).hover(function(){
——————————————————————
とすることで実現可能かと思います。
お試しください。
よろしくお願いします。
ありがとうございます！！正常に動きました！
ちなみに、、画像の自動スライドがなくなってしまったのですが、
自動スライド＋マウスオーバーで画像切替となると
コードは全く違うものになってしまうのでしょうか？
大変お手数ですがご確認よろしくお願い致します。
＞tkさん
ご確認ありがとうございます。
当記事で紹介しているスライドビューアーは
もともと自動スライド動作は実装していないパターンになっておりますので
どういう実装方法をされているのかこちらでは判断できません。。。
当ブログの別記事のスクリプトで実装されているのしょうか？
ご確認ください。
よろしくお願いします。
すみません、私の勘違いのようです。
先日ご返答いただいた内容で満足しておりますので、
問題ございます。
本当にお世話になりました。
今後も活用させていただきます。
ありがとうございました！！
＞tkさん
ご確認ありがとうございます。
ひとまずは理想としていた動作が実装できた様で安心致しました。
また何かあればご連絡くださいませ。
よろしくお願いします。
はじめまして、貴殿のスライドショーがシンプルでかっこよかったので使用させて頂いております。
使用していてサムネイルを右側で縦に配置したいと思ったのですが、どの部分を変更すれば出来るのか
わからないので、教えて頂ければと思いコメントさせて頂きました。
宜しければご教授頂ければと思います、何卒よろしくお願い致します！
＞A.Hさん
コメントありがとうございます。
この画像ビューアースクリプトをご活用いただいているようで
嬉しく思っております。
ご質問いただきました件についてですが
画像ビューアーのレイアウトについては
スクリプト側では特に指定していないので
HTMLとCSSの構成での調整になります。
サンプルで言うところの
「#viewer」「#viewer div」「#viewer ul」「#viewer ul li」
あたりの要素のレイアウトをCSSで調整してみてください。
よろしくお願いします。
返信遅れてしまい申し訳ございません。
教えて頂いた箇所を調整して使用させて頂きます！
丁寧に教えて頂きまして本当にありがとうございました！
jQueryでシンプルなサムネイル付き画像ビューアーを作成する方法 | webサイト作成に関する自分メモ | 2013.03.05 23:46
[...] jQueryでシンプルなサムネイル付き画像ビューアーを作成する方法 2013/03/05 pein0325 jquery スライドショー No comments http://black-flag.net/jquery/20110512-3039.html [...]
はじめまして、貴殿のスライドショーがシンプルで使い易く、いつも愛用しています。
ご質問ですが、スライドショーのサムネイル(二番目や三番目)を初めにクリックした時に、一番最後のサムネイルの画像がメインビジュアルに一瞬表示されると思うのですが、この現象を修正する方法はありますでしょうか？
ご検証をよろしくお願いします。
＞ytさん
コメントありがとうございます。
この画像ビューアースクリプトをご活用いただいている様で
嬉しく思っております。
ご質問いただきました件についてですが、
その様な現象が起きないようにスクリプトを少し改修してみました。
当記事のスクリプトの一部を書き換えてあるので
サンプルファイルと共に動作の方再度ご確認してみてください。
よろしくお願いします。
Black Flag様
はじめまして。いつもこちらのビューアーを愛用させていただいております。
一点質問なのですが、同一ページ内に複数のビューアーをおいた場合、2つ目や3つ目のビューアーの
画像がうまく表示されませんでした。
こちらをうまく表示させる方法はありますでしょうか？
（ちなみにですが、タブ切り替えのため同一ページ内に複数おいております）
お手すきの際、ご回答いただけますと幸いです。
よろしくお願いいたします。
＞YORIさん
コメントありがとうございます。
この画像ビューアースクリプトをご活用いただいている様で
嬉しく思っております。
ご質問いただきました件についてですが、
この画像ビューアースクリプトは
もともと複数設置を想定していないのですが
そういった要望は多くいただいているので
複数設置ができる改訂版スクリプトの用意ができましたら
またご紹介させていただきたいと思っております。
よろしくお願いします。
はじめまして、シンプルなサムネイル付き部ビューアーを探していてこちらにたどり着きました。
丁寧でわかり易い説明で初心者の自分でも大変参考になっています。
ありがとうございました。
これからも勉強させていただきます。
＞p10さん
コメントありがとうございます。
その様なお言葉をいただけると
とても嬉しく励みになります。
これからもシンプルで使い易いスクリプトを
心掛けて更新していきますので
今後ともよろしくお願い致します。
ご無沙汰しております。mammaと申します。
以前から、こちらのビューアーを使わせていただいております。
早速なのですが、サムネイルを横に長くスクロールなどで表示させることはできますでしょうか？
こちらのサイトの「jQueryでシンプルなカルーセルパネルスライドUIを・・・」という
ものと組み合わせればできそうかな？と思っていたのですが、
サムネイル部分をdivで囲むと、親の要素の方に影響がでる？ようで、うまくいきません。。。
拙い説明で恐縮ですが、なにか方法がございましたら、是非よろしくお願いいたします。
＞mammaさん
ご無沙汰しております。
この画像ビューアースクリプトを
ご活用いただいているようで嬉しく思っております。
ご質問いただきました件についてですが
当記事のスクリプトのメイン画像部分を
＜div＞の切り替え構成にしているパターンが御座いますので
——————————————————–
http://black-flag.net/devel/jQuerySimpleImageViewer/jQuerySimpleImageViewerDIV.zip
——————————————————–
こちらのデータをご参照していただき、
——————————————————–
・jQueryでシンプルなカルーセルパネルスライドUIを作成する方法
http://black-flag.net/jquery/20110614-3200.html
——————————————————–
こちらのカルーセルパネルスクリプトと組み合わせることで
実現可能かと思っております。
お試しください。
よろしくお願いします。
ご回答いただき、ありがとうございます。
早速教えていただいた方法で試したところ、思ったようなものができました！
いつも助けていただき、大変感謝しております。
今後ともよろしくお願いいたします。
こんばんは、こちらのサイト様にはいつも助けられています。
今回もこちらのスクリプトをしようさせていただこうと思いましたが、ひとつ質問があります。
最初に表示させる画像を指定することは可能でしょうか？
1〜4までの画像があって並び順は1.2.3.4の順で
ページを開いた時に2のメイン画像とサムネイルをアクティブ状態にしたいということです。
質問がわかりにくかったらすみません。
よろしくお願いいたします。
＞さくさん
コメントありがとうございます。
この画像ビューアースクリプトをご活用いただいている様で
嬉しく思っております。
ご質問頂きました件についてですが
ページロード時に2番目のアイテムをアクティブ状態にするには
当記事スクリプトの7行目と28行目の「:first」と指定してあるものを削除して
「.eq(1)」とポジションの指定をすることで可能になるかと思います。
（.eqは「0」が1番目になるので2番目の場合は「1」を指定します。）
参考までにサンプルファイルも用意しましたので
必要であれば下記からダウンロードしてみてください。
http://black-flag.net/devel/jQuerySimpleImageViewer/jQuerySimpleImageViewerEq1.zip
ご確認ください。
よろしくお願いします。
丁寧に教えてくださり、ありがとうございます！
またサンプルファイルもご用意いただきありがとうございます。
とても助かりました！
やりたかったことができ、気持ちも軽くなりました。
今後ともどうぞよろしくお願いいたします。
こんにちは、以前もスライドショーに関してコメントさせて頂きました。
その節はお世話になりました。
横長と縦長の画像が混在しているのですが
縦長の画像の左右に余白を持たせて、無理矢理横長画像と同じサイズにしてましたが、
画像が小さくなってしまうため、今回
どんな形状の画像でも「縦横共にセンタリング」させたいと思って、数日前から思考錯誤しています。
スライドショーを使ってない場所では、色々割愛しますが以下のようなもので上手くいきました。
display:table-cell;
width:200px;
height:195px;
text-align:center;
vertical-align:middle;
layout-grid-line:200px;
が、スライドショーを使ってる部分では
positionの指定がないので、サムネイルをクリックして行くと、大きく表示される画像 が下にずれ込んで行ってしまいます。（同じ位置に表示されない）
やっぱりpositionの指定は外せない、と思って、上記の記述をやめて別サイトで見つけた情報で
overflow: auto;
margin: auto;
position: absolute;
top: 0; left: 0; bottom: 0; right: 0;
これで確かにできて喜んでいたのですが（IE10です）
互換表示にすると、position: absoluteで指定した位置がまるで無視されています。
IE対策というのもいろいろやってみましたが上手く行かず
お手上げになってしまいました・・・
このスライドショーで、サムネイルをクリックした時に
縦横サイズが様々な画像を
定位置で縦横共にセンタリング表示するのは難しいでしょうか？
撮影の際に画像の向きをそろえておくべきだったと今更後悔してますが、
撮影し直しは気が遠くなるので、もし良い案があれば教えて頂ければ嬉しいです。
＞ころさん
コメントありがとうございます。
このスライドショースクリプトを色々とご活用いただいている様で
嬉しく思っております。
ご質問いただいた件についてですが
IE10の互換表示のみの問題ならば
HTML側にmetaタグにてIEの互換モードの制限
——————————————————
＜meta http-equiv=”X-UA-Compatible” content=”IE=Edge”＞
——————————————————
を付け加えて、互換モードの切り替えを非表示にすることで
大丈夫なのではないかと思っております。
スクリプト側でスライドエリアの画像を縦横中央にする場合は
スライドエリアの幅と高さを見て、
画像の幅と高さがそれ以下だった場合に
画像に対して
——————————————————
エリア幅（もしくは高さ）-画像幅（もしくは高さ）÷2
——————————————————
の値を「top」や「left」に入れることで可能かと考えております。
参考までにサンプルを用意しました。
http://black-flag.net/devel/jQuerySimpleImageViewer/jQuerySimpleImageViewerCenter/
ファイルのダウンロードが必要な場合は下記URLをクリックしてください。
http://black-flag.net/devel/jQuerySimpleImageViewer/jQuerySimpleImageViewerCenter.zip
お試しください。
よろしくお願いします。
BlackFlag 様
サンプルまで作って頂いてありがとうございます！
お手数おかけしました。
縦横サイズを取得するscriptは本日発見したのですが
自分用にいじっているうちにどうにもならなくなっていました^^;
よい勉強にはなりましたが、もう諦めようかと思っていたので本当に助かりました！
ありがとうございました。
見栄えがよくなった！Web制作するなら知っておきたいjQueryプラグインまとめ | コムテブログ | 2014.05.07 8:34
[...] jQueryでシンプルなサムネイル付き画像ビューアーを作成する方法 | BlackFlag [...]
こんにちは。はじめまして。
大きい画像にリンクを付けたビューアーを
利用させていただこうと思っております。
そこで、１つお聞きしたいのですが、
この大きい画像にマウスを載せた際に、
半透明でポップアップするキャプションを
重ねることは可能でしょうか。
ご多忙とは思いますが、ご回答頂ければ幸いです。
よろしくお願いいたします。
＞まささん
コメントありがとうございます。
当記事の画像ビューアーをご活用いただいている様で
嬉しく思っております。
ご質問いただきました件についてですが、
そのような動作を実装することももちろん可能です。
大きい画像のロールオーバーイベントを
別で指定することで実装できるかと思いますが
サンプルをご用意する余裕がないので・・・
jQueryの「.hover()」メソッドや「.animate()」メソッドを
組み合わせる構成になると思いますので色々調べてみてください。
よろしくお願いします。
この画像ビュアーを1ページ内に2つ設置すると、あとに設置した方は拡大画像が最初現れず、サムネイルをクリックしないと現れません。
複数設置する場合の記述を教えて下さい
＞くみさん
以前から当スクリプトの複数設置の要望がありましたので
サンプルの方、用意させていただきました。
http://black-flag.net/devel/jQuerySimpleImageViewer/jQuerySimpleImageViewerMultiple/
ファイルのダウンロードについては下記URLをクリックしてください。
http://black-flag.net/devel/jQuerySimpleImageViewer/jQuerySimpleImageViewerMultiple.zip
複数設置の際にはベースとなるブロック要素のCSSは
IDではなくクラスで制御してあります。
動作の方ご確認ください。
よろしくお願いします。