image image using next and previous button in javascript
<div style="display:block"><img id="largeimg" data-nr="1" src="resources/images/larges/01.jpg"></div>
<img data-nr="1" class="clickable" style='cursor:pointer;' src="resources/images/thumbs/01.jpg">
<img data-nr="2" class="clickable" style='cursor:pointer;' src="resources/images/thumbs/02.jpg">
. . .
<script type = "text/javascript">
$(document).ready(function(){
$(".clickable").each(function({
this.click(function(){
$("#largeimg").attr("src",this.attr("src")).attr("data-nr",this.attr("data-nr"));
}
}
});
function nextpic() {
newid = parseInt($("#largeimg").attr("data-nr"))+1;
newsrc = $(".clickable[data-nr="+newid+"]").attr("src");
$("#largeimg").attr("src",newsrc).attr("data-nr",newid);
}
</script>