JQuery Toggle Images

Development Code
1

First and foremost, I have little experience with JQuery. I need to implement a toggle function in my final website. I would like the toggle to flip through as many images until it hits the last one (when it will then return to the first image). I have a folder of 30 images and I need to cycle around all of them by clicking on a button. So in resume:

1. Need a button

2. When button clicked, toggle through each image

3. After last image, return to first

Thanks to anybody with the experience and time to help. It will be immensely appreciated. 

 If anyone is willing to spend the extra time and effort, adding a "return to previous image" button would be overkill for my heart <3. If it is possible to toggle the images through the <img> tag rather than specifying the src, that would save me 30 image srcs to handle.

2

Here you go

3

Just so i understand here.. you have about 30 <img> tags in an html doc and you want a button to cycle the display of them on a page?

4

Exactly. I have 29 of the images at display:none right now.

5

k, give me a moment

6

Here its ugly, inefficient, nasty, and free


<code>

<!DOCTYPE html>

<html>
<head>
<title>Gnash Needs to pay me now</title>
<style>
  #img_container{
    height: 300px;
  }
  #img_container img{
    display: none;
  }
  #img_container img.show {
    display: block;
  }
</style>
  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
</head>

<body>

<div id="img_container">
  <img class="show" src="http://www.bigcheesebadges.com/images/number_1_flower.png" />
  <img src="http://www.bigcheesebadges.com/images/number_2_flower.png" />
  <img src="http://www.bigcheesebadges.com/images/number_3_flower.png" />
  <img src="http://www.bigcheesebadges.com/images/number_4_flower.png" />
</div>


<button id="back_btn"> << </button>
<button id="fwd_btn"> >> </button>

<script type="text/javascript">

$('#fwd_btn').on('click', function(){
  var next = $('#img_container img.show').next(),
  first = $('#img_container img:first-child');
  $('#img_container img').removeClass('show');
  $(next).length ? next.addClass('show') : first.addClass('show');
});

$('#back_btn').on('click', function(){
  var prev = $('#img_container img.show').prev(),
  last = $('#img_container img:last-child');
  $('#img_container img').removeClass('show');
  $(prev).length ? prev.addClass('show') : last.addClass('show');
});

</script>

</body>
</html>

</code>

7

I've implemented the function on my page using your example.However, it is not working. I have tried the page in Chrome and Mozilla but no dice. I have:

- Declared the script and imported the necessary JQuery files

- Inserted the function in the head of the page

- Implemented the CSS

- Added the div with the images

I have not changed your code other than the formatting. The buttons and the first image show up just fine but the buttons are not functioning. I've already implemented other JQuery and AJAX on my page. I use Wamp Server for the AJAX. Not sure if the additional information helps, but nonetheless the more information the better. Thanks already for putting the effort in helping me out!

8

Post me what you have so far.

If you put the JavaScript in the header you will need to wrap it in a dom ready event so it will bind to the buttons. 

9

Well there we go! Thanks a bunch for the help!

10

My pleasure