CODEWITHSUNDEEP
javascriptjquery
Youss
Youss

Reputation: 4212

sort divs by the number, no randomize

I found this great script: jsfiddle

Over here: Showing random divs using Jquery

The problem is that on reload the divs are randomized. I need the divs to show as they are sorted in the html, like 1,2,3,4 etc. And than of course cycle back starting over from div1.

Upvotes: 1

Views: 188

Answers (4)

Levi Morrison
Levi Morrison

Reputation: 19552

Edit: I think I misunderstood your question. You want a different image to load each time you actually reload the page? Seems like an odd request. Let me think about it.

Answer http://jsfiddle.net/morrison/RJMhT/133/

Features:

  • Uses kittens for images. (My favorite feature).
  • Uses the jQuery cookie plug-in when localStorage fails.
  • Properly cycles through a dynamic amount of images.

Answer: http://jsfiddle.net/morrison/RJMhT/123/

Features:

  • Uses kittens for images. (My favorite feature).
  • Uses the jQuery cycle plug-in.
  • When it hits the last one, it goes back to the first. This is default for cycle.

Upvotes: 0

Kobi
Kobi

Reputation: 138017

Here's a version that works between page reloads, using the cookie plugin:

JavaScript:

var divIndex = $.cookie('div_index') || -1;
var divs = $('.Image');
divIndex = (parseInt(divIndex, 10) + 1) % divs.length;
divs.eq(divIndex).show();
$.cookie('div_index', divIndex);

Example: http://jsfiddle.net/RJMhT/124/

Upvotes: 2

wong2
wong2

Reputation: 35720

If you want to do this:

when reload, show 1, then reload, show 2, then reload, show 3.....

you may have to use some cache technique such as localStorage to store the index of the last div, then when reload, read the last index from localStorage, calculate the next index, show it.

Upvotes: 0

Kobi
Kobi

Reputation: 138017

Try using the cycle plugin:

Updated JavaScript:

$("#slideshow").cycle();

Markup:

<div id="slideshow">
    <div class="Image"><img src="/image1.jpg">1</div>
    <div class="Image"><img src="/image2.jpg">2</div>
    <div class="Image"><img src="/image3.jpg">3</div>
    <div class="Image"><img src="/image4.jpg">4</div>
    <div class="Image"><img src="/image5.jpg">5</div>
    <div class="Image"><img src="/image6.jpg">6</div>
    <div class="Image"><img src="/image7.jpg">7</div>
</div>

Example: http://jsfiddle.net/RJMhT/120/

Upvotes: 0

Related Questions