<分区>
我不知道如何构建能够通过单击滚动浏览灯箱中的照片的功能。我在想一个解决方案可能是遍历每个索引并在每次单击时转到下一个索引，但我不确定该怎么做。我是编程新手，正在尝试在没有插件的情况下从头开始构建。我的代码在下面，我已经包含了一个链接，这样你就可以看到目前的元素。
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();
})
}
最佳答案
我用一个工作版本更新了你的脚本。让我知道它是否符合您的要求。
我通过删除 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();
}
}
关于javascript - 循环浏览 jQuery 灯箱照片，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/38166068/