Random Images On Page Refresh
Randomly load an arbitrary number of images from an array that takes the form of an HTML unordered list. Items are hidden initially with 'display:none;' in the CSS, and then a '.selected' class is randomly applied via JavaScript to reveal them again.
You can use this script to load in other things besides images - try randomly loading ads, featured content, quotes, videos, whatever! Just make sure that your markup for each item sits inside one <li>
Works in modern browsers and IE9+
Please view the source of this page for HTML markup, CSS and JS.
Demo 1
This demo loads 3 random images, which are stored as "data-src" attributes to prevent all items from downloading;
Demo 2
This demo loads 1 random link;
- Simple 'Read More' JavaScript reveal
- 3 Ways to Resize/ Scale Images in RWD
- CSS-Only Responsive Fullscreen Video
- Random Auto-Play Audio with Caption + Cookie
- Responsive CSS3 Fading Quotes
- Responsive Pop-up YouTube Videos
- EU Cookie Law Consent Bar (accept cookies)
- On-Demand Animated GIF Player (JS)
More demos and snippets
Did you find this useful? There are more demos and code snippets this way.