I have tried to find a script via google that could change a image on page refresh - but i cant make a single one of them work. I need a Jquery/JavaScript solution not PHP. Also the images should be a link ? How can i make this ?
Ingenting
Randomizing images is really the last step in the process. First, you need your HTML and CSS set up. What do you have so far? Please provide a link. The script you use depends on what you are trying to do. For example, is this an image gallery?
Hi,
One way to go about this would be to use JS to create a new image, set its src attribute accordingly, then inject it into the page. As a bonus, if you are using jQuery, it would also be a doddle to have it fade in or do other cool stuff.
However, as Ralph says, we really need to see a bit of code. What do you have so far?
/*
-------------------------------------------------------------------
Image change
--------------------------------------------------------------------
*/
(function($){
$.randomImage = {
defaults: {
//you can change these defaults to your own preferences.
path: 'images/', //change this to the path of your images
myImages: ['1shuffleimg.jpg', '2shuffleimg.jpg', '3shuffleimg.jpg', '4shuffleimg.jpg', '5shuffleimg.jpg' ] //put image names in this bracket. ex: 'harold.jpg', 'maude.jpg', 'etc'
}
}
$.fn.extend({
randomImage:function(config) {
var config = $.extend({}, $.randomImage.defaults, config);
return this.each(function() {
var imageNames = config.myImages;
//get size of array, randomize a number from this
// use this number as the array index
var imageNamesSize = imageNames.length;
var lotteryNumber = Math.floor(Math.random()*imageNamesSize);
var winnerImage = imageNames[lotteryNumber];
var fullPath = config.path + winnerImage;
//put this image into DOM at class of randomImage
// alt tag will be image filename.
$(this).attr( {
src: fullPath,
alt: winnerImage
});
});
}
});
})(jQuery);
<div class="one-fourth last">
<h4>Lorum ibsum</h4>
<p>Some text</p>
<br>
<div class="thumbnail-link">
<a href="http://www.google.com" class="thumbnail-roll-link">
<span>Visit<strong>This page</strong></span>
<img class="shuffle" src="images/shuffleimg.jpg" alt="">
</a>
</div>
</div>
</div>
</div>
<!--WRAPPER ENDS-->
<script>
$('.shuffle').randomImage();
//or to change the default path
$('.shuffle').randomImage({path: 'images/'});
</script>
</body>
</html>
Hi there,
Try this:
<!DOCTYPE HTML>
<html>
<head>
<!--http://www.sitepoint.com/forums/showthread.php?1047258-Random-image-on-refresh-->
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Display random image on page load</title>
<script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>
</head>
<body>
<div class="one-fourth last">
<h4>Lorum ipsum</h4>
<p>Some text</p>
<div class="thumbnail-link">
<span>Click on the image to visit the page</strong></span>
<div id="randomImage"><a href=""></a></div>
</div>
</div>
<script>
var randomImage = {
paths: [
"http://www.roflcat.com/images/cats/Vortex_Kitteh_Claims_Another.jpg",
"http://nextgenfmradio.com/wp/wp-content/uploads/2012/09/iran-ballistic-missile-kitteh-600x480.jpg",
"http://cdn.iwastesomuchtime.com/6242012164748iwsmt.jpeg"
],
generate: function(){
var path = randomImage.paths[Math.floor(Math.random()*randomImage.paths.length)];
var img = new Image();
img.src = path;
$("#randomImage a").html(img);
$("#randomImage a").attr("href", path);
}
}
randomImage.generate();
</script>
</body>
</html>
Thanks Pullo. Okay this works. But there is some sort of conflict, because it does not work on my site. Is there something i could add to this code to not make it conflicting ?
Could you post a link to the page you want it to work on?
Yes i have uploaded.http://www.posterlikes.com/lolcat/
Btw can this effect SEO, when the site should not be on this site ?
Hi there,
The problem is that on your page, jQuery is running in compatibility mode.
Change these to lines:
$("#randomImage a").html(img);
$("#randomImage a").attr("href", path);
to this:
jQuery("#randomImage a").html(img);
jQuery("#randomImage a").attr("href", path);
And all will be well.
TBH, I don’t know.
I know Google can crawl content loaded by AJAX, but I’m really no SEO expert.
If you’re concerned about this, then it would be better to ask in the Internet Marketing forum.
Thanks, it works. How come it shows two pictures instead of one ? I only jave one of these : <div id=“randomImage”><a href=“”></a></div>
Hi,
When I click on the link you posted above, I see:
Uncaught TypeError: Property '$' of object [object Object] is not a function
Could you update your test page and I’ll have a look.
Yes, I have updated the page now.
Hey,
Your mark-up is invalid. You have an open <a> tag which is causing the image to appear twice.
You have:
<div class="one-fourth last">
<h4>...</h4>
<p>Billeder og eksperimenter med grafisk tryk, foto og tegning.</p>
<br>
<div class="thumbnail-link">
<a href="..." class="thumbnail-roll-link">
<span>Besøg <strong>...</strong></span>
<div id="randomImage"><a href=""></a></div>
</div>
</div>
It should be:
<div class="one-fourth last">
<h4>...</h4>
<p>Billeder og eksperimenter med grafisk tryk, foto og tegning.</p>
<br>
<div class="thumbnail-link">
<span>Besøg <strong>...</strong></span>
<div id="randomImage"><a href=""></a></div>
</div>
</div>
HTH
Thanks could you please remove the link name and text, I would really like not to post client names on forum. Is that okay ?
Ah yes i see sorry about that will update
Done 
Thanks, could you also remove <h4> and span strong.
Btw updated and it works perfect. Thaks alot
No problem. Also done
I have tried to copy the code into my js/script.js. But then it does not work. Does the images path then also change ? Cant see any problems
EDIT: I can see that my script.js is loaded in the header. The random image script should be loaded just before closing body tag.
Yeah, make sure you aren’t referencing elements in your JS before they exist in your HTML.
If in doubt, wrap the randomImage.generate() in window.onload = function(){...}
Edit: or $(document).ready(function(){ ... })
as you are using jQuery
Not sure how to implement what you are saying :-/