Advertisement
Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- <div id="image1" style="display:block"><img src="resources/images/larges/01.jpg"></div>
- <div id="image2" style="display:none"><img src="resources/images/larges/02.jpg"></div>
- . . .
- <img style='cursor:pointer;' onclick="showDiv(1)" src="resources/images/thumbs/01.jpg">
- <img style='cursor:pointer;' onclick="showDiv(2)" src="resources/images/thumbs/02.jpg">
- . . .
- <script type = "text/javascript">
- function showDiv(which) {
- for(i = 0; i < 13; i++) {
- document.getElementById("image"+i).style.display="none";
- }
- document.getElementById("image" + which).style.display = "block";
- }
- </script>
- var currentImage = 1; //assuming the 1st image shown is always the first
- <button type="button" onclick="showDiv(currentImage - 1)">Previous</button>
- <button type="button" onclick="showDiv(currentImage + 1)">Next</button>
- function showDiv(which) {
- for(i = 0; i < 13; i++) {
- document.getElementById("image"+i).style.display="none";
- }
- //in the next 2 lines, you make sure which isn't lower than 1, and isn't greater than the number of images
- if(which < 1) which = 1;
- if(which > 13) which = 13;
- document.getElementById("image" + which).style.display = "block";
- currentImage = which;
- }
- <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>
- <!DOCTYPE html>
- <html>
- <head>
- <meta charset="utf-8">
- <meta http-equiv="X-UA-Compatible" content="IE=edge">
- <title>Next and Previous Button</title>
- <link rel="stylesheet" href="">
- </head>
- <body>
- <img src="images.jpg" id="imgDemo" alt="HTML5 Icon" width="128" height="128">
- <button onclick="nxt()" id="btnOne">next</button>
- <button onclick="prvs()" id="btnTwo">previous</button>
- <script>
- var img = new Array("images.jpg","images1.jpg","images2.jpg","images3.jpg","images4.jpg","images5.jpg","images6.jpg","images7.jpg","images8.jpg");
- var imgElement = document.getElementById("imgDemo");
- var i = 0;
- var imgLen = img.length;
- function nxt()
- {
- if(i < imgLen-1)
- {
- i++;
- }
- else{
- i=0;
- }
- imgElement.src = img[i];
- }
- function prvs()
- {
- if(i > 0)
- {
- i--;
- }
- else
- {
- i = imgLen-1;
- }
- imgElement.src = img[i];
- }
- </script>
- </body>
- </html>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement