Rotatin Pictures

Sirleon · September 29, 2008

Hi there.Okay.. i have a little brainteaser for u guys.Im building a site/portal. and at the frontpage of that site i need 16 pictures, all put up 4 x 4 in tables. total i got about 130 pictures, i want those 16 pictures too rotate on the side when u hit Refresh button, so everytime the button is pushed, the pictures on the site will change/rotate from those 130 pics, but, i want a rule there too say that the same picture can not be shown more than once on a refresh. so i always want it too be 16 diffrent pictures.Too show and exaple i show u a pictures of the structure.I have blacked out the names and text in the pictures for the privacy of my customers.But there on the picture u can see what i mean by 4x4 inside tables.So.. Like i said, what i need is for those pictures/adds too rotate/change between the 130 i got every time u hit the Refresh/F5 button.Script can be all Xhtml/php/java.So i hope this brainteaser can be solved. and Thanks in advance for all help! :)I bow too your knowlegde greater than mine! :)Cheers Timmy

Synook · September 29, 2008

$images = glob("image_directory/*");$selected = array_rand($images, 16);$i = 1;echo "<table>";foreach($selected as $x) {	if (is_int(($i - 1) / 4)) echo "<tr>";	echo "<td><img src=\"{$images[$x]}\" alt=\"image $i\" /></td>";	if (is_int($i++ / 4)) echo "</tr>";}echo "</table>";

Sirleon · September 29, 2008

Hi.Thanks for answer..Im not quite sure where too put this code(feels like a moron). and is it php?Edit.. gonna make it easier.. heres the html code of the head and the body:<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /><title>Samlet portal for Spåkoner og Spåmenn</title><link rel="stylesheet" type="text/css" href="portal.css" /></head><body><div id="ytrekant"><div id="headertop"><h4>Samlet Portal for Spåkoner og Spåmenn!</h4><br /><br /><div class="menu1"><center> <div> Horoskop: <a href="">Vannmannen</a> <a href="">Fiskene</a> <a href="">Væren</a> <a href="">Tyren</a> <a href="">Tvillingene</a> <a href="">Krepsen</a> <a href="">Løven</a> <a href="">Jomfruen</a> <a href="">Vekten</a> <a href="">Skorpionen</a> <a href="">Skytten</a> <a href="">Steinbukken</a> </div> </center></div></div><div id="meny"><table class="table" width="176" height="179" border="0" align="center" cellspacing="6"> <tr> <th height="33" scope="col"><img src="Menyknapper/forside.jpg" width="139" height="29" /></th> </tr> <tr> <th height="33" scope="row"><img src="Menyknapper/klarsynte.jpg" width="139" height="29" /></th> </tr> <tr> <th height="33" scope="row"><img src="Menyknapper/tarotister.jpg" width="139" height="29" /></th> </tr> <tr> <th height="33" scope="row"><img src="Menyknapper/healere.jpg" width="139" height="29" /></th> </tr> <tr> <th height="33" scope="row"><img src="Menyknapper/alle.jpg" width="139" height="29" /></th> </tr></table></div><div id="content"><br /><p> Her kan du bla deg igjennom våre spåere. Ved og klikke på bildene under så kommer du inn på deres egen side der du kan lese litt om dem og deres jobb.</p><br /><table width="540" height="181" border="1" cellpadding="0" cellspacing="3" bordercolor="#a5cf4b" bgcolor="#a5cf4b" class="hoved"> <tr> <th width="262" height="83" scope="col"><img src="kunder/95097.jpg" width="400" height="130" /></th> <th width="262" scope="col"><img src="kunder/95122.jpg" width="400" height="130" /></th> </tr> <tr> <th scope="row"><img src="kunder/95086.jpg" width="400" height="130" /></th> <th><img src="kunder/95355.jpg" width="400" height="130" /></th> </tr></table><br /><br /><img src="line.png" width="800" height="50" class="line" /><br /><br /><br /><table width="484" height="208" border="0" cellspacing="6" class="hoved"> <tr> <th width="239" height="134" scope="col"><img src="kunder/95121.jpg" width="400" height="130" /></th> <th width="229" scope="col"><img src="kunder/95158.jpg" width="400" height="130" /></th> </tr> <tr> <th scope="row"> </th> <th> </th> </tr> <tr> <th scope="row"><img src="kunder/95153.jpg" width="400" height="130" /></th> <th><img src="kunder/95277.jpg" width="400" height="130" /></th> </tr></table><br /><br /><img src="line.png" width="800" height="50" class="line" /><br /><br /><br /><table width="727" height="208" border="0" cellspacing="6" class="hoved"> <tr> <th height="134" scope="col"><img src="kunder/95430.jpg" width="400" height="130" /></th> <th scope="col"><img src="kunder/95440.jpg" width="400" height="130" /></th> </tr> <tr> <th scope="col"> </th> <th scope="col"> </th> </tr> <tr> <th scope="row"><img src="kunder/95397.jpg" width="400" height="130" /></th> <th><img src="kunder/95333.jpg" width="400" height="130" /></th> </tr></table><br /><br /><img src="line.png" width="800" height="50" class="line" /><br /><br /><br /><table width="727" height="208" border="0" cellspacing="6" class="hoved"> <tr> <th height="134" scope="col"><img src="kunder/95476.jpg" width="400" height="130" /></th> <th scope="col"><img src="kunder/95457.jpg" width="400" height="130" /></th> </tr> <tr> <th scope="col"> </th> <th scope="col"> </th> </tr> <tr> <th scope="row"> </th> <th> </th> </tr></table><br /><br /></div></div></body></html>Know its alot of tekst.. but might help u helping me.. hehe.. :)dont know much about php or java.. most i know is css and html..

Synook · September 30, 2008

Just replace the entire .hoved with this (it is PHP)

$images = glob("kunder/*");$selected = array_rand($images, 16);$i = 1;echo "<table>";foreach($selected as $x) {	if (is_int(($i - 1) / 4)) echo "<tr>";	echo "<td><img src=\"{$images[$x]}\" alt=\"image $i\" /></td>";	if (is_int($i++ / 4)) echo "</tr>";}echo "</table>";

That code is incredibly confusing. Why are you using <col>s, and why are you using both CSS and the old presentational attributes for styling?

Sirleon · September 30, 2008

Hi Again.Okay.. then im gonna try that. hehe.hope i figures it out..the table(cols) are just standar in dreamweaver 8. so im not sure.And what ya mean with old presentation attributes?Edit:And again i feel like an complete morron.. hehe. Gotta learn php soon i guess.. :)I know the code aint going inside the css.Tried too replace class="hoved" with the code u gave me, but that didnt quite work either.got a few codelines and an emty frame/boks in the browser.I understand u must be confusing for my eeehhh.. horrible skills? hehe., but thanks for taking the time too help out.i really apriciate it.. ^^

Synook · October 1, 2008

No, I meant replace the entire table's code :)Could you post your attempt?Also, remember to name your page with the .php extension and have it on a server that supports PHP.

Sirleon · October 1, 2008

Hehe..I figured ut out actually.. so i got it too work..But.. only prob/thing now is that i want it splited up like the image above.. atm all 16 pictures are like this: 2 in the width and 8 on the length..but with no space.. i kinda like it too be 2 width and 2 length if u know what i mean.. just like in the picture..Thank for the script.. works almost great.. i get some broken pictures here and there sometimes for some strange reason i cant figure out..heres a picture how the site looks with the php script:So u see.. no spaces between like i have on the picture in the first post.. and i kinda want it like that.. and u can see the broken picture thing i was telling u about! ^^Edit:Heres the code btw:</div><div id="content"><br /><p> Her kan du bla deg igjennom våre spåere. Ved og klikke på bildene under så kommer du inn på deres egen side der du kan lese litt om dem og deres jobb.</p><br /><br /><br />

Synook · October 2, 2008

You've doubled up on the table tags Remove the echo "<table"; and echo "</table>";You can modify the for loop to display a break image after every four images, but I don't have time to write that now. For the broken images problem, do you have other types of files in that folder besides the images?And what did you do to the numbers???

Sirleon · October 2, 2008

Hi again..hehe.. removed the extra tags..and yes.. i had a folder there.. and that stupid thumbs.dll or what it named.. removed em.. and now the broken image prob is gone! SWEET.. :)i get more and more excited when things work.. hehe..Yeah.. tried around with diffrent numbers too se what they do and that so i maybe could understand some more of the script..Its back too its original now, and all atm works perfect.. just want those spaces..Thats okay.. could u try help me with that code when u have time for it? would really apriciate it!And again! thanks alot for being so helpfull and patitent with me.. php = me = newbiee deluxe! hehe.. but im learning..

Synook · October 4, 2008

For the space, you can make it so that every four cells, it displays the closing table tag, some code, and another opening table tag. By the way, your table only appears to be two columns wide so I'll change that.

foreach($selected as $x) {	if (is_int(($i - 1) / 2)) echo "<tr>";	echo "<td><img src=\"{$images[$x]}\" alt=\"image $i\" /></td>";	if (is_int($i / 2)) echo "</tr>"; //note no ++ operator here	if (is_int($i++ / 4) && $i != 16) echo "</table><img src=\"line.png\" /><table>";}

That should work...

Sirleon · October 6, 2008

Wow..That worked so perfect that im amazed.. hehe..But now.. another little brainteaser for ya.If i finds out that i want diffrent links for each and every picture i have in the folder. Would that be possible? and if yes. how?Thanks for all help u have supported me with so far. im am VERY gratefull!

Synook · October 6, 2008

What sort of link? You'll need some way of indicating the destination, e.g. through the image name or a giant table.

Sirleon · October 6, 2008

Hi again..A link to another page.. like the persons homepage on the web.Edit..heres one of the urls im gonna link too..http://www.krystallkulen.no/?hjem&usr=208 and the picture that gonna have that link is= 95149.jpg

Synook · October 6, 2008

Humm... any sort of relation between the picture and the link? Or else you may have to create a database with all the images referenced with their respective link.

Sirleon · October 6, 2008

yeah.. its a relation.. im making a site for some customers, so the pictures gonna have a link too the customers personal pages..When u say database, u mean like an mySql or a xml?

Synook · October 6, 2008

MySQL would be easier.

Sirleon · October 6, 2008

okay.. cool.But then again too my prob.. hehe.. i have never ever tried Mysql. so i dont know anything about it.. just startet too learn Php.So if u have time.. and wanna help me.. would u kinda point me in the rigth direction? hehe.. and again. thank you for all your help. i do really apriciate it!

Sirleon · October 7, 2008

^^

Neorussell · October 9, 2008

to add to this, i got random working but I want to make the rotating pictures linkable.I'm using javascript to do this.

<script LANGUAGE="JavaScript"></script>

Can I make those rotating images into a link?Is this possible?Thanks for somebody who answers.

Rotatin Pictures

Recommended Posts

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Archived