1

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.

Community
  • 1
  • 1
Youss
  • 4,196
  • 12
  • 55
  • 109

4 Answers4

2

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/

Kobi
  • 135,331
  • 41
  • 252
  • 292
  • Thanks man:-) That is exactle what I was looking for. I really appreciate it. – Youss May 21 '11 at 16:51
  • I highly recommend looking at my updated solution using localStorage with cookie fallbacks. LocalStorage is faster than using cookies and preferable. – Levi Morrison May 21 '11 at 17:11
0

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/

Kobi
  • 135,331
  • 41
  • 252
  • 292
  • @yomoore - it's very possible I don't understand what you're trying to do (e.g. what "doesn't work"), but the divs are cycled slowly. – Kobi May 21 '11 at 16:28
  • @yomoore - or, do you want to cycle when reloading? That is also ok. – Kobi May 21 '11 at 16:29
  • If you want to reload the page you have to store the index somehow. Refer to wrong2's suggestion. – Kel May 21 '11 at 16:36
  • @yomoore - First, the posted code isn't very good nor simple at all. A better approach is to pick up a random number and show a single div - sorting isn't necessary here. Next, I can't think of a way of doing this without cookies, as the page resets is *state* when you reload it, and cookies are the way of dealing with that. I suggest you edit your question and explain what sort of a solution you are looking for, these some confusion among the answerers. – Kobi May 21 '11 at 16:51
0

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.
Levi Morrison
  • 19,116
  • 7
  • 65
  • 85
  • Please look at my links for reference. I would really like to use that code with a modification rather than another code with a plugin or whatever. – Youss May 21 '11 at 16:42
0

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.

wong2
  • 34,358
  • 48
  • 134
  • 179