Random image on refresh
29 juni 2007 - 10:39   
geplaatst door: Kapotlood
Eigenlijk een korte vraag, maar vást zonder kort antwoord ;)

Ik heb wel eens gehoord van MooFX en jQuery e.d., maar volgens mij bieden
die niet precies wat ik zoek. Op m'n website zou ik graag een random plaatje
willen hebben: elke keer dat je de pagina bezoekt zou hij een ander plaatje
moeten tonen.

Kan iemand me op weg helpen met een link, stuk code of misschien zoiets als
jQuery of MooFX toevallig?

Alvast bedankt :)

Random image on refresh
29 juni 2007 - 10:48    reactie #1
geplaatst door: Leendert
Is dit PHP scriptje misschien iets voor je?


<?php<p>$directory "images/random/";<p>if ( $handle opendir($directory) )<br>{<br> $files = array();<br> while ( false !== ($file readdir($handle)) )<br> {<br> $filename $directory.$file;<br> if ( is_file($filename) )<br> $files[] = $filename;<br> }<br> closedir($handle); <p> if ( count($files) > )<br> {<br> srand(time());<br> $i rand(0count($files)-1);<br> $random_file $files[$i];<br> }<br>}<p>print '<img src=\".$random_file.\">';<p>?>
Random image on refresh
29 juni 2007 - 10:51    reactie #2
geplaatst door: Kapotlood
Hmm, nu is m'n PHP net zo goed als m'n Chinees, maar het kleine beetje dat
ik begrijp doet me wel een belletje rinkelen, hehehe.

Bij een gewone HTML-pagina (xHTML transitional), zou ik de PHP-code dan in
een extern bestandje moeten zetten, of is het beter om het gewoon bovenaan
in de BODY te zetten?

En kun je me vertellen hoe ik dit moet toepassen in de HTML?
Stel dat ik een map met plaatjes heb (allemaal 50x100px bijvoorbeeld) op
http://www.motustudio.org/plaatjes/ ...dan moet ik de $directory = "";
veranderen naar die URL toch? En hoe zou ik deze code moeten linken naar
de plek waar die plaatjes in de HTML zichtbaar moeten worden?

Iig alvast bedankt voor de code :)

Random image on refresh
29 juni 2007 - 11:04    reactie #3
geplaatst door: Leendert
Je kan vanuit een HTML pagina niet verwijzen naar of invoegen, hiervoor moet PHP op je server draaien en je moet de pagina de extensie .php geven. Je kan vervolgens de bovenstaande code invoegen op de plek in de pagina waar je het plaatje wilt zien. Dit kan je doen door copy/paste of door het invullen van een include opdracht. In beide gevallen moet je even opletten of boven en onder het ingevoegde script niet al een < ? php en ? > (minus spaties) tag staan anders levert dit fouten op. Een include opdracht kan je als volgt geven:


<?php<p>include("randomimage.php");<p>?>

als je het bestand met bovenstaande code erin zo hebt genoemd.

Het is het beste om de plaatjes die je op die plek wilt laten zien in een aparte map op je server onderbrengt. De URL in het script pas je daarop aan. De print opdracht onderaan het script kan je eventueel aanpassen door breedte en hoogte van het plaatje in te vullen, randdikte, randkleur, etc. Dat kan met gewone HTML maar met een \ voor elke ". In diezelfde string kan je ook ene class aangeven voor opmaken van het plaatje via CSS i.p.v. alles in de  string met een style.

(Bewerkt door Leendert om 11:11, 29-06-2007)

Random image on refresh
29 juni 2007 - 11:10    reactie #4
geplaatst door: Kapotlood
Ah, dus even een opsomming voor mijn snappertje:

- Ik maak een PHP-bestand aan met de code die je hebt gegeven (bijv. randomimage.php)
- In de HTML-pagina vul ik op de plek waar die plaatjes moeten komen deze code in:

<?php <br>include("randomimage.php"); <br>?>

Ervan uitgaande dat ik nu begrijp hoe je die plaatjes laat zien, snap ik niet hoe ik deze
plaatjes met CSS kan stijlen (border, float, margin's e.d. bijvoorbeeld). Volgens mij is
dat wel mogelijk, maar ik zie niet waar ik de div's e.d. moet zetten... of moet ik die
php-code die in de HTML staat dan gewoon in een DIV zetten?

Random image on refresh
29 juni 2007 - 11:15    reactie #5
geplaatst door: Leendert
Je kan de div ook met een class of div id boven en onder aanbrengen, de print opdracht is weergeven naar scherm, je kan dus meerdere regels daarmee invoegen.


print '<img src=\".$random_file.\">';

wordt dan:


print '<div id=\"randomploagie_id\">';
print '<img src=\".$random_file.\">';
print '</div>';

Zoals al gezegd: zorg er ook voor dat het bestand waarin je het script oproept een .php extensie heeft en PHP werkt.

(Bewerkt door Leendert om 11:17, 29-06-2007)

Random image on refresh
29 juni 2007 - 11:22    reactie #6
geplaatst door: Kapotlood
Het bestand waar ik het script oproep?

Ehmm, ik ben even de weg kwijt... dit is toch wat ik moet doen?
- Maak een bestand "randomimage.php" aan met de code die je aangaf
- in het bestand index.html geef ik op de plek waar de plaatjes moeten komen
het "include" stukje aan.

Dit zou dan de site-structuur worden:
- index.html
- portfolio.html
- linkjes.html
- randomimage.php
- randomimages (map met alle images voor het php-script)

M'n domein ondersteund PHP e.d., dus da's gelukkig geen probleem ;)
Maar het stylen, hoe moet ik dat doen met de printopdracht in die PHP? Kan ik 'm
niet stylen door het volgende te doen?

<div id="randomstyle">
<?php <br>include("randomimage.php"); <br>?>
</div>

Mvg,
Joram

Random image on refresh
29 juni 2007 - 11:25    reactie #7
geplaatst door: Leendert
Het bestand index.html heeft geen .php extensie, je weet wel, dat stukje tekst achter het puntje. :woot:

Je kan de div tags ook gewoon daar zetten zoals jij aangeeft, geen verschil. :smile:

Random image on refresh
29 juni 2007 - 11:30    reactie #8
geplaatst door: Kapotlood
 :happy: Dat index.html geen php-bestand is weet ik, hehe.
Maar da's nou net wat ik wel graag zou willen... een stuk code (php of javascript,
maar het liefst alleen php) die ik kan plaatsen in de HTML, of in ieder geval
kan linken in de HTML.

De bedoeling is eigenlijk om gewoon een hele xHTML site te maken, en dan op
1 plek op de indexpagina (index.html) die PHP te activeren en de plaatjes random
te laten zien na elke refresh.

Ehhh, je gaat me toch niet vertellen dat dat niet mogelijk is he? Dan heb ik voor
niets een half uurtje flink zitten dromen, hahaha :-D

Random image on refresh
29 juni 2007 - 11:33    reactie #9
geplaatst door: Leendert
De bestandsextensie .html voorkomt dat er PHP in geladen kan worden, gewoon hernoemen, heeft geen effect op de werking van de HTML code in het bestand, zorgt er wél voor dat óók PHP geladen wordt. Ik weet het dat je niemand moet vertrouwen die zegt: "trust me" maar ik ben net zo betrouwbaar as mien klomp'n. :wink:
Random image on refresh
29 juni 2007 - 11:36    reactie #10
geplaatst door: Kapotlood
Hehe, ok.. dus ik kan de hele index.html gewoon een andere extensie geven, zonder
dat de site op z'n gat gaat? Da's nog eens leuk om te weten :)

... da's dan ook niet van invloed op de doctype e.d. die je bovenaan je html-pagina zet?

Random image on refresh
29 juni 2007 - 11:39    reactie #11
geplaatst door: Leendert
Daar heb je me. :wink:

Imand die dat weet? Ferris? Ferris Bueller? Anyone? :blink:

Random image on refresh
29 juni 2007 - 11:42    reactie #12
geplaatst door: denn88
Wat zitten we allemaal moeilijk te doen! Je kan het net zo goed met Javascript doen. Op voorwaarden dan dat je geen 'map uitlees truuk' wil gebruiken, maar gewoon een array waar plaatjes namen in staan. Met Javascript maak je een radom nummer (index nr van de array) en verander het plaatje bij elke pageload.

Waarom direct grijpen naar een server side technologie terwijl het client side veel sneller en simpler kan, met gewone HTML. Het javascript kun je ook op elke pagina waar je dat effect wil hebben laten 'includen' net als PHP. Bovendien: als je website hebt waar geen PHP draait of je wilt het niet gebruiken omdat je misschien een simpele website hebt of er geen verstand van hebt.

Atlantisdesign.nl - webDesign en de Mac. Bezig met webdesign / webdevelopment? Je eigen Mac als lokale webserver?
iPhone 4, 16 GB (black) | MacBook Pro 15", 2.44Ghz Intel Core 2 Duo,  4GB Ram | Airport Extreme | MacMini Intel Core 2 Duo, 4GB Ram | PowerMac G4 MMD Dual 1Ghz.
Random image on refresh
29 juni 2007 - 11:49    reactie #13
geplaatst door: Kapotlood
@Leendert;
Was dat geen serie of film ofzo? :P

Den88;
Klopt, ik heb het wel eens gezien ja. Maar als iemand Javascript heeft
uitstaan (50% van de Windowsgebruikers met Service Pack 2 dus), dan
werkt het niet meer. Vandaar dat PHP m'n voorlopige voorkeur heeft, hehe.
Maar dan nog, ook met JavaScript weet ik niet hoe ik het moet doen :-)

Ik kom een heel eind met HTML en CSS, en m'n website host ondersteund alles :-)
Maar ik heb net zoveel verstand van PHP als van Javascript... het enige wat ik wel
weet is dat Javascript niet bij iedereen aan staat, terwijl PHP altijd werkt.

Mvg,
Joram

Random image on refresh
29 juni 2007 - 11:59    reactie #14
geplaatst door: Jan van Es
Als je wilt weten hoe het met JavaScript kan, kun je even spieken op de homepage van Apple Club Eindhoven. Daar wordt een scriptje van Kaosweaver gebruikt.
Random image on refresh
29 juni 2007 - 12:09    reactie #15
geplaatst door: Kapotlood
Dat Kaosweaver is me helemaal onbekend :)
Maar het scriptje wat ik van ze downloade om te kijken wat het is was een "MXP"-bestand.
Geen idee wat het is, maar ik kan er niet echt veel mee volgens mij.
Random image on refresh
29 juni 2007 - 12:21    reactie #16
geplaatst door: denn88
@joram
Geen idee of dat 50% van de SP2 Windows gebruikers zijn, zou heel vreemd zijn. Eerder of iedereen heeft het uit staan .. of iedereen heeft het aan staan. Wat mij erg stom lijkt van Microsoft met z'n eigen tak van Javascript ... jScript. Maarja je weet het nooit bij MS of IE.

Doet me denken aan een sketch: How to irritate people.

Terug on-topic:
Wat je wilt bereiken is toch iets van een 'special effect'. Het is dan wel simpel plaatjes wisselen (met javascript kan je er zelfs een fade effect tussendoor doen, en nee dat is dan geen smerige applet!). En daar kun je rustig Javascript voor gebruiken.

Als je interesse hebt heb ik een heel mooie 'unobtrusive' methode die heel makkelijk te implenteren is. Daar heb je zelf geen Javascript kennis voor nodig... alleen maar HTML kennis (hoe maak ik een LI'tje met plaatjes) , en dit die ene met fade effect. Stuur anders ff een pb'tje en ik zal vanavond ofzo wel even kijken (thuis, want nu zit ik op me werk).

Atlantisdesign.nl - webDesign en de Mac. Bezig met webdesign / webdevelopment? Je eigen Mac als lokale webserver?
iPhone 4, 16 GB (black) | MacBook Pro 15", 2.44Ghz Intel Core 2 Duo,  4GB Ram | Airport Extreme | MacMini Intel Core 2 Duo, 4GB Ram | PowerMac G4 MMD Dual 1Ghz.
Random image on refresh
29 juni 2007 - 12:24    reactie #17
geplaatst door: Kapotlood
Oh, dat zou wel erg fijn zijn :)

Maar ik hoef geen effecten verder hoor ;) Het plaatje moet/mag alleen gewisseld
worden als mensen de site opnieuw bezoeken of de pagina refreshen. En hier en
daar kleine dingen aanpassen in PHP of Javascript krijg ik nog wel voor elkaar met
een paar aanwijzingen... zolang het maar niet te lastig wordt, hehe.

Random image on refresh
29 juni 2007 - 13:58    reactie #18
geplaatst door: WiMac
Joram, ik heb een tijd geleden alweer ook zoiets gemaakt met javascript. Is dat misschien wat?
Klein script en tijd is aan te passen. Zie voorbeeld op: http://www.limv.nl/voorbeeld
Random image on refresh
29 juni 2007 - 14:06    reactie #19
geplaatst door: Kapotlood
Qua effect is dat ongeveer wat ik zoek, maar hij switch automatisch.
Het enige wat ik anders zou willen is dat hij alleen een ander plaatje inlaad
als iemand de pagina refreshed :-)

Als je dat zou weten te veranderen neem met ik alle plezier die code van
je over, hehe.

Random image on refresh
29 juni 2007 - 14:27    reactie #20
geplaatst door: WiMac
Die code heb ik ook een keer gehad. Ik ga weer even zoeken...  :reading:
Random image on refresh
29 juni 2007 - 14:28    reactie #21
geplaatst door: Kapotlood
Supers :thumbs-up:

Bedankt voor de moeite alvast :)

Random image on refresh
29 juni 2007 - 14:59    reactie #22
geplaatst door: WiMac
Ik heb een nieuw voorbeeld moeten maken, dus het duurde even... :sleepy:

Hier is het voorbeeld: http://www.limv.nl/voorbeeld2/

Random image on refresh
29 juni 2007 - 15:09    reactie #23
geplaatst door: Kapotlood
Oh, helemaal geweldig :thumbs-up:

Één vraagje nog: Ik snap waar ik de bestandsnamen e.d. moet neerzetten,
en dat ik het stukje script language in de body moet plaatsen op de plek
waar ik de plaatjes wil hebben.
Maar kan ik die plaatjes ook nog stylen met CSS? Bijvoorbeeld gewoon door 't
stukje in een Div of Class te zetten?

Random image on refresh
29 juni 2007 - 15:19    reactie #24
geplaatst door: WiMac
Sorry, zover gaat mijn kennis niet... :blush: