Menu
hi guys I’m a newbie in programming and I really need to make a jquery slider without plugins that only only need to use jquery2.1.4 min and need to look like the photo I attached here. when I click the image in the pager at the bottom it should look clear and not in opaque not the other way around. Please check My code. what is wrong with my code? I don’t know why how to make the buttons work continuously when I click the left and right buttons. I appreciate your response. Thank you so much. Here is my html and jquery codes.thank you
<!doctype html>
<html>
<head>
<title>Jquery Sample</title>
<script type=”text/javascript” language=”javascript” src=”jquery-2.1.4.min.js”> </script>
<script type=”text/javascript” src=”tryphoto.js”></script>
</head>
<body>
<div id=”overlay”> </div>
<div id=”frame”>
<table>
<td><img src=”left.png” id=”lftBtn”/></td>
<td><img src=”right.png” id=”rghtBtn”/></td>
</table>
<img id=”main” src=””></img>
</div>
<div id=”flip”><h3>Click here</h3></div>
<div id=”panel”><h3>Enjoy the ImageViewer</h3></div>
<div id=”header”>
<h2>PhotoViewer</h2>
</div>
<div id=”container”>
<ul>
<li><img src=”img1.jpg”/></li>
<li><img src=”img2.jpg”/></li>
<li><img src=”img3.jpg”/></li>
<li><img src=”img4.jpg”/></li>
<li><img src=”img5.jpg”/></li>
<li><img src=”img6.jpg”/></li>
<li><img src=”img7.jpg”/></li>
<li><img src=”img8.jpg”/></li>
</ul>
</div>
</body>
</html>
$(function(){
var currentImg;
$(“ul li img”).click(function(){
currentImg=$(this).parent();
var source=$(this).attr(“src”);
$(“#main”).attr(“src”,source);
$(“#frame”).fadeOut();
$(“#frame”).fadeIn();
});
$(“#overlay”).click(function(){
$(“#overlay”).fadeIn();
$(“#frame”).fadeIn();
});
$(“#lftBtn”).click(function(){
var imgsrc = currentImg.prev();
var prevImg = imgsrc.children(“img”).attr(“src”);
$(“#main”).attr(“src”,prevImg);
currentImg =imgsrc;
});
$(“#rghtBtn”).click(function(){
var imgsrc = currentImg.next();
var nextImg = imgsrc.children(“img”).attr(“src”);
$(“#main”).attr(“src”,nextImg);
currentImg = imgsrc;
});
});
$(document).ready(function(){
$(“#flip”).click(function(){
$(“#panel”).slideDown(“slow”);
});
});