Skip to content

Instantly share code, notes, and snippets.

@stephenscaff
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.
Super simple way to randomly load new images on refresh via Jquery and DOM injection. Great for banners.
<!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>
@patmifsud
Copy link

Thanks!!

@KBDesigner
Copy link

This is great, thank you!

@stephenscaff
Copy link
Author

Made a plugin out of this if anyone cares. Has some options, ability to use images or background-images, etc.
Chicken Dinner

@594727294
Copy link

the comments on code gave me cancer

@tustinn
Copy link

tustinn commented Oct 23, 2016

Thanks! How to add runat=server though? Doesn't work if I have to go back to that page. Thanks.

@markostoff
Copy link

This is great! Thank you!

Is there a way for this - if I have only two images, every time to display the other image and not to repeat the same image two times successively?

@nipunbharti
Copy link

How should I change the size of image?

@ExpiredRules
Copy link

@nipunharti
add a style

#banner-load {width:300px; height:auto;}

@dardos
Copy link

dardos commented Jun 15, 2017

Hi,

How can I put more than one image at same time?

@reveality
Copy link

how is it possible to add a link to that image?
I am new to jquery and I tried $('<img class="start" a[href="http://www.google.com/"] src="img/logo/' + images[Math.floor(Math.random() * images.length)] + '">').appendTo('#start'); which doesn't work apparently

@gtheocharis
Copy link

Is there a way to randomly load two or more images each time, but without loading duplicates?

@unusualwork
Copy link

i want my image with this...
background-repeat: no-repeat;
background-size: 100%;
i have dont know html anyone help ??

@Thanatos8088
Copy link

Power the dynamo, raise the lightning rod, we have a necropost!
But seriously, I have the same questing posed by revality earlier in the thread. I am running through random-capable, jquery based banners/slideshows and am interested in hyperlinks being attached to each image, and unique to each image. Any thoughts?

@ZaheerAbbasAghani
Copy link

ZaheerAbbasAghani commented Mar 1, 2019

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

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