Nick Smith Nick Smith - 3 months ago 8
CSS Question

Js not working and I am fairly new to Js and JQuery. Also there are no error messages


Here is my js, relevant css for photo album, and html. My photo album should automatically cycle between photos or be able to cycle between photos using the next and previous buttons. However neither is working properly. I am not sure if I am referencing js and the jquery library correctly in the html document. I am fairly new to js and jquery so any information on what might be wrong with my code would be helpful. Thank you.
ps. html formatted a bit weird in my post.




$(document).ready(function() {

var currentIndex = 0,
items = $('.container div'),
itemAmt = items.length;

function cycleItems() {
var item = $('.container div').eq(currentIndex);
items.hide();
item.css('display','inline-block');
}

var autoSlide = setInterval(function() {
currentIndex += 1;
if (currentIndex > itemAmt - 1) {
currentIndex = 0;
}
cycleItems();
}, 3000);

$('.next').click(function() {
clearInterval(autoSlide);
currentIndex += 1;
if (currentIndex > itemAmt - 1) {
currentIndex = 0;
}
cycleItems();
});

$('.prev').click(function() {
clearInterval(autoSlide);
currentIndex -= 1;
if (currentIndex < 0) {
currentIndex = itemAmt - 1;
}
cycleItems();
});
});

/*relavent CSS not sure if this would effect js at all?*/
.img-cont {
max-width: 400px;
background-color: black;
margin: 0 auto;
text-align: center;
position: relative;
}

.img-cont div {
background: rgba(0, 0, 0, 0.55);
width: 100%;
display: inline-block;
display: none;
}

.img-cont img {
width: 100%;
height: auto;
}

button {
position: absolute;
}

.next {
right: 5px;
}

.prev {
left: 5px;
}

<!DOCTYPE html>
<html>
<head>
<title>Shear Excellence</title>
<link href="site.css" rel="stylesheet">
<link rel="stylesheet" type="text/css" href="https://fonts.googleapis.com/css?family=Tangerine">
<!--Current Fonts add | after each in url to simplify-->
<link href="https://fonts.googleapis.com/css?family=Ewert|Sigmar+One|Molle:400i|Mr+Bedfort|Norican" rel="stylesheet">
<!--google fonts-->
<meta name="viewport" content="width=device-width, initial-scale=1"> <!--mobile friendly feature to size the window properly need to test-->
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
</head>
<body>
<div id="main">
<div id="header">
Gallery
</div>
<div id="nav-menu">
<ul>
<li><a href="http://www.shearexcellence.biz/index">Home</a></li>
<li><a href="http://www.shearexcellence.biz/services">Services</a></li>
<li id="current"><a href="http://www.shearexcellence.biz/photo_album">Gallery</a></li>
<li><a href="http://www.shearexcellence.biz/about">About Us</a></li>
</ul>
</div>
<div class="soc-media">
<a class="twitter-share-button" href="https://twitter.com/home?status=Shear%20Excellence%20Salon%20is%20the%20best!" target="_blank"><img src="http://i.imgur.com/uWCjqvX.png"></a>
<a class="facebook" href="http://www.facebook.com/sharer/sharer.php?u=http://www.shearexcellence.biz&title=Shear Excellence Salon" target="_blank"><img src="http://i.imgur.com/le28rhL.png"></a>
<a class="pinterest" href="http://pinterest.com/pin/create/button/?url=http%3A%2F%2Fwww.shearexcellence.biz&media=http%3A%2F%2Fi.imgur.com%2Ff0BEf45.jpg" target="_blank"><img src="http://i.imgur.com/CcH1QLt.png"></a>
<a class="google" href="https://plus.google.com/share?url=[http://www.shearexcellence.biz]" target="_blank"><img src="http://i.imgur.com/JGUF97X.png"></a>
</div>
<button class="next">Next</button>
<button class="prev">Previous</button>
<div class="img-cont">
<div style="display: inline-block;">
<img src="http://i.imgur.com/qlkUBfl.jpg"/>
</div>
<div>
<img src="http://i.imgur.com/WiMIaUL.jpg"/>
</div>
<div>
<img src="http://i.imgur.com/LsPrhg5.jpg"/>
</div>
<div>
<img src="http://i.imgur.com/9SsZHVO.jpg"/>
</div>
<div>
<img src="http://imgur.com/WSlGugy.jpg"/>
</div>
<div>
<img src="http://imgur.com/GkPzEX7.jpg"/>
</div>
<div>
<img src="http://imgur.com/WpYyjyQ.jpg"/>
</div>
<div>
<img src="http://i.imgur.com/ilDrPeq.jpg"/>
</div>
</div>
<div id="footer">
<p>
Shear Excellence Salon is located at
<br>
Phenix Salon Suites
<br>
<a href="https://www.google.com/maps/place/Phenix+Salon+Suites/@45.0535694,-93.3687602,17z/data=!3m1!4b1!4m5!3m4!1s0x52b336dcae664ceb:0x39e976c341f8540f!8m2!3d45.0535694!4d-93.3665715">145 Willow Bend, Suite #107 Crystal, Minnesota 55428</a>
<br>
<a href="tel: +1-763-807-4186">+1-763-807-4186</a>
<br>
&copy; 2016 Nicholas Smith
</p>
</div>
</div>
<script type="text/javascript" src="myScripts.js"></script>
</body>
</html>




Answer

Replace .container div to .img-cont div in your jquery to make it work. Since .container div doesn't exist in your html.

$(document).ready(function() {

	var currentIndex = 0,
		items = $('.img-cont div'),
		itemAmt = items.length;

	function cycleItems() {
		var item = $('.img-cont div').eq(currentIndex);
		items.hide();
		item.css('display','inline-block');
	}

	var autoSlide = setInterval(function() {
		currentIndex += 1;
		if (currentIndex > itemAmt - 1) {
			currentIndex = 0;
		}
		cycleItems();
	}, 3000);

	$('.next').click(function() {
		clearInterval(autoSlide);
		currentIndex += 1;
		if (currentIndex > itemAmt - 1) {
			currentIndex = 0;
		}
		cycleItems();
	});

	$('.prev').click(function() {
		clearInterval(autoSlide);
		currentIndex -= 1;
		if (currentIndex < 0) {
			currentIndex = itemAmt - 1;
		}
		cycleItems();
	});
});
/*relavent CSS not sure if this would effect js at all?*/
.img-cont {
	max-width: 400px;
	background-color: black;
	margin: 0 auto;
	text-align: center;
	position: relative;
}

.img-cont div {
	background: rgba(0, 0, 0, 0.55);
	width: 100%;
	display: inline-block;
	display: none; 
}

.img-cont img {
	width: 100%;
	height: auto;
}

button {
	position: absolute;
}

.next {
	right: 5px;
}

.prev {
	left: 5px;
}
<!DOCTYPE html>
<html>
	<head>
	<title>Shear Excellence</title>
	<link href="site.css" rel="stylesheet">
	<link rel="stylesheet" type="text/css" href="https://fonts.googleapis.com/css?family=Tangerine">
	<!--Current Fonts add | after each in url to simplify-->
		<link href="https://fonts.googleapis.com/css?family=Ewert|Sigmar+One|Molle:400i|Mr+Bedfort|Norican" rel="stylesheet">
	 <!--google fonts-->
	<meta name="viewport" content="width=device-width, initial-scale=1"> <!--mobile friendly feature to size the window properly need to test-->
	<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
	</head>
	<body>
		<div id="main">
			<div id="header">
				Gallery
			</div>
			<div id="nav-menu">
				<ul>
					<li><a href="http://www.shearexcellence.biz/index">Home</a></li>
					<li><a href="http://www.shearexcellence.biz/services">Services</a></li>
					<li id="current"><a href="http://www.shearexcellence.biz/photo_album">Gallery</a></li>
					<li><a href="http://www.shearexcellence.biz/about">About Us</a></li>
				</ul>
			</div>
			<div class="soc-media">
				<a class="twitter-share-button" href="https://twitter.com/home?status=Shear%20Excellence%20Salon%20is%20the%20best!" target="_blank"><img src="http://i.imgur.com/uWCjqvX.png"></a>
				<a class="facebook" href="http://www.facebook.com/sharer/sharer.php?u=http://www.shearexcellence.biz&title=Shear Excellence Salon" target="_blank"><img src="http://i.imgur.com/le28rhL.png"></a>
				<a class="pinterest" href="http://pinterest.com/pin/create/button/?url=http%3A%2F%2Fwww.shearexcellence.biz&media=http%3A%2F%2Fi.imgur.com%2Ff0BEf45.jpg" target="_blank"><img src="http://i.imgur.com/CcH1QLt.png"></a>
				<a class="google" href="https://plus.google.com/share?url=[http://www.shearexcellence.biz]" target="_blank"><img src="http://i.imgur.com/JGUF97X.png"></a>
			</div>
			<button class="next">Next</button>
			<button class="prev">Previous</button>
			<div class="img-cont">
				<div style="display: inline-block;">
					<img src="http://i.imgur.com/qlkUBfl.jpg"/>
				</div>
				<div>
					<img src="http://i.imgur.com/WiMIaUL.jpg"/>
				</div>
				<div>
					<img src="http://i.imgur.com/LsPrhg5.jpg"/>
				</div>
				<div>
					<img src="http://i.imgur.com/9SsZHVO.jpg"/>
				</div>
				<div>
					<img src="http://imgur.com/WSlGugy.jpg"/>
				</div>
				<div>
					<img src="http://imgur.com/GkPzEX7.jpg"/>
				</div>
				<div>
					<img src="http://imgur.com/WpYyjyQ.jpg"/>
				</div>
				<div>
					<img src="http://i.imgur.com/ilDrPeq.jpg"/>
				</div>
			</div>
			<div id="footer">
				<p>
					Shear Excellence Salon is located at
					<br>
					Phenix Salon Suites 
					<br>
					<a href="https://www.google.com/maps/place/Phenix+Salon+Suites/@45.0535694,-93.3687602,17z/data=!3m1!4b1!4m5!3m4!1s0x52b336dcae664ceb:0x39e976c341f8540f!8m2!3d45.0535694!4d-93.3665715">145 Willow Bend, Suite #107 Crystal, Minnesota 55428</a>
					<br>
					<a href="tel: +1-763-807-4186">+1-763-807-4186</a>
					<br>
					&copy; 2016 Nicholas Smith
				</p>
			</div>
		</div>
	<script type="text/javascript" src="myScripts.js"></script>	
	</body>
</html>