This is my first question on Stack Overflow. I'm trying to work out the code for a bare bones, gallery site for a personal photo project, and I am new to jquery.
Site is set up (stacked vertically): headline, nav (filters thumbnails by city), display div( display:hidden at load), thumbnails.
Clicking on a thumbnail loads a larger image in the display div, along with image data (title, date, description). Arrows appear to left and right of image to cycle through the other images in the city.
Figured out most of my initial ask (how to make the image data load with its image and how to make the back arrow work) and have added the new .js.
What remains to be fixed: The next arrow at the end of the images begins again, which is fine, it loads the first image again, but does not load the first image's data, instead there is an 'undefined' error. The back arrow does not load the next image after it has reached its last image (the first image) and shows the error 'undefined' for the data. I would like to write in a stop or have the cycling continue uninterrupted.
any help would be tremendously appreciated!! thanks in advance for looking!!
html:
<!DOCTYPE html> <html lang="en">
<head>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="main.css" />
<script src="js/jquery.js"></script>
<script src="move.js"></script>
<title>Untitled Document</title>
</head>
<body>
<header>
<h1>The Photo Project</h1>
<nav>
<ul>
<li id="ny-filter">NY</li>
<li id="la-filter">LA</li>
<li id="dc-filter">dc</li>
<li id="chicago-filter">Chicago</li>
</ul>
</nav>
</header>
<div id="content">
<div id="display">
<img class="prev-big-image" src="img/arrow-88-512.png" width="40px"/>
<img class="currentImg" src="" width="300px" alt="" title="" date="" />
<img class="next-big-image" src="img/arrow-88-512-right.png" width="40px"/>
<h4>Name</h4>
<h5>Year</h5>
<p>Description</p>
</div>
<div id="thumbs">
<img src="thumbs/01.jpg" id="1" class="ny" title="Maria" date="2009" description="found, 6th ave, by 43rd st">
<img src="thumbs/02.jpg" id="2" class="ny" title="Jesse" date="2009" description="found, Prospect Park ">
<img src="thumbs/03.jpg" id="3" class="la" title="Catie" date="2009" description="friend, at MoMA">
<img src="thumbs/04.jpg" id="4" class="dc" title="Albert" date="2009" description="my dry cleaner">
<img src="thumbs/05.jpg" id="5" class="chicago" title="Lola" date="2009" description="friend, at her boutique, Minji">
</div>
</div>
</body>
</html>
the JS: `
$(document).ready(function() {
$('#thumbs img').click(function() {
var thisThumbURL=$(this).attr('src');
mainImageURL= thisThumbURL.replace(/thumbs/,'images');
thisDate=$(this).attr('date');
thisDesc=$(this).attr('description');
$('.currentImg').attr('src',mainImageURL).fadeIn("slow");
$('#display h4').html ($('<strong></strong>').text(this.title)).fadeIn("slow");
$('#display h5').html( " " + (thisDate) ).fadeIn("slow");
$('#display p').html( " " + (thisDesc) ).fadeIn("slow");
$('.next-big-image').fadeIn("slow");
$('.prev-big-image').fadeIn("slow");
});
$('.next-big-image').click(function(){
var self = $('.currentImg')
file = self[0].src,
common = file.substr(0, file.length-6)
currentId = +file.substr(-6,2)
self.title = $('img#' + (currentId+1)).attr('title')
self.desc = $('img#' + (currentId+1)).attr('description')
self.date = $('img#' + (currentId+1)).attr('date')
$('#display h4').html ($('<strong></strong>').text(self.title)).fadeIn("slow");
$('#display h5').html( " " + (self.date) ).fadeIn("slow");
$('#display p').html( " " + (self.desc) ).fadeIn("slow");
id = ('0' + (currentId+1)).substr(-2),
nextimage= new Image();
nextimage.onload = function(){
// image was preloaded so it exists
var img = this;
$(self).fadeOut(300, function(){self[0].src = img.src; $(self).fadeIn(300)});
};
nextimage.onerror = function(){
// error occured while preloading. we assume image does not exist
$(self).fadeOut(300, function(){self[0].src = common+ '01.jpg'; $(self).fadeIn(300)});
};
nextimage.src = common + id + '.jpg';
});
$('.prev-big-image').click(function(){
var self = $('.currentImg')
file = self[0].src,
common = file.substring(0, file.length-6)
currentId = +file.substr(-6,2),
self.title = $( 'img#' + (currentId-1)).attr('title')
self.date = $('img#' + (currentId-1)).attr('date')
self.desc = $('img#' + (currentId-1)).attr('description')
$('#display h4').html ($('<strong></strong>').text(self.title)).fadeIn("slow");
$('#display h5').html( " " + (self.date) ).fadeIn("slow");
$('#display p').html( " " + (self.desc) ).fadeIn("slow");
id = ('0' + (currentId-1)).substr(-2),
nextimage= new Image();
nextimage.onload = function(){
// image was preloaded so it exists
var img = this;
$(self).fadeOut(300, function(){self[0].src = img.src; $(self).fadeIn(300)});
};
nextimage.onerror = function(){
// error occured while preloading. we assume image does not exist
$(self).fadeOut(300, function(){self[0].src = common+ '01.jpg'; $(self).fadeIn(300)});
};
nextimage.src = common + id + '.jpg';
});
});
the css:
@charset "UTF-8";
/* CSS Document */
body {
}
ul {
list-style-type: none;
margin: 0;
padding: 0;
}
li {
display: inline; margin-right:60px;
}
.content{ clear: both;
width: 700px;
margin: 10px;}
#thumbs img{
margin-right:3px;
margin-top:3px;
width:148px;
float:left;
}
#display{
width: 530px;
margin: 0;
}
img {
margin: 10px 0 10px 0;
}
.currentImg, .prev-big-image, .next-big-image, #display p, #display h5, #display h4 {
display: none;
}
