-1

I am attempting to use the Jquery .load function to refresh a picture box on the page with a new picture each time a "next" arrow is clicked, without refreshing the entire page. I have a folder of around 300 .jpeg's and would like to have it load from that folder, one image at a time. I am relatively new to coding so I'm not completely accustomed to all the languages and what they can be used for. Is this possible? Or do I need to list every image in the actual code?

Thank you in advance.

Lake Larson
  • 3
  • 2

1 Answers1

1

Approach 1:

Bring down URL of all images in first load and then keep changing URL on img tag on click. 

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>click demo</title>

  <script src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
  <script type="text/javascript">
  var images = [];

  images.push("http://upload.wikimedia.org/wikipedia/commons/thumb/b/b0/Apple_Headquarters_in_Cupertino.jpg/800px-Apple_Headquarters_in_Cupertino.jpg");
  images.push("http://upload.wikimedia.org/wikipedia/commons/2/27/Apple_I.jpg");
  images.push("http://upload.wikimedia.org/wikipedia/en/5/5d/Ad_apple_1984.jpg");
  images.push("http://upload.wikimedia.org/wikipedia/commons/thumb/e/e3/Macintosh_128k_transparency.png/511px-Macintosh_128k_transparency.png");

  var currentImageIndex = 0;
  </script>
</head>
<body>

<div>

<img id="imgFrame" src="http://upload.wikimedia.org/wikipedia/commons/thumb/b/b0/Apple_Headquarters_in_Cupertino.jpg/800px-Apple_Headquarters_in_Cupertino.jpg" style="width:400px;height:400px;" />
<br>
<input type="button" id="next" value="next"/>
</div>

<script>
$( "#next" ).click(function() {

  if(currentImageIndex < images.length){
    currentImageIndex += 1;  
  }
  else{
    currentImageIndex = 0;
  }

  $("#imgFrame").attr("src",images[currentImageIndex]);
});
</script>

</body>
</html>

Approach 2:

  1. Create a web service which will give you next image URL.
  2. Keep track of current image.
  3. On click of next button perform an AJAX request and get next image url.
  4. Change img tag URL as shown above.
Anuj Yadav
  • 980
  • 11
  • 20
  • I'm not sure who downvoted, I tried to raise it but I cannot vote yet as my account is too new, sorry. I am happy with the answer though, thank you. One thing, with this will I need to add every image into this list? As I said I have over 300 images I want to cycle through with clicks and if it's possible to pull from the folder only that would be preferred. – Lake Larson Oct 24 '14 at 19:50
  • Which server side language are you using? Are you also using a database? You need to do these things at server side. I provided the first approach because you are new to programming. In order to create better web applications, you will have to mix this approach with second approach as you get more experienced with programming. You can not upvote but if the answer helped you then you can mark it as helpful or answered. :) – Anuj Yadav Oct 25 '14 at 02:24