Skip to content

Instantly share code, notes, and snippets.

@stephenscaff

stephenscaff/Random Images on Refresh

Last active October 21, 2023 07:29
Show Gist options
  • Save stephenscaff/8266351 to your computer and use it in GitHub Desktop.
Save stephenscaff/8266351 to your computer and use it in GitHub Desktop.
Download ZIP
Super simple way to randomly load new images on refresh via Jquery and DOM injection. Great for banners.
Raw
Random Images on Refresh
<!DOCTYPE html>
<head>
<!--Little CSS fade in -->
<style>
.fade-in{
-webkit-animation: fade-in 2s ease;
-moz-animation: fade-in ease-in-out 2s both;
-ms-animation: fade-in ease-in-out 2s both;
-o-animation: fade-in ease-in-out 2s both;
animation: fade-in 2s ease;
visibility: visible;
-webkit-backface-visibility: hidden;
}
@-webkit-keyframes fade-in{0%{opacity:0;} 100%{opacity:1;}}
@-moz-keyframes fade-in{0%{opacity:0} 100%{opacity:1}}
@-o-keyframes fade-in{0%{opacity:0} 100%{opacity:1}}
@keyframes fade-in{0%{opacity:0} 100%{opacity:1}}
</style>
</head>
<body>
<!--We append on this div-->
<div id="banner-load"></div>
<!--Don't forget Jquery-->
<script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1.8/jquery.min.js'></script>
<!--New images on load -->
<script>
//Add your images, we'll set the path in the next step
var images = ['banner-1.jpg', 'banner-2.jpg', 'banner-3.jpg', 'banner-4.jpg];
//Build the img, then do a bit of maths to randomize load and append to a div. Add a touch off css to fade them badboys in all sexy like.
$('<img class="fade-in" src="images/' + images[Math.floor(Math.random() * images.length)] + '">').appendTo('#banner-load');
</script>
</body>
</html>
@ZaheerAbbasAghani
Copy link

ZaheerAbbasAghani commented Mar 1, 2019 •
edited
Loading

I have images uploaded uploaded on my site i achieved to randomize image by using below code. This might help others.
html
` 






<section id="iru-ads-widget-4" class="widget iru-ads">
   			<a href="http://www.google.com">	
	   			<img src="http://localhost/crazy/wp-content/uploads/2019/02/person-2.jpg" class="iru_random"> 
	   		</a>
</section>

<section id="iru-ads-widget-6" class="widget iru-ads">
    	<a href="http://behance.com">	
	   		<img src="http://localhost/crazy/wp-content/uploads/2019/02/person-5.jpg" class="iru_random"> 
	   	</a>
	   
</section>

<section id="iru-ads-widget-7" class="widget iru-ads">
    	<a href="http://www/.facebook.com">	
	   		<img src="http://localhost/crazy/wp-content/uploads/2019/02/person-2.jpg" class="iru_random"> 
	   	</a>
	   
</section>
`

jQuery

var images = Array(); jQuery(".iru_random").each(function(index) { images.push(jQuery(this).attr('src')); jQuery(this).attr('src' , images[Math.floor(Math.random() * images.length)]); });

@thedogran
Copy link

thedogran commented Apr 3, 2020 •
edited
Loading

I'm using this to load a random image as my fixed background on my page load and it's working like a charm. Thank you!
Is there a way I can set the image's min-height and min-width? I can't figure out where to add those properties.

@shandyjuario
Copy link

thanks, its great

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment