I'm trying to display random images at random areas within a div. What I'm looking for is close to this site. They display images and boxes that fades in and out.
I've looked for a jQuery plugin for something like this but I can't find any. You guys have any idea about this?
Give each div a different class name with a numerical notation. Something like 'random1', 'random2' etc. then style, colour and absolutely position the divs using css.
Then use jquery to loop over the div's and give them the class in a random order.
$(document).ready(function() {
var length = $("div").length;
$('div').each(function(index) {
$(this).addClass('random'+(Math.floor(Math.random()*length) + 1));
});
});
Pardon the length, this grew as I thought more about the OP's intent, rather than the text of his question. What is needed here is a factory, not a truly random list per-se. Normally, I'd make this a class, but I've left it more procedural for legibility by those not so inclined.
Also, I would pre-define the 'landing spots' for the images, because building it algorithmically is just asking for a poor experience and trouble... and hence my suggestion:
$(document).ready(function(){
function rndsort(a,b)
{
return (Math.random() > 0.5) ? a : b;
}
function getImage()
{
if (imgs.length > 0)
{
return imgs.shift();
}
}
function switchImage(container)
{
var newImage = getImage();
if (newImage)
{
if ($(container).data('img'))
{
imgs.push($(container.data('img'));
}
$(container).html('<img src="'+getImage()+'" />');
}
}
function doRandom()
{
switchImage($('.places').get(Math.floor(Math.random() * $('.places'.length)));
}
var imgs = ['image1.jpg','image2.jpg', etc... ];
imgs.sort(rndsort);
$('.places').each(function(idx, el){
switchImage(el);
});
// add a timer and start calling 'doRandom()';
});
The following function will add an image inside container selector and return it's id.
function rnd(max) { return Math.floor(Math.random()*(max+1)) }
function showImage(container, maxwidth, maxheight, imgsrc, imgwidth, imgheight) {
var id = "newimage" + rnd(1000000);
$(container).append(
"<img id='" + id + "' src='" + imgsrc +
"' style='display:block; float:left; position:absolute;" +
"left:" + rnd(maxwidth - imgwidth) + "px;" +
"top:" + rnd(maxheight - imgheight) + "px'>");
$('#' + id).fadeIn();
return id;
}
Let's say you have 10 images named image0.jpg to image10.jpg, and they are of same width/height.
You can then call this function every 10 seconds like this:
setInterval(function() {
showImage("#container", 300, 300, "image" + rnd(10) + ".jpg", 100, 100);
}, 10000);
The container should be this:
<div id='container' style='width:300px; height:300px; position:relative'>
I made a sample to work with placekitten.com, where a different image is generated if you change the dimensions. It's here: http://jsfiddle.net/G5Xrz/
If you really want an effect like the linked site, then you're not really looking to add random images in random positions. The positions are hard-coded and each one randomly chooses from a subset of images at the proper size.
var tS;
var tL;
var imgSmall = ["1.jpg", "2.png", "3.png", "10.jpg", "4.jpg", "5.jpg", "6.jpg", "7.jpg", "8.jpg", "9.jpg"];
var smallLen = imgSmall.length;
var imgLarge = ["A1.jpg", "A2.jpg", "A3.jpg", "A10.jpg", "A4.bmp", "A5.jpg", "A6.jpg", "A7.jpg", "A8.jpg", "A9.jpg"];
var largeLen = imgLarge.length;
function showLarge() {
var idxLarge = Math.floor(Math.random() * largeLen);
$("#large").fadeToggle(300, function() { $("#large").attr("src", "img/" + imgLarge[idxLarge]) }).fadeToggle(300);
tL = setTimeout("showLarge()", 2000);
}
function showSmall() {
var idxSmall = Math.floor(Math.random() * smallLen);
$("#small").fadeToggle(300, function() { $("#small").attr("src", "img/" + imgSmall[idxSmall]) }).fadeToggle(300);
tS = setTimeout("showSmall()", 1700);
}
$(document).ready(function() {
showLarge();
showSmall();
});
In the HTML, you just need a couple positions for the images.
<img src="img/1.jpg" id="small" style="position:absolute; top:50px; left:100px;" />
<img src="img/A8.jpg" id="large" style="position:absolute; top:100px; left:400px;" />
The advantage of this approach is that you can design the layout exactly as you like, with colored divs and all. You can also use a variant of that code to animate the colors of the colored divs.
