これがすでに回答されている場合はご容赦ください。ただし、検索したところ、私の要求に十分に類似したケースが見つかりませんでした。
私は8枚の画像を持っています（最終的にはデータベースから情報を引き出すことになりますが、その部分を自分で動かしてみたいと思います）.
各画像は、その画像 (イベント) の詳細を保持する div のトグルです。
現時点では、すべての詳細 div が非表示になっており、画像をクリックすると、その詳細 div が「表示」されます。詳細 div には「非表示」ボタンがあり、詳細 div を非表示にし、画像がスライドして下から表示されます。
画面の下部にある別の画像をクリックすると、詳細 div が開いている (表示されている) ときに、その詳細 div が閉じて、クリックした画像の詳細 div が開くようにしたいと思います。
最終的には、次の詳細 div にスクロールする詳細 div 内の「次の」リンクが必要ですが、一度に 1 ステップずつです。
私が持っているコードは次のとおりです。
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$(".obtn1").click(function(){
$(".detail1").show(1500);
});
});
$(document).ready(function(){
$(".cbtn1").click(function(){
$(".detail1").hide(1500);
});
});
$(document).ready(function(){
$(".obtn2").click(function(){
$(".detail2").show(1500);
});
});
... on up to obtn8 and cbtn8
</script>
次のhtmlで：
<div id="event-detail">
<div class="detail1" style="display:none;height:1000px;" align="center">
<img class="cbtn1" src="images/dev_detail/more.gif" width="70" height="30">
<img src="images/dev_detail/photo-backgrund1.jpg" width="650" height="478">
<img class="cbtn1" src="images/dev_detail/more.gif" width="70" height="30">
</div>
<div class="detail2" style="display:none;height:1000px;" align="center">
<img class="cbtn2" src="images/dev_detail/more.gif" width="70" height="30">
<img src="images/dev_detail/photo-backgrund2.jpg" width="650" height="478">
<img class="cbtn2" src="images/dev_detail/more.gif" width="70" height="30">
</div>
<div class="detail3" style="display:none;height:1000px;" align="center">
<img class="cbtn3" src="images/dev_detail/more.gif" width="70" height="30">
<img src="images/dev_detail/photo-backgrund3.jpg" width="650" height="478">
<img class="cbtn3" src="images/dev_detail/more.gif" width="70" height="30">
</div>
... on up to 8
<table width="800" border="0" cellpadding="0" cellspacing="0">
<tr>
<td><img class="obtn1" src="images/dev_detail/BitterSuite_logo1.jpg" width="200" height="147">
</td>
<td><img class="obtn2" src="images/dev_detail/BitterSuite_logo2.jpg" width="200" height="147">
</td>
<td><img class="obtn3" src="images/dev_detail/BitterSuite_logo3.jpg" width="200" height="147">
</td>
<td><img class="obtn4" src="images/dev_detail/BitterSuite_logo4.jpg" width="200" height="147">
</td>
</tr>
<tr>
<td><img class="obtn5" src="images/dev_detail/BitterSuite_logo5.jpg" width="200" height="147">
</td>
<td><img class="obtn6" src="images/dev_detail/BitterSuite_logo6.jpg" width="200" height="147">
</td>
<td><img class="obtn7" src="images/dev_detail/BitterSuite_logo7.jpg" width="200" height="147">
</td>
<td><img class="obtn8" src="images/dev_detail/BitterSuite_logo8.jpg" width="200" height="147">
</td>
</tr>
</table>
現時点では、デフォルトのスライド効果が非常に気に入っており、可能であればそれを維持したいと考えています。これに関するヘルプは非常に高く評価されます。前もって感謝します。乾杯アル