Overclock.net › Forums › Software, Programming and Coding › Coding and Programming › Web Coding › Randomly Shuffle Images On Page Load
New Posts  All Forums:Forum Nav:

Randomly Shuffle Images On Page Load

post #1 of 6
Thread Starter 
Hey guys and gals! I'm trying to get the 8 images located in the div class "homeposts" id "shuffle" to shuffle randomly on page load but I can't seem to target them correctly. I've put the code into http://cssdeck.com/labs/jv2ll3jm. At the bottom of the html was a script I found from another fellow user to shuffle the divs. Any help would be much appreciated!
My System
(13 items)
 
  
CPUMotherboardGraphicsRAM
Intel Core i7 2600K @ 4.2GHz Asus Maximus Gene V Asus DirectCU II 290x Corsair Platinum 2x8Gb 1600MHz 
Hard DriveOSPowerCase
Samsung 840 EVO 500Gb, WD Black 1TB Windows 7 x64 Thermaltake 1200W Modular Silverstone TJ08 
  hide details  
Reply
My System
(13 items)
 
  
CPUMotherboardGraphicsRAM
Intel Core i7 2600K @ 4.2GHz Asus Maximus Gene V Asus DirectCU II 290x Corsair Platinum 2x8Gb 1600MHz 
Hard DriveOSPowerCase
Samsung 840 EVO 500Gb, WD Black 1TB Windows 7 x64 Thermaltake 1200W Modular Silverstone TJ08 
  hide details  
Reply
post #2 of 6
Try this:
Code:
    $(document).ready(function() {
        var divs_ary = [], idx, rPick, temp;
        $("#shuffle > div.homepage").each(function () {            
            divs_ary.push($(this).clone(true));
            $(this).remove();
        });

        idx = divs_ary.length;
        while (idx > 0) {
            rPick = Math.floor(Math.random() * idx);
            idx--;
            temp = divs_ary[idx];
            divs_ary[idx] = divs_ary[rPick];
            divs_ary[rPick] = temp;
        }
        for (idx = 0; idx < divs_ary.length; idx++) {
            $(divs_ary[idx]).appendTo('#shuffle');
        }
    });
post #3 of 6
Thread Starter 
Quote:
Originally Posted by MakubeX View Post

Try this:
Code:
    $(document).ready(function() {
        var divs_ary = [], idx, rPick, temp;
        $("#shuffle > div.homepage").each(function () {            
            divs_ary.push($(this).clone(true));
            $(this).remove();
        });

        idx = divs_ary.length;
        while (idx > 0) {
            rPick = Math.floor(Math.random() * idx);
            idx--;
            temp = divs_ary[idx];
            divs_ary[idx] = divs_ary[rPick];
            divs_ary[rPick] = temp;
        }
        for (idx = 0; idx < divs_ary.length; idx++) {
            $(divs_ary[idx]).appendTo('#shuffle');
        }
    });

Thanks. I gave it a go but it seemed to make all the images just disappear. I changed the div.homepage to div.homepost to target the image class rather than the whole div box but that doesn't work either. wha-smiley.png
My System
(13 items)
 
  
CPUMotherboardGraphicsRAM
Intel Core i7 2600K @ 4.2GHz Asus Maximus Gene V Asus DirectCU II 290x Corsair Platinum 2x8Gb 1600MHz 
Hard DriveOSPowerCase
Samsung 840 EVO 500Gb, WD Black 1TB Windows 7 x64 Thermaltake 1200W Modular Silverstone TJ08 
  hide details  
Reply
My System
(13 items)
 
  
CPUMotherboardGraphicsRAM
Intel Core i7 2600K @ 4.2GHz Asus Maximus Gene V Asus DirectCU II 290x Corsair Platinum 2x8Gb 1600MHz 
Hard DriveOSPowerCase
Samsung 840 EVO 500Gb, WD Black 1TB Windows 7 x64 Thermaltake 1200W Modular Silverstone TJ08 
  hide details  
Reply
post #4 of 6
I'll revise it with actual images when I get home. I only checked that all the divs were randomized.

Edit: Ok, I see display is being set to none. Just add this line above the appendTo in the For loop:
Code:
$(divs_ary[idx]).css("display", "block");

So it looks like this:
Code:
for (idx = 0; idx < divs_ary.length; idx++) {
    $(divs_ary[idx]).css("display", "block");
    $(divs_ary[idx]).appendTo('#shuffle');
}

Or you can have it all in one line:
Code:
for (idx = 0; idx < divs_ary.length; idx++) {
    $(divs_ary[idx]).css("display", "block").appendTo('#shuffle');
}

** Note that the divs are being randomly appended but because you're forcing them to a location with css/inline-style they will always appear in the same place. You need to change the style properties in order to have them appear in random places.**
Edited by MakubeX - 7/15/13 at 4:25pm
post #5 of 6
Thread Starter 
Ahh I see what you mean but I'm not sure on how to fix that. How would I get the images to stay in the homepost div box I made but I can't specify their location?
My System
(13 items)
 
  
CPUMotherboardGraphicsRAM
Intel Core i7 2600K @ 4.2GHz Asus Maximus Gene V Asus DirectCU II 290x Corsair Platinum 2x8Gb 1600MHz 
Hard DriveOSPowerCase
Samsung 840 EVO 500Gb, WD Black 1TB Windows 7 x64 Thermaltake 1200W Modular Silverstone TJ08 
  hide details  
Reply
My System
(13 items)
 
  
CPUMotherboardGraphicsRAM
Intel Core i7 2600K @ 4.2GHz Asus Maximus Gene V Asus DirectCU II 290x Corsair Platinum 2x8Gb 1600MHz 
Hard DriveOSPowerCase
Samsung 840 EVO 500Gb, WD Black 1TB Windows 7 x64 Thermaltake 1200W Modular Silverstone TJ08 
  hide details  
Reply
post #6 of 6
You can keep those locations but assign them at random with javascript, so the same location doesn't go to the same image every time.
New Posts  All Forums:Forum Nav:
  Return Home
  Back to Forum: Web Coding
Overclock.net › Forums › Software, Programming and Coding › Coding and Programming › Web Coding › Randomly Shuffle Images On Page Load