/    Sign up×
Community /Pin to ProfileBookmark

Multiple Random Images

Copy linkTweet thisAlerts:
Jan 23.2011

Hey Everyone, first time user, learning to use java, CSS, and other tools.

I am having a problem that I cannot seem to figure out the solution.

What I’m looking to do is have a folder of images that I have show up on my website. I’m also looking to pull from this folder up to 6 or 7 times on the same page w/ randomized pictures that do not repeat.

Finally, I’m looking to be able to size and name these images based on which image randomly pulls.

If I didn’t explain myself well enough, [url]www.***************[/url] – tshirt company has something similar on their homepage. Each time the page is refreshed, a new tshirt loads, and there are multiple images that are randomly shown.

Thanks!

P.S… this is what I have right now, but I don’t think it’s correct, b/c it’s not grabbing the images.

images = new Array()

images[images.length] = ‘images/example.jpg’
images[images.length] = ‘images/example.jpg’
images[images.length] = ‘images/example.jpg’
images[images.length] = ‘images/example.jpg’
images[images.length] = ‘images/bg.jpg’
images[images.length] = ‘images/bg.jpg’
images[images.length] = ‘images/example.jpg’
images[images.length] = ‘images/example.jpg’
images[images.length] = ‘images/example.jpg’
images[images.length] = ‘images/example.jpg’
images[images.length] = ‘images/example.jpg’

how_many=6

function show_pic(){

for(i=0;i<how_many;i++){
rndnum=Math.floor(Math.random()*images.length)
document.images[“mypic”+i].src=images[rndnum]
images.splice(rndnum,1)
}

}

In my HTML, I am using this:

<onload=”show_pic()”>
<ul class=”main_image”>
<li><a href=””><img title=”mypic0″ width=308 height=460></a></li>
<li><a href=””><img title=”mypic1″ width=308 height=460></a></li>
</ul>
<ul class=”other_image”>
<li><a href=”#”><img title=”mypic2″ width=144 height=216></a></li>
<li><a href=”#”><img title=”mypic3″ width=144 height=216></a></li>
<li><a href=”#”><img title=”mypic4″ width=144 height=216></a></li>
<li><a href=”#”><img title=”mypic5″ width=144 height=216></a></li>
</ul>

to post a comment
JavaScript

12 Comments(s) ↴

Copy linkTweet thisAlerts:
@rwuichauthorJan 23.2011 — Just to make sure everyone knows what I'm trying to do.

I want to have t-shirt designs pulling from my images folder. However, we will probably have 20-30 or so to randomly be put on the home page.

Also, 2 of these designs will be randomly featured, thus be at a larger pixel than the rest.

Lastly, I would like to have the name of each T-shirt follow the random image that it is attached to, and be placed underneath the image. I would also like to put who made the design if possible.

Hopefully that clears it up. I don't mind doing work myself, and love to learn, so if someone could point me in the right direction, that would be awesome. Thanks!
Copy linkTweet thisAlerts:
@tirnaJan 23.2011 — This randomises the list of images and then assigns them to the respective links.

As long as you have at least as many images in the array as the sum of the number of li's you have in the 2 lists, a random unique image will be assigned to the links on each page load.

You should be able to use this as a starting point. Post back if you need more help.


&lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"[URL]http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd[/URL]"&gt;
&lt;html xmlns="[URL]http://www.w3.org/1999/xhtml[/URL]"&gt;
&lt;head&gt;
&lt;title&gt;&lt;/title&gt;
&lt;style type="text/css"&gt;
#main_image, #other_image {
list-style-type: none
}
#main_image img {
width: 308px;
height: 360px
}
#other_image img {
width: 144px;
height: 216px
}
&lt;/style&gt;
&lt;script type="text/javascript"&gt;
Array.prototype.shuffle = function() {
var s = [];
while (this.length) s.push(this.splice(Math.random() * this.length, 1));
while (s.length) this.push(s.pop());
return this;
}
//preload the images
var picPaths = [
'pic1.jpg',
'pic2.jpg',
'pic3.jpg',
'pic4.jpg',
'pic5.jpg',
'pic6.jpg',
'pic7.jpg',
'pic8.jpg',
'pic9.jpg',
'pic10.jpg'];
picPaths.shuffle();
picO = new Array();
for(i=0; i &lt; picPaths.length; i++){
picO[i] = new Image();
picO[i].src = picPaths[i];
}
window.onload=function(){
var mainImgs = document.getElementById('main_image').getElementsByTagName('img');
var otherImgs = document.getElementById('other_image').getElementsByTagName('img');
for(i=0; i &lt; mainImgs.length; i++){
mainImgs[i].src = picO[i].src;
}
for(i=mainImgs.length; i &lt; otherImgs.length+mainImgs.length; i++){
otherImgs[i-mainImgs.length].src = picO[i].src;
}
}
&lt;/script&gt;
&lt;/head&gt;
&lt;body&gt;
&lt;ul id="main_image"&gt;
&lt;li&gt;&lt;a href=""&gt;&lt;img src="" alt="" /&gt;&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href=""&gt;&lt;img src="" alt="" /&gt;&lt;/a&gt;&lt;/li&gt;
&lt;/ul&gt;
&lt;ul id="other_image"&gt;
&lt;li&gt;&lt;a href="#"&gt;&lt;img src="" alt="" /&gt;&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href="#"&gt;&lt;img src="" alt="" /&gt;&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href="#"&gt;&lt;img src="" alt="" /&gt;&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href="#"&gt;&lt;img src="" alt="" /&gt;&lt;/a&gt;&lt;/li&gt;
&lt;/ul&gt;
&lt;/body&gt;
&lt;/html&gt;
Copy linkTweet thisAlerts:
@rwuichauthorJan 23.2011 — Thank you so much... that worked well.

The thing I'm still confused about is how I can get the names of my t-shirts to show up underneath the image. I know the basic CSS, but I can't figure out how CSS will understand which image gets randomly loaded.

I'm also trying to get the artist of each design as well, but I'm sure that is a whole different animal.

Appreciate your time and help!
Copy linkTweet thisAlerts:
@tirnaJan 23.2011 — A similar approach for the additional data - tshirt names and artists.

I put all the data in a 2D array called picData. As I'm preloading the images I create a new 1D aray of index numbers for each image called randIndex. So for 6 images randIndex will be [1,2,3,4,5,6]. I then shuufle randIndex so that you get random images and their corresponding data in each <li>.

You can set your own styles to the tshirtname and artistName divs to put and make them look as you like.


[code=php]
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<style type="text/css">
#main_image, #other_image {
list-style-type: none
}
#main_image img {
width: 308px;
height: 360px
}
#other_image img {
width: 144px;
height: 216px
}
</style>
<script type="text/javascript">
Array.prototype.shuffle = function() {
var s = [];
while (this.length) s.push(this.splice(Math.random() * this.length, 1));
while (s.length) this.push(s.pop());
return this;
}
//preload the images
var picData = [
['num1.jpg','t-shirt 1','artist 1'],
['num2.jpg','t-shirt 2','artist 2'],
['num3.jpg','t-shirt 3','artist 3'],
['num4.jpg','t-shirt 4','artist 4'],
['num5.jpg','t-shirt 5','artist 5'],
['num6.jpg','t-shirt 6','artist 6']];
picO = new Array();
randIndex = new Array(); //array of random indexes
for(i=0; i < picData.length; i++){
picO[i] = new Image();
picO[i].src = picData[i][0];
randIndex.push(i);
}
randIndex.shuffle();
window.onload=function(){
var mainImgs = document.getElementById('main_image').getElementsByTagName('img');
var otherImgs = document.getElementById('other_image').getElementsByTagName('img');
var tshirtDivs = getElementsByClassName(document, 'div', 'tshirtName');
var artistDivs = getElementsByClassName(document, 'div', 'artistName');
//assign the main image data
for(i=0; i < mainImgs.length; i++){
mainImgs[i].src = picO[randIndex[i]].src; //assign a random image
tshirtDivs[i].innerHTML = picData[randIndex[i]][1];
artistDivs[i].innerHTML = picData[randIndex[i]][2];
}
//assign the other image data
for(i=mainImgs.length; i < otherImgs.length+mainImgs.length; i++){
otherImgs[i-mainImgs.length].src = picO[randIndex[i]].src;
tshirtDivs[i].innerHTML = picData[randIndex[i]][1];
artistDivs[i].innerHTML = picData[randIndex[i]][2];
}
}
//-------------------------------------------------------------------------
function getElementsByClassName(oElm, strTagName, strClassName){
var arrElements = (strTagName == "*" && oElm.all)? oElm.all : oElm.getElementsByTagName(strTagName);
var arrReturnElements = new Array();
strClassName = strClassName.replace(/-/g, "\-");
var oRegExp = new RegExp("(^|\s)" + strClassName + "(\s|$)");
var oElement;
for(var i=0; i<arrElements.length; i++){
oElement = arrElements[i];
if(oRegExp.test(oElement.className)){
arrReturnElements.push(oElement);
}
}
return (arrReturnElements)
}
</script>
</head>
<body>
<ul id="main_image">
<li>
<a href=""><img src="" alt="" /></a>
<div class="tshirtName"></div>
<div class="artistName"></div>
</li>
<li>
<a href=""><img src="" alt="" /></a>
<div class="tshirtName"></div>
<div class="artistName"></div>
</li>
</ul>
<ul id="other_image">
<li>
<a href=""><img src="" alt="" /></a>
<div class="tshirtName"></div>
<div class="artistName"></div>
</li>
<li>
<a href=""><img src="" alt="" /></a>
<div class="tshirtName"></div>
<div class="artistName"></div>
</li>
<li>
<a href=""><img src="" alt="" /></a>
<div class="tshirtName"></div>
<div class="artistName"></div>
</li>
<li>
<a href=""><img src="" alt="" /></a>
<div class="tshirtName"></div>
<div class="artistName"></div>
</li>
</ul>
</body>
</html>
[/code]
Copy linkTweet thisAlerts:
@tirnaJan 23.2011 — This is the same as the previous code except that I've added the href for each image link.

fyi: for an application like this I would normally use a database to store all the information in picData and then generate the web page dynamically server side using php without the need for javascript. In this case, the picData array is effectively your database.

[code=php]
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<style type="text/css">
#main_image, #other_image {
list-style-type: none
}
#main_image img {
border: none;
width: 308px;
height: 360px
}
#other_image img {
border: none;
width: 144px;
height: 216px
}
</style>
<script type="text/javascript">
Array.prototype.shuffle = function() {
var s = [];
while (this.length) s.push(this.splice(Math.random() * this.length, 1));
while (s.length) this.push(s.pop());
return this;
}
//preload the images
var picData = [
['num1.jpg','t-shirt 1','artist 1','url_1'],
['num2.jpg','t-shirt 2','artist 2','url_2'],
['num3.jpg','t-shirt 3','artist 3','url_3'],
['num4.jpg','t-shirt 4','artist 4','url_4'],
['num5.jpg','t-shirt 5','artist 5','url_5'],
['num6.jpg','t-shirt 6','artist 6','url_6']];
picO = new Array();
randIndex = new Array(); //array of random indexes
for(i=0; i < picData.length; i++){
picO[i] = new Image();
picO[i].src = picData[i][0];
randIndex.push(i);
}
randIndex.shuffle();
window.onload=function(){
var mainImgs = document.getElementById('main_image').getElementsByTagName('img');
var otherImgs = document.getElementById('other_image').getElementsByTagName('img');
var tshirtDivs = getElementsByClassName(document, 'div', 'tshirtName');
var artistDivs = getElementsByClassName(document, 'div', 'artistName');
//assign the main image data
for(i=0; i < mainImgs.length; i++){
mainImgs[i].src = picO[randIndex[i]].src; //assign a random image
mainImgs[i].parentNode.href = picData[randIndex[i]][3];
tshirtDivs[i].innerHTML = picData[randIndex[i]][1];
artistDivs[i].innerHTML = picData[randIndex[i]][2];
}
//assign the other image data
for(i=mainImgs.length; i < otherImgs.length+mainImgs.length; i++){
otherImgs[i-mainImgs.length].src = picO[randIndex[i]].src;
otherImgs[i-mainImgs.length].parentNode.href = picData[randIndex[i]][3];
tshirtDivs[i].innerHTML = picData[randIndex[i]][1];
artistDivs[i].innerHTML = picData[randIndex[i]][2];
}
}
//-------------------------------------------------------------------------
function getElementsByClassName(oElm, strTagName, strClassName){
var arrElements = (strTagName == "*" && oElm.all)? oElm.all : oElm.getElementsByTagName(strTagName);
var arrReturnElements = new Array();
strClassName = strClassName.replace(/-/g, "\-");
var oRegExp = new RegExp("(^|\s)" + strClassName + "(\s|$)");
var oElement;
for(var i=0; i<arrElements.length; i++){
oElement = arrElements[i];
if(oRegExp.test(oElement.className)){
arrReturnElements.push(oElement);
}
}
return (arrReturnElements)
}
</script>
</head>
<body>
<ul id="main_image">
<li>
<a href=""><img src="" alt="" /></a>
<div class="tshirtName"></div>
<div class="artistName"></div>
</li>
<li>
<a href=""><img src="" alt="" /></a>
<div class="tshirtName"></div>
<div class="artistName"></div>
</li>
</ul>
<ul id="other_image">
<li>
<a href=""><img src="" alt="" /></a>
<div class="tshirtName"></div>
<div class="artistName"></div>
</li>
<li>
<a href=""><img src="" alt="" /></a>
<div class="tshirtName"></div>
<div class="artistName"></div>
</li>
<li>
<a href=""><img src="" alt="" /></a>
<div class="tshirtName"></div>
<div class="artistName"></div>
</li>
<li>
<a href=""><img src="" alt="" /></a>
<div class="tshirtName"></div>
<div class="artistName"></div>
</li>
</ul>
</body>
</html>
[/code]
Copy linkTweet thisAlerts:
@rwuichauthorJan 23.2011 — Wow Tirna... you're very talented. I truly appreciate all the help.
Copy linkTweet thisAlerts:
@tirnaJan 23.2011 — Thanks for the compliment :o but there are others who know a lot more about js than I do.
Copy linkTweet thisAlerts:
@AliasJaneDoeApr 05.2015 — I realize this is an old post, but I just found it while googling. Tirna's code is exactly what I want, but I need the images in two different divs and can't figure out how to split the list. Can anybody help? Thanks.
Copy linkTweet thisAlerts:
@AliasJaneDoeApr 06.2015 — I realize this is an old post, but I just found it while googling. Tirna's code is exactly what I want, but I need the images in two different divs and can't figure out how to split the list. Can anybody help? Thanks.[/QUOTE]

Never mind, my problem was a typo.
Copy linkTweet thisAlerts:
@bkoenigDec 03.2021 — Hey, this is awesome and for them moment that what i need. just one question. is it possible to fix the images for 24 hours? so that new random images will be shown every 24hours.
Copy linkTweet thisAlerts:
@NogDogDec 03.2021 — {"locked":true}
Copy linkTweet thisAlerts:
@NogDogDec 03.2021 — Locking a decade-old thread. 🤦‍♂️
×

Success!

Help @rwuich spread the word by sharing this article on Twitter...

Tweet This
Sign in
Forgot password?
Sign in with TwitchSign in with GithubCreate Account
about: ({
version: 0.1.9 — BETA 4.24,
whats_new: community page,
up_next: more Davinci•003 tasks,
coming_soon: events calendar,
social: @webDeveloperHQ
});

legal: ({
terms: of use,
privacy: policy
});
changelog: (
version: 0.1.9,
notes: added community page

version: 0.1.8,
notes: added Davinci•003

version: 0.1.7,
notes: upvote answers to bounties

version: 0.1.6,
notes: article editor refresh
)...
recent_tips: (
tipper: @Yussuf4331,
tipped: article
amount: 1000 SATS,

tipper: @darkwebsites540,
tipped: article
amount: 10 SATS,

tipper: @Samric24,
tipped: article
amount: 1000 SATS,
)...