-1
Я новичок и прочитал много других вопросов относительно этого здесь, но не могу заставить их применить к моему коду. Я хочу, чтобы моя следующая кнопка нажала на следующее изображение в моей фотогалерее. Я думаю, что шаги должны быть такими, как указано ниже: однако не может получить правильный код для этого/или изменить код других людей, чтобы работать на меня. Если у кого есть время, чтобы объяснить это мне, это было бы очень признательно.Как получить следующий код кнопки для работы?
$($buttonNext).click(function(){
$image.next().find("img") = $nextImage;
$image.remove();
$nextImage.show();
});
<!doctype html>
<html lang ="en">
<head>
<meta charset ="utf-8">
<title>Photo Gallery</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="normalize.css">
<link href="https://fonts.googleapis.com/css?family=Lato" rel="stylesheet">
<link rel="stylesheet" href="base.css">
<link rel="stylesheet" href="nav.css">
</head>
<body>
<header id="search-bar">
<input type="text" name="search" placeholder="Search" value="search">
</header>
<div id="photo-container">
<ul id="imageGallery">
<li><a href="Photos/01.jpg"><img src="Photos/01.jpg" alt="photo of a dry hill" class="photo"></a></li>
<li><a href="Photos/02.jpg"><img src="Photos/02.jpg" alt="photo of a blue lake" class="photo"></a></li>
<li><a href="Photos/03.jpg"><img src="Photos/03.jpg" alt="photo of a shrub hill" class="photo"></a></li>
<li><a href="Photos/04.jpg"><img src="Photos/04.jpg" alt="photo of a snowcapped hill" class="photo"></a></li>
<li><a href="Photos/05.jpg"><img src="Photos/05.jpg" alt="photo of rocky red earth" class="photo"></a></li>
<li><a href="Photos/06.jpg"><img src="Photos/06.jpg" alt="photo of dry grassland area" class="photo"></a></li>
<li><a href="Photos/07.jpg"><img src="Photos/07.jpg" alt="photo of a green valley" class="photo"></a></li>
<li><a href="Photos/08.jpg"><img src="Photos/08.jpg" alt="photo of sandunes" class="photo"></a></li>
<li><a href="Photos/09.jpg"><img src="Photos/09.jpg" alt="photo of path with overlapping greenery" class="photo"></a></li>
<li><a href="Photos/10.jpg"><img src="Photos/10.jpg" alt="photo of an ocean at dusk" class="photo"></a></li>
<li><a href="Photos/11.jpg"><img src="Photos/11.jpg" alt="photo of a landscape through a gap in trees" class="photo"></a></li>
<li><a href="Photos/12.jpg"><img src="Photos/12.jpg" alt="photo of a lavendar field" class="photo"></a></li>
</ul>
</div><!--closing photo-container-->
<div class = "arrows">
<div class = "previous">
Previous
</div><!--previous-->
<div class = "next">
Next
</div><!--closing next-->
</div><!--closing arows div-->
<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
<script src="lightbox.js"></script>
</body>
</html>
JQuery Code
var $overlay = $('<div id="overlay"></div>');
var $image = $("<img>");
var $caption = $("<p></p>");
//button attemp
var $buttonNext = $("<button> > </button>");
var $buttonPrevious = $("<button> < </button>");
//an image
$overlay.append($image);
//a caption to overlay
$overlay.append($caption);
//attemting to add buttons. This worked now need to get them to scroll fowards and back.
$overlay.append($buttonPrevious);
$overlay.append($buttonNext);
// add an overlay
$("body").append($overlay);
// capture the click event on a link to an image
$("#imageGallery a").click(function(event) {
event.preventDefault();
var imageLocation = $(this).attr("href");
console.log(imageLocation);
//update the overlay with the image linked in the link
$image.attr("src", imageLocation);
// Show the overlay
$overlay.show();
$image.show();
//Get child alt attribute and set caption
var captionText = $(this).children("img").attr("alt");
$caption.text(captionText);
});
//When overlay is clicked
$overlay.click(function() {
$overlay.hide();
$image.hide();
});
Благодарим за ваше время.
css
* {
font-family: 'Lato', sans-serif;
}
* {
box-sizing: border-box;
}
/* mini header and navigation styles*/
.mini-header {
background-color: #4484cE;
height: 3.5em;
margin: 0;
padding: 1px;
color: white;
border-bottom: 2px solid #ccc;
}
.mini-header h3 {
text-align: left;
margin-left: .3em;
}
.mini-header h3 a {
text-decoration: none;
color: white;
}
.mini-header h3 a:hover {
color: #D9D9D9;
}
.mini-header{
position:relative;
}
#tomatis-logo1, #facebook-logo1{
display:inline-block;
position:absolute;
top: 8px;
width: 2.5em;
height: 2.5em;
border: 2.5px solid #ffa31a;
border-radius: 6px;
}
#tomatis-logo1 {
right: 25%;
}
#facebook-logo1 {
right: 5%;
}
/* main header and navigation styles*/
.main-header {
background-color: white;
height: 10em;
margin-top: -1.25em;
border-bottom: 2px solid #ccc;
}
.main-header h1, h2, h4 {
text-align: center;
}
.main-header h1 {
padding-top: .5em;
text-shadow: 1px 1px #ccc;
}
.main-header h2, h4 {
color: #ffa31a;
text-shadow: 1px 1px darkgrey;
}
.main-header h2 {
margin-top: -.5em;
}
.main-header h4 {
margin-top: -1em;
}
.nav {
display: flex;
}
.nav {
flex-direction: row;
justify-content: space-between;
max-width: 500px;
list-style-type: none;
}
.nav li a {
text-decoration: none;
color: black;
justify-content: center;
margin-left: -1.5em;
margin-right: .5em;
font-size: .8em;
}
.nav li a:hover {
color: #D9D9D9;
}
/* colour styles*/
body {
background-color: #D9D9D9;
}
/* main content styles*/
#large-cover-image {
display: none;
}
#content-paragraph{
display: none;
font-style: italic;
width: 20em;
height: 20em;
}
#mobile-cover-image {
display: block;
margin:auto;
margin-top: 2em;
margin-bottom: .5em;
height: 40vh;
width: 70vw;
border: 4px solid #ccc;
border-radius: 6px;
}
/* card content styles*/
.card {
margin: 30px;
padding: 20px 40px 40px;
max-width: 500px;
text-align: left;
background: #fff;
border-bottom: 4px solid #ccc;
border-radius: 6px;
}
#pam-image {
border: 2px solid #ccc;
border-radius: 6px;
}
.main-content {
position: relative;
padding-bottom: 30px;
}
footer {
background-color: #4484cE;
font-style: italic;
color: white;
text-align: center;
position: fixed;
bottom:0;
width:100%;
height:30px;
}
footer p {
margin-top: -10px;
margin-bottom: 0;
}
#menu .selected {
width: 100%
height: 20px;
}
#willImage{
height: 70%;
width: 60%;
}
где вы объявили вам $ NEXTIMAGE? – Beginner
как @NewbeeDev сказал. укажите весь код. –
Спасибо, что нашли время, я добавил все html, css и код JQuery, но мне не повезло с кодом jquery для следующей кнопки для работы. Если вы понимаете шаги, необходимые мне для выполнения этой задачи, ваш вклад будет высоко оценен. –