通過jQuery燈箱照片循環

我無法知道如何構建功能以便能夠點擊滾動瀏覽燈箱中的照片。我在想一個解決方案可以遍歷每一個點擊進入下一個索引，但我不知道如何去做。我是編程新手，正在嘗試從頭開始構建而不需要插件。我的代碼在下面，我已經包含了一個鏈接，所以你可以看到目前的項目。通過jQuery燈箱照片循環

https://abharms.github.io/Interactive_Photo_Gallery/

HTML

<body> 
    <div class="form-container"> 
     <form> 
      <input type="text" name="search" value="Search"> 
     </form> 
    </div> 
    <div class="photos-container"> 
     <div class="row"> 
      <div class="col-3 images"> 
       <a href="photos/01.jpg"><img src="photos/thumbnails/01.jpg" alt="I love hay bales. Took this snap on a drive through the countryside past some straw fields."></a> 
       <a href="photos/02.jpg"><img src="photos/thumbnails/02.jpg" alt="The lake was so calm today. We had a great view of the snow on the mountains from here."></a> 
       <a href="photos/03.jpg"><img src="photos/thumbnails/03.jpg" alt="I hiked to the top of the mountain and got this picture of the canyon and trees below."></a> 
      </div> 

      <div class="col-3 images"> 
       <a href="photos/04.jpg"><img src="photos/thumbnails/04.jpg" alt="It was amazing to see an iceberg up close, it was so cold but didn’t snow today."></a> 
       <a href="photos/05.jpg"><img src="photos/thumbnails/05.jpg" alt="The red cliffs were beautiful. It was really hot in the desert but we did a lot of walking through the canyons."></a> 
       <a href="photos/06.jpg"><img src="photos/thumbnails/06.jpg" alt="Fall is coming, I love when the leaves on the trees start to change color."></a> 
      </div> 


      <div class="col-3 images"> 
       <a href="photos/07.jpg"><img src="photos/thumbnails/07.jpg" alt="I drove past this plantation yesterday, everything is so green!"></a> 
       <a href="photos/08.jpg"><img src="photos/thumbnails/08.jpg" alt="My summer vacation to the Oregon Coast. I love the sandy dunes!"></a> 
       <a href="photos/09.jpg"><img src="photos/thumbnails/09.jpg" alt="We enjoyed a quiet stroll down this countryside lane. "></a> 
      </div> 

      <div class="col-3 images"> 
       <a href="photos/10.jpg"><img src="photos/thumbnails/10.jpg" alt="Sunset at the coast! The sky turned a lovely shade of orange."></a> 
       <a href="photos/11.jpg"><img src="photos/thumbnails/11.jpg" alt="I did a tour of a cave today and the view of the landscape below was breathtaking."></a> 
       <a href="photos/12.jpg"><img src="photos/thumbnails/12.jpg" alt="I walked through this meadow of bluebells and got a good view of the snow on the mountain before the fog came in."></a> 
      </div> 


     </div> 
    </div> 


<script type="text/javascript" src="js/gallery.js"></script> 
</body>

CSS

form { 
    text-align: center; 
    margin-top: 30px; 
} 

input[type=text] { 
    height: 32px; 
    width: 58%; 
    border: 2px solid lightgray; 
    border-radius: 4px; 
} 

input[type=text]:focus { 
    outline: none; 
} 

img { 
    display: block; 
    margin: 0 auto 30px auto; 
} 

.col-3 { 
    text-align: center; 
} 

.col-3:first-child { 
    margin-top: 30px; 
} 

#overlay { 
    background: rgba(0,0,0,0.7); 
    width: 100%; 
    height: 100%; 
    position: absolute; 
    top: 0; 
    left: 0; 
    display: none; 
} 

#overlay img { 
    width: 50%; 
    margin-top: 10%; 
} 

.imageContainer { 
    max-height: 100% 
    width: 600px; 
    margin: 0 auto; 
    position: relative; 
} 

#caption { 
    color: white; 
    margin: 0 auto; 
    text-align: center; 
    max-width: 600px; 

} 

a.leftArrow, 
a.rightArrow { 
    padding: 15px; 
} 

.leftArrow, 
.rightArrow { 
    color: white; 
    font-size: 56px; 
    position: absolute; 
    top: 22%; 
} 

.leftArrow { 
    left: 12%; 
} 

.rightArrow { 
    right: 12%; 
} 



@media only screen and (min-width: 820px) { 

.row { 
    margin-top: 40px; 
} 

.photos-container { 
    width: 100%; 
    margin: 0 auto; 
    } 
.col-3 { 
    width: 25%; 
    float: left; 
} 

.col-3:first-child { 
    margin-top: 0; 
} 

input[type=text] { 
    width: 460px; 
} 

.leftArrow, 
.rightArrow { 
    top: 35%; 
} 

.leftArrow { 
    left: 18%; 
} 

.rightArrow { 
    right: 18%; 
} 



@media only screen and (min-width: 960px) { 
    .photos-container { 
     width: 980px; 
    } 

    .leftArrow, 
    .rightArrow { 
     top: 40%; 
    } 

    .leftArrow { 
     left: 20%; 
    } 

    .rightArrow { 
     right: 20%; 
    } 

}

jQuery的

var $overlay = $('<div id="overlay"></div>'); 
var $imageContainer = $('<div class="imageContainer"></div>') 
var $caption = $('<p id="caption"></p>'); 
var $image = $("<img>"); 
var $leftArrow = $('<a href="#" class="leftArrow" onclick="prev(); return false;"><i class="fa fa-angle-left" aria-hidden="true"></i>'); 
var $rightArrow = $('<a href="#" class="rightArrow" onclick="next(); return false;"><i class="fa fa-angle-right" aria-hidden="true"></i>'); 

//Add image container to overlay 
$overlay.append($imageContainer); 

//Add image to overlay 
$imageContainer.append($image); 

//Add navigation arrows to overlay 
$imageContainer.append($leftArrow); 
$imageContainer.append($rightArrow); 

//Add caption to image 
$overlay.append($caption); 
//add overlay 
$("body").append($overlay); 


//capture click event on a link to an image 
$(".images a").click(function(event){ 
    event.preventDefault(); 
    var imageLocation = $(this).attr("href"); 

    $image.attr("src", imageLocation); 
    $overlay.show(); 

    //get child's alt attribute and set caption 
    var $captionText = $(this).children("img").attr("alt"); 
    $caption.text($captionText); 
}); 


$overlay.click(function(){ 
    $overlay.hide(); 
}) 

$(".leftArrow").bind("click", function(e){ 
    e.stopPropagation(); 
}); 

$(".rightArrow").bind("click", function(e){ 
    e.stopPropagation(); 
}); 

function next() { 
    $($image).each(function(){ 
     $(this).hide(); 
     $($caption).hide(); 
     $($image).next(); 
    }) 

}

來源

2016-07-03 Austin

我有一個工作版本更新你的腳本。讓我知道它是否做到了你想要的。

我通過刪除next()和prev() onclick處理程序來重構您的代碼。我還將所有代碼移動到輔助函數中以使用替代文本渲染圖像。循環邏輯與您所期望的完全相同。

乾杯

var $overlay = $('<div id="overlay"></div>'); 
var $imageContainer = $('<div class="imageContainer"></div>') 
var $caption = $('<p id="caption"></p>'); 
var $image = $("<img>"); 
var $leftArrow = $('<a href="#" class="leftArrow"><i class="fa fa-angle-left" aria-hidden="true"></i>'); 
var $rightArrow = $('<a href="#" class="rightArrow"><i class="fa fa-angle-right" aria-hidden="true"></i>'); 
var $links = $(".images a"); 
var current_index; 
//Add image container to overlay 
$overlay.append($imageContainer); 

//Add image to overlay 
$imageContainer.append($image); 

//Add navigation arrows to overlay 
$imageContainer.append($leftArrow); 
$imageContainer.append($rightArrow); 

//Add caption to image 
$overlay.append($caption); 
//add overlay 
$("body").append($overlay); 


//capture click event on a link to an image 
$(".images a").click(function(event){ 
    event.preventDefault(); 
    current_index = $links.index($(this)); 
    renderImage($(this)); 
    $overlay.show();  
}); 


$overlay.click(function(){ 
    $overlay.hide(); 
}) 

$(".leftArrow").bind("click", function(e){ 
    e.stopPropagation(); 
    var image = $(".images a").eq(--current_index); 
    renderImage(image); 
}); 

$(".rightArrow").bind("click", function(e){ 
    e.stopPropagation(); 
    var image = $(".images a").eq(++current_index); 
    renderImage(image); 
}); 

function renderImage($link) { 
    var imageLocation = $link.attr("href"); 
    var $captionText = $link.children("img").attr("alt"); 
    $caption.text($captionText); 
    $image.attr("src", imageLocation); 

    // Hide next arrow if end of images array 
    if (current_index >= $links.length - 1) { 
    $rightArrow.hide(); 
    } else { 
    $rightArrow.show(); 
    } 
    // Hide prev arrow if beginning of images array  
    if (current_index <= 0) { 
    $leftArrow.hide(); 
    } else { 
    $leftArrow.show(); 
    } 
}

來源

2016-07-03 03:53:28 kasperite

驚人，完美的作品！我非常感謝你的迴應，這對我的學習非常有幫助。 – Austin

通過jQuery燈箱照片循環

回答

相關問題