Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
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>
@dunhamjared
Copy link

dunhamjared commented Oct 24, 2014

Forgot to close the last banner image with another single quotation mark:
var images = ['banner-1.jpg', 'banner-2.jpg', 'banner-3.jpg', 'banner-4.jpg'];

@dylandgeorge
Copy link

dylandgeorge commented Dec 1, 2014

Great work, thank you.

@localdog
Copy link

localdog commented Jan 19, 2015

Is it an error that "class" is there twice in the line $('<img class=" class="fade-in"....? And shouldn't the class name be "fadeIn" instead of "fade-in"?

Yep. Fixed

@jorgsuau
Copy link

jorgsuau commented Jun 3, 2015

thanks...very functional!

@cjkoepke
Copy link

cjkoepke commented Aug 26, 2015

Great snippet. If a user doesn't have JS enabled though, it'll cause a problem. Not that that's a huge percentage of users, but still.

If you care about that, load your first image on the DOM organically like so:

<img id="banner-load" src="images/banner-1.jpg">

Then, instead of injecting the entire image, just replace the src attribute:

$( "banner-load" ).attr( 'src', 'images/' + images[Math.floor(Math.random() * images.length)] );

This way, you'll still have an image showing by default if no JS is enabled.

@creativetorch
Copy link

creativetorch commented Dec 2, 2015

If you use <img id="banner-load" src="images/banner-1.jpg">, that image never gets displayed again after it gets replaced by the script. If you want a placeholder for no javascript, use <noscript><img src="images/banner-1.jpg"></noscript>

@patmifsud
Copy link

patmifsud commented Dec 7, 2015

Thanks!!

@KBDesigner
Copy link

KBDesigner commented Jan 7, 2016

This is great, thank you!

@stephenscaff
Copy link
Author

stephenscaff commented Mar 5, 2016

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

594727294 commented Jul 1, 2016

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

markostoff commented Mar 21, 2017

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

nipunbharti commented May 20, 2017

How should I change the size of image?

@ExpiredRules
Copy link

ExpiredRules commented Jun 9, 2017

@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

reveality commented Aug 23, 2017

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

gtheocharis commented Nov 20, 2017

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

@unusualwork
Copy link

unusualwork commented Oct 4, 2018

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

@Thanatos8088
Copy link

Thanatos8088 commented Jan 14, 2019

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

shandyjuario commented Jun 9, 2021

thanks, its great

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