CSSとhtmlでギャラリーを作成しました。ライトボックスエフェクトを作成するためにJQueryを使用しました。イメージのより小さなバージョンをクリックすると、ライトボックスで開きます。すべてのサムネイルはコンテナdivにあり、それぞれのdiv内にあります。私が正しく動作させることができないのは、次のイメージにスクロールすることです。私はすべてのdiv画像を取得する配列を持っていますが、画像をスクロールする代わりにスクロールをクリックすると、他のdivが消えます。どんな助けでも大歓迎です。私はJQueryとjavascriptが初めてです。JQueryで項目を選択して別のdivの配列内の項目をスクロールする方法
UPDATED:画像をデモに表示するようにHTMLを更新しました。ご覧のように、画像をクリックすると、ライトボックスが開き、画像が拡大表示されます。矢印をクリックすると、次の画像に行くのではなく、その下のdivと画像が隠されます。あなたのデモは動作しません
$(document).ready(function() {
\t $("img").click(function(){
\t \t $src=$(this).attr("src");
\t \t $title=$(this).attr("title");
\t \t $alt=$(this).attr("alt");
if(!$("#lightbox").length>0){
\t \t \t $('body').append("<div id='lightbox'><span class='closer'>X</span><span class='nextimg'>></span><span class='previmg'><</span><div class='lightbox_container'><img src='' title='' alt=''><p>" + $title + "</p></div></div>");
$("#lightbox img").attr("src",$src);
\t \t \t $("#lightbox img").attr("alt",$alt);
\t \t \t $("#lightbox img").attr("title",$title);
\t \t \t $("#lightbox").show();
var picArray = [];
\t \t \t $('div.lightboxsm img').each(function(){
\t \t \t \t picArray.push(this);
\t \t \t \t var id = $(this).attr('id');
\t \t \t \t var src = $(this).attr('src');
\t \t \t \t var alt = $(this).attr('alt');
\t \t \t });
\t \t \t
\t \t \t var i = 0;
\t \t \t displayPic(0); //show the first photo initially
\t \t \t
\t \t \t $('.previmg').click(function(){
\t \t \t \t i--;
\t \t \t \t displayPic(i);
\t \t \t \t $('#lightbox img').attr(src);
\t \t \t });
\t \t \t
\t \t \t $('.nextimg').click(function(){
\t \t \t \t i++;
\t \t \t \t displayPic(i);
\t \t \t \t $('#lightbox img').attr(src);
\t \t \t });
\t \t \t
\t \t \t function displayPic(i) {
\t \t \t \t $('#lightbox img').empty();
\t \t \t \t $('#lightbox img').append(picArray[i]);
\t \t \t
\t \t \t \t if(i == 0)
\t \t \t \t \t $('.previmg').hide();
\t \t \t \t else
\t \t \t \t \t $('.previmg').show();
\t \t \t
\t \t \t \t if(i == picArray.length-1)
\t \t \t \t \t $('.nextimg').hide();
\t \t \t \t else
\t \t \t \t \t $('.nextimg').show();
\t \t \t }
}else{
\t \t \t $("#lightbox img").attr("src",$src);
\t \t \t $("#lightbox img").attr("alt",$alt);
\t \t \t $("#lightbox img").attr("title",$title);
\t \t \t $("#lightbox").show();
\t \t }
\t });
$("body").on('click', '#lightbox .closer',function(){
\t \t $("#lightbox").hide();
\t });
});
#lightbox_container {
\t width:100%;
\t text-align:center;
\t
}
.lightboxsm {
\t width: 175px;
height: 175px;
overflow: hidden;
\t /*float:left;*/
\t display:inline-block;
\t padding:10px;
\t position:relative;
\t cursor:pointer;
}
.lightboxsm img{
\t width:auto;
height: 175px;
\t object-fit: cover;
}
#lightbox{
\t position:fixed;
\t height:100%;
\t width:100%;
\t background: rgba(0, 0, 0, 0.5);
\t left:0;
\t right:0;
\t top:0;
\t bottom:0;
\t z-index:200;
}
#lightbox img{
\t max-width:80%;
\t max-height:80%;
\t position:fixed;
\t left:0;
\t right:0;
\t top:0;
\t bottom:0;
\t margin:auto;
}
.closer {
\t display: block;
height: 60px;
width: 60px;
line-height: 60px;
-moz-border-radius: 30px;
border-radius: 30px;
background-color: black;
color: white;
text-align: center;
font-size: 2em;
\t float:right;
\t margin:5% 10%;
\t z-index:250;
}
.closer:hover {
\t cursor:pointer;
}
.nextimg {
\t display: block;
height: 60px;
width: 60px;
line-height: 60px;
-moz-border-radius: 30px;
border-radius: 30px;
background-color: black;
color: white;
text-align: center;
font-size: 2em;
\t float:right;
\t margin:5% 10%;
\t z-index:600;
\t clear:right;
}
.nextimg:hover {
\t cursor:pointer;
}
.previmg {
\t display: block;
height: 60px;
width: 60px;
line-height: 60px;
-moz-border-radius: 30px;
border-radius: 30px;
background-color: black;
color: white;
text-align: center;
font-size: 2em;
\t float:left;
\t margin:5% 10%;
\t z-index:600;
\t clear:left;
}
.previmg:hover {
\t cursor:pointer;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="lightbox_container">
<div class="lightboxsm" id="img1">
<img src="http://2017.sunkissed-villas.com/images/1.png" alt="1"/>
</div>
<div class="lightboxsm" id="img2">
<img src="http://2017.sunkissed-villas.com/images/2.png" alt="2"/>
</div>
<div class="lightboxsm" id="img3">
<img src="http://2017.sunkissed-villas.com/images/3.png"/>
</div>
<div class="lightboxsm" id="img4">
<img src="http://2017.sunkissed-villas.com/images/4.png" alt="4"/>
</div>
<div class="lightboxsm" id="img5">
<img src="http://2017.sunkissed-villas.com/images/5.png" alt="5"/>
</div>
</div>
。プロジェクトの問題を完全かつ最小限に検証できるデモを作成してください。 http://stackoverflow.com/help/mcve –
*プログラム全体をコピーするだけではありません!*あなたの質問を読んで理解するためのMicrosoftのコースです。 ;-P –
ありがとう、私は全体をコピーしていない。問題の関連コードのみをコピーしました。私は彼らが今示すように画像とのリンクを更新しました。私は理解できない部分を除いて同じ作品。 –