| <!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> |
Great work, thank you.
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
thanks...very functional!
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.
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>
Thanks!!
This is great, thank you!
Made a plugin out of this if anyone cares. Has some options, ability to use images or background-images, etc.
Chicken Dinner
the comments on code gave me cancer
Thanks! How to add runat=server though? Doesn't work if I have to go back to that page. Thanks.
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?
How should I change the size of image?
@nipunharti
add a style
#banner-load {width:300px; height:auto;}
Hi,
How can I put more than one image at same time?
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
Is there a way to randomly load two or more images each time, but without loading duplicates?
i want my image with this...
background-repeat: no-repeat;
background-size: 100%;
i have dont know html anyone help ??
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?
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)]); });
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.
thanks, its great
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'];