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

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

Great work, thank you.

@localdog
Copy link

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

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

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

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