jqueryの画像切り替え

よろしくお願いします。
下のコードでmain_photoの画像を切り替えるボタンをliに設定しました。
デザイン的にこのリストをpain_photoで表示される画像の上に重ねたいのですが、うまくく行きません。

<div id="photo_container">
<!-- #thumbnail -->
<ul id="thumbnail">
<li><a href="image/1.jpg"><img src="image/thumb/1.jpg" alt="photo1" /></a></li>
<li><a href="image/2.jpg"><img src="image/thumb/2.jpg" alt="photo2" /></a></li>
:
:
</ul>
<!-- /#thumbnail -->

<!-- #main_photo -->
<div id="main_photo">
</div>
<!-- /#main_photo -->
</div><!-- /#photo_container -->


CSSはこのようになっています。
#thumbnail{
overflow: hidden;
width: 330px;
}
#thumbnail li{
float: left;
}
#thumbnail li img{
width: 100%;
filter: alpha(opacity=50);
}
#thumbnail li.current img{
opacity: 1;
filter: alpha(opacity=100);
}
#main_photo{
position: relative;
}
#main_photo img{
position: absolute;
top:0;
width: 100%;
}

何卒宜しくお願い申し上げます。

質問者からの補足コメント

• 

  http://memocarilog.info/jquery/7477
  こちらのサイトを参考にしております。

    補足日時：2016/02/25 13:26

No.1 回答者： t_fumiaki 回答日時： 2016/02/25 12:56

多分、小さなサムネイル画像をクリックすると、その下のメイン画像が切り替わる例として、どこかの紹介サイトを丸ごとコピペしたものと見受けられる。

jqueryを使うといっておきながら、肝心のjava scriptが無い。
java scriptの記述も結構大変なので、本当はcss+htmlだけで出来る例を探したほうが良いと思う。


①以下のjava scriptを</body>の直前に先ず入れる。
②それから、画像のサイズなどを見ながら調整する。

<script src="https://ajax.googleapis.com/ajax/
libs/jquery/1.11.1/jquery.min.js"></script>
<script>
// 横幅などの設定
var options = {
maxWidth : 520, // #photo_container の max-width を指定(px)
thumbMaxWidth : 80, // #thumbnail li の max-width を指定(px)
thumbMinWidth : 60, // #thumbnail li の min-width を指定(px)
fade : 500 // フェードアウトするスピードを指定
};

$(function(){
// 変数を作る
var thumbList = $('#thumbnail').find('a'),
mainPhoto = $('#main_photo'),
img = $('<img />'),
imgHeight;

// 親ボックスと li 要素に max-width 指定
$('#photo_container').css('maxWidth', options.maxWidth);

// li 要素の横幅の計算と指定
var liWidth = Math.floor((options.thumbMaxWidth / options.maxWidth) * 100);
$('#thumbnail li').css({
width : liWidth + '%',
maxWidth : options.thumbMaxWidth,
minWidth : options.thumbMinWidth
});

// 最初の画像の div#main_photo へ表示と current クラスを指定
img = img.attr({
src: $(thumbList[0]).attr('href'),
alt: $(thumbList[0]).find('img').attr('alt')
});
mainPhoto.append(img);
$('#thumbnail li:first').addClass('current');

// メイン画像を先に読み込んどく
for(var i = 0; i < thumbList.length; i++){
$('<img />').attr({
src: $(thumbList[i]).attr('href'),
alt: $(thumbList[i]).find('img').attr('alt')
});
}

// サムネイルのクリックイベント
thumbList.on('click', function(){
// img 要素を作り サムネイル画像からリンク・altの情報を取得・設定する
var photo = $('<img />').attr({
src: $(this).attr('href'),
alt: $(this).find('img').attr('alt')
});

// div#main_photo へ 上で作った img 要素を挿入する
mainPhoto.find('img').before(photo);
// div#main_photo に先に表示されていた img 要素をフェードしながら非表示にし要素を消す、
mainPhoto.find('img:not(:first)').stop(true, true).fadeOut(options.fade, function(){
$(this).remove();
});

// 新しく表示した img の親 li へ .current を付け、
// 他の li 要素についていた .current を削除する
$(this).parent().addClass('current').siblings().removeClass('current');
// 画像の親要素を現在表示中の画像の高さへ変更する
mainPhoto.height(photo.outerHeight());
return false;
});

// ウィンドウが読み込まれた時とリサイズされた時に
// div#main_photo の高さを img の高さへ変更する
$(window).on('resize load', function(){
mainPhoto.height(mainPhoto.find('img').outerHeight());
});
});
</script>

この回答へのお礼

ご返答ありがとうございます。
jqueryのコード自体は
http://memocarilog.info/jquery/7477
こちらのサイトを参考にしております。

切り替え自体は出来るのですが、リスト(サムネイル)をmain_photoに重ねて画像の上にボタンがあるようにしたいのですが、marginなどで位置を調整するとどうしてもリストよりmain_photoのほうが上に来てしまい、ボタンが隠れてしまい悩んでおります

お礼日時：2016/02/25 13:25

No.2 ベストアンサー 回答者： t_fumiaki 回答日時： 2016/02/25 16:47

jqueryを使って、各自がjavaで作成している訳で

http://memocarilog.info/jquery/7477の作成者に質問した方が早いです。


>>main_photoに重ねて画像の上に
メニューの様に使いたいなら、メイン画像の上に横に並べれば良いとおもいますが・・・。

例えば、http://black-flag.net/jquery/20111122-3597.html。
html内の例ではulを先に記述する必要がありますが・・。

この回答へのお礼

ご返答ありがとうございます。
教えていただいたページのサンプル3がまさに求めていた形でした。
こちらを参考にさせていただきます。

お礼日時：2016/02/25 20:45