CODEWITHSUNDEEP
javascriptonclickslideshowimage-gallery
user1788904
user1788904

Reputation: 21

javascript image gallery query (next image)

This is my first time on stackoverflow, I really hope someone can help. I'm fairly novice at coding, so I hope my query is simple to solve. I have created a simple javascript image gallery, where if you click on the left or right arrow it loops to show the next image in my array list. I also have quicklinks that jump to the specific images in this list. How can I get my next/back links to then continue on, to show the next image from the one currently selected? E.g if I have jumped to gallery image 3, for it to then show the next image along from it in the list gallery image 4, and not gallery image 2.

Below are samples of my code.

Thanks so much in advance for your help.

Here is my script:

var num=0;

imgArray = [
  ['../00_assets/gallery/work_00.jpg','Gallery', '1 of 6',],
  ['../00_assets/gallery/work_01.jpg','Gallery', '2 of 6',],
  ['../00_assets/gallery/work_02.jpg','Gallery', '3 of 6'],
  ['../00_assets/gallery/work_03.jpg','Gallery', '4 of 6'],
  ['../00_assets/gallery/work_04.jpg','Gallery', '5 of 6'],
  ['../00_assets/gallery/work_05.jpg','Gallery', '6 of 6'],
]

function slideshow(slide_num) {
  document.getElementById('mypic').src=imgArray[slide_num][0];
  document.getElementById('mypic').alt=imgArray[slide_num][1];
  document.getElementById('number').innerHTML=imgArray[slide_num][2];
}

function slideshowUp() {
  num++;
  num = num % imgArray.length;
  slideshow(num);
}

function slideshowBack() {
  num--;
  if (num < 0) {num=imgArray.length-1;}
  num = num % imgArray.length;
  slideshow(num);
}

Here is my HTML (I've taken out the bits that do not seem relevant):

  <div align="left">
    <!--  First image in array list is here  -->
    <img src="../00_assets/gallery/work_00.jpg" id="mypic" name="mypic" alt="Gallery">

        <!--  Previous link is here  -->
<a href="#" onclick="slideshowBack(); return false;"> ← </a>

        <!--  First image number is here  -->
  <div id="number">1 of 9</div>

        <!--  Next link is here  -->
<a href="#"  onclick="slideshowUp(); return false;"> → </a>

        <!--  Three quicklinks are link is here  -->
<a href="#" onclick="slideshow(0); return false;">Quicklink 1</a> | 
<a href="#" onclick="slideshow(2); return false;">Quicklink 2</a> | 
<a href="#" onclick="slideshow(4); return false;">Quicklink 3</a> |

Thank you so much.

Upvotes: 1

Views: 2827

Answers (1)

fegemo
fegemo

Reputation: 2594

You should update your num variable whenever you change the current slide.

Then, when a quicklink is clicked, it will have the current slide for the other methods (slideshowUp and slideshowBack) to work with and keep the navigation as expected.

In other words:

function slideshow(slide_num) {
    num = slide_num; // add this line
    document.getElementById('mypic').src=imgArray[slide_num][0];
    document.getElementById('mypic').alt=imgArray[slide_num][1];
    document.getElementById('number').innerHTML=imgArray[slide_num][2];
}

Upvotes: 1

Related Questions