Question

I have 10 images on a page which has 2 buttons: next and previous. On next I want to go from the 1st to 10th image and vice versa for previous button.
This is my html code:

   <div id="Div1"> <img class='display' src=""  alt="adf"/></div>
    <button id="Button1">prev</button>
    <button id="Button2">next</button>
<div id='Div2'>
     <img src="a_large.jpg" alt="aadf" />
    <img src="b_large.jpg" alt="dfD" />
     <img src="c_large.jpg" alt="aadf" />
    <img src="d_large.jpg" alt="dfD" />
     <img src="e_large.jpg" alt="aadf" />
    <img src="f_large.jpg" alt="dfD" />
     <img src="g_large.jpg" alt="aadf" />
    <img src="h_large.jpg" alt="dfD" />
     <img src="i_large.jpg" alt="aadf" />
    <img src="j_large.jpg" alt="dfD" />
    </div>

I am newbie to jQuery. Can you please tell me the code for next and previous buttons.
Thanks in advance.

Answer 1

Don’t keep all images within the div when you need to show only 1. Keep the names of the images within an array, like:

arrimg = ['a_large.jpg','b_large.jpg','b_large.jpg'...'j_large.jpg']

Keep only the first image initially, with a value of 0 for the ind property:

<div id='Div2'>
  <img src="a_large.jpg" alt="aadf" ind = '0' />
</div.

Then do something like (assign your to buttons a class of say button to reduce the number of lines of code):

$(".button").click(function() {
   if ($(this).prop('id') == 'Button1') {
     if ($("#Div2 img").prop('ind') != 0) {
        ind = parseInt($("#Div2 img").prop('ind'));
        $("#Div2 img").prop({'src': arrimg[ind-1],'ind':(ind-1)+"");
    }
    else {
         $("#Div2 img").prop({'src': arrimg[9],'ind':'9');
    }
    }
    else {
       if ($("#Div2 img").prop('ind') != 9) {
        ind = parseInt($("#Div2 img").prop('ind'));
        $("#Div2 img").prop('src': arrimg[ind+1],'ind': (ind+1)+"");
    }
    else {
         $("#Div2 img").prop('src': arrimg[0],'ind':0});
    }
    }          
});