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

This comment has been minimized.

Copy link

@dunhamjared 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

This comment has been minimized.

Copy link

@dylandgeorge dylandgeorge commented Dec 1, 2014

Great work, thank you.

@localdog

This comment has been minimized.

Copy link

@localdog 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

This comment has been minimized.

Copy link

@jorgsuau jorgsuau commented Jun 3, 2015

thanks...very functional!

@cjkoepke

This comment has been minimized.

Copy link

@cjkoepke 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

This comment has been minimized.

Copy link

@creativetorch 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

This comment has been minimized.

Copy link

@patmifsud patmifsud commented Dec 7, 2015

Thanks!!

@KBDesigner

This comment has been minimized.

Copy link

@KBDesigner KBDesigner commented Jan 7, 2016

This is great, thank you!

@stephenscaff

This comment has been minimized.

Copy link
Owner Author

@stephenscaff 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

This comment has been minimized.

Copy link

@594727294 594727294 commented Jul 1, 2016

the comments on code gave me cancer

@tustinn

This comment has been minimized.

Copy link

@tustinn 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

This comment has been minimized.

Copy link

@markostoff 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

This comment has been minimized.

Copy link

@nipunbharti nipunbharti commented May 20, 2017

How should I change the size of image?

@ExpiredRules

This comment has been minimized.

Copy link

@ExpiredRules ExpiredRules commented Jun 9, 2017

@nipunharti
add a style

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

@dardos

This comment has been minimized.

Copy link

@dardos dardos commented Jun 15, 2017

Hi,

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

@reveality

This comment has been minimized.

Copy link

@reveality 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

This comment has been minimized.

Copy link

@gtheocharis gtheocharis commented Nov 20, 2017

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

@unusualwork

This comment has been minimized.

Copy link

@unusualwork 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

This comment has been minimized.

Copy link

@Thanatos8088 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

This comment has been minimized.

Copy link

@ZaheerAbbasAghani 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

This comment has been minimized.

Copy link

@thedogran 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.

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