Bilde-Slider/fremviser - enkelt php script.

Lsass · 12. mars 2008

Hei dere!

Har tenkt å ha en bilde-slider nederst på denne siden:

http://oestbye.net/eok/

Tenkte at det var 3 bilder der, som viser bilder fra 3 forskjellige mapper.

sånn at det første bildet bytter på å vise bilder fra en mappe feks. kalt "treninger"

det andre bildet bytter på å vise bilder fra en mappa kalt "løp"

og det tredje bildet bytter på å vise bilder fra en mappe kalt "samlinger"

Og alle disse mappene vil være lokalisert på min ftp-server med bilder i hver mappe..

Er det et enkelt script som kan fange opp disse bildene og selv sette de i "slide"?

så jeg ikke selv trenger å adde ett og ett bilde i koden? men at den setter det opp selv?

takker

G2Petter · 13. mars 2008

Tenker du at disse bildene skal oppdateres mens siden er lastet, eller bare hver gang siden laster? Hvis det er det første må du bruke Javascript for å få det til.

Lsass · 13. mars 2008

tenkte at når noen lastet siden / refreshet så sjekker scriptet hvilke bilder som ligger i de dib. Mappene og lager en fremviser/slide.. Trenger ikke være noe avanserte slides, bare så bildet bytter sånn ca hvert 5. Sekund og da viser neste bilde som ligger i mappen... Er dette vanskelig å lage?

G2Petter · 13. mars 2008

Det er ikke veldig vanskelig å lage, men det er ikke mulig å gjøre det med PHP alene. Du trenger Javascript for at oppdateringene skal skje hos brukeren.

DDrevan · 13. mars 2008

Var jeg deg ville jeg lagd en fremviser i flash.. men det er kanskje ikke ønskelig?

Lsass · 13. mars 2008

trenger ikke noe avanserte greier.. Jeg har et php script som lager et bildeoppsett, sjekk bilder.. Dette scriptet finner ut hvor mange bilder det er i mappen, og gjør dem mindre og om man trykker på de får man sett set fulle bildet!

Må jo da gå ann at scriptet sjekker hvor mange bilder som er i mappen, og viser det første bildet først og så det neste etter 5sek osv... Men man må kanskje tvinge webbrowseren til brukeren til å rrfreshe da? Er egentlig ute etter den letteste og beste løsningen...

Men vet ikke hva som er den enkleste løsningen

Sorry for skrivefeil, sitter på min iphone på skola :o

G2Petter · 13. mars 2008

Nå har jeg snekret sammen noe AJAX-greier. Det forutsetter selvfølgelig at brukeren har Javascript aktivert, og vil ikke fungere uten. Jeg bruker Prototype-rammeverket til å ta seg av Javascript-delen. Jeg har lagt ved alle filene jeg brukte. Du kan med fordel bytte ut bildene i gfx-mappa med dine egne for å se hvordan det fungerer. Jeg vet ikke om dette er en optimal måte å gjøre det på, men here goes: (Foreløpig bare laget for én mappe):

index.html

<!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" lang="en" xml:lang="en">
<head>
	<script type='text/javascript' src='prototype.js'></script>
	<script type='text/javascript' src='gallery.js'></script>
</head>
<body>
	<div id="output"></div><!-- Scriptet trenger en div som har id "output" -->
</body>
</html>

gallery.js

Event.observe(window, 'load', init); // Når vinduet er ferdig lastet kalles funksjonen init

function init() {
new Ajax.Request('gallery.php', { //Lager en ny ajax-forespørsel til gallery.php uten noen parametere
	onSuccess: function(transport) { //Gjør dette hvis ajax-kallet er vellykket:
	$('output').update(transport.responseText); //Oppdater elementet med id "output" med resultatet fra PHP-scriptet
	}
});
setTimeout(init, 2000) //Hvert 2000-ende millisekund kaller du funksjonen på nytt
}

gallery.php

<?php
/*
	Scriptet åpner en mappe, finner alle filene i den (bør kanskje endres til bare å finne bilder), og skriver ut den første fila (bildet). Deretter skriver den ut det påfølgende bildet helt til den har vært igjennom alle bildene, og så begynner den på nytt.
*/
session_start(); //Siden scriptet kjøres på nytt for hver gang trenger vi et sted å lagre hvor langt vi er kommet
$handle = opendir("gfx"); //åpner mappen "gfx"
$images = array();
while ($file = readdir($handle)) { //Blar igjennom alle filene i mappen
	if ($file != "." && $file != ".." && $file != "Thumbs.db") { //Hvis den gitte fila ikke er en av de tre følgende ...
		$images[] = $file; //... legg til fila i images-arrayet
	}
}
closedir($handle); //lukk mappen
if(!$_SESSION['img']) { //Hvis dette er den første gangen vi kjører scriptet, opprett variabelen og sett den til 0
	$_SESSION['img'] = 0;
}



echo "<img src='gfx/{$images[$_SESSION['img']]}' />"; //Skriv ut et bilde basert på hvilket nummer du har kommet til (begynner å telle på 0)
if ($_SESSION['img'] >= count($images) - 1) { //Hvis scriptet har vært gjennom alle bildene ...
	$_SESSION['img'] = 0; //... begynn på nytt
}
else {
	$_SESSION['img'] ++; //Hvis ikke, legg til én, så det er mulig å hente ut neste bilde
}

?>

Edit: fjernet vedlegg, bruk vedlegget i neste innleg i stedet.

Endret 13. mars 2008 av G2Petter

G2Petter · 13. mars 2008

Jeg har gjort en kjapp oppdatering av gallery.php og skrevet det om til en funksjon som kan kalles en gang for hver mappe du vil laste bilder fra. Legg merke til at når funksjonen kalles MÅ den har forskjellige navn i det andre parameteret.

<?php
/*
	Scriptet åpner en mappe, finner alle filene i den (bør kanskje endres til bare å finne bilder), og skriver ut den første fila (bildet). Deretter skriver den ut det påfølgende bildet helt til den har vært igjennom alle bildene, og så begynner den på nytt.
*/
session_start(); //Siden scriptet kjøres på nytt for hver gang trenger vi et sted å lagre hvor langt vi er kommet

function gallery($folder, $name) { //Input: navnet på mappa og hva du vil kalle session-variabelen. $name MÅ være forskjellig
	$handle = opendir($folder);
	$images = array();
	while ($file = readdir($handle)) { //Blar igjennom alle filene i mappen
		if ($file != "." && $file != ".." && $file != "Thumbs.db") { //Hvis den gitte fila ikke er en av de tre følgende ...
			$images[] = $file; //... legg til fila i images-arrayet
		}
	}
	closedir($handle); //lukk mappen
	if(!$_SESSION[$name]) { //Hvis dette er den første gangen vi kjører scriptet, opprett variabelen og sett den til 0
		$_SESSION[$name] = 0;
	}
	echo "<img src='$folder/{$images[$_SESSION[$name]]}' />"; //Skriv ut et bilde basert på hvilket nummer du har kommet til (begynner å telle på 0)
	if ($_SESSION[$name] >= count($images) - 1) { //Hvis scriptet har vært gjennom alle bildene ...
		$_SESSION[$name] = 0; //... begynn på nytt
	}
	else {
		$_SESSION[$name] ++; //Hvis ikke, legg til én, så det er mulig å hente ut neste bilde
	}
}

gallery('gfx','array');
gallery('gfx2','array2');
?>

gallery.zip

Lsass · 13. mars 2008

nydelig

Skal se på dette da jeg kommer hjem, ferdig 1300.. Matte med iphone ftw!

Hjertelig tusen takk inntil videre

Lsass · 13. mars 2008

Hei igjen!

nydelig script du la ut, funker akkurat slik jeg vil ha det!

bare litt modifisering.

Dere kan se hvordan det er her: http://oestbye.net/eok/ <-- nederst

1. Mulighet for at jeg kan få 2 sånne til? sånn at det blir 3 vedsiden av hverandre

i tillegg sette en fast størrelse på bildene? var det da jeg måtte endre noe i CSS filen?

isåfall hvordan? :o

TAKK HITTIL nydelig!

G2Petter · 13. mars 2008

Se på den siste posten min, der står det hvordan du kan få flere.

Når det gjelder størrelse kan du slenge inn dette i CSS-en din:

div#output img {

width: 100px;

height: 100px;

}

eller noe sånt, men jeg anbefaler å justere størrelsen på bildene manuelt eller med et script så siden ikke laster mer enn nødvendig.

Lsass · 13. mars 2008

Jepp, det er jeg enig i : )

Har et program som endrer størrelsene på flere bilder samtidig, bruker dette ;D

i tillegg til CSS add'n

tuuuuusen takk

Edit:

hmm, leste den siste posten din, men er ikke helt sikker på at jeg skjønner hva du mener..

Det virker som om scriptet ditt kan kjøre flere ganger fra forskjeldige mapper utenom å adde scritpet flere ganger enn 1.

Men skjønner ikke helt hvilken variabel jeg skal endre for å få flere mapper, og hvor jeg skal angi hvilke mapper disse skal tas fra..

Fant ut at den seff tar bildene fra "gfx" mappa, og fant ut hvordan jeg endra denne..

men hvordan få flere, og angi disse? sorry noobish, sikkert ez

Endret 13. mars 2008 av Lsass

G2Petter · 13. mars 2008

De to nederste linjene kaller funksjonen gallery en gang hver med forskjellige parametere:

gallery('gfx','array');

gallery('gfx2','array2');

Det første parameteret er mappa du skal lete gjennom, og det andre er navnet du skal gi arrayet. Det eneste som er viktig er at mappa eksisterer, og at arrayet ikke har samme navn som noen andre funksjoner eller andre variabler som ligger i $_SESSION

Lsass · 13. mars 2008

Beklager, min feil..

fant seff denne da jeg sjekket den siste postet koden din, hadde byttet ut til denne..

men unpacket .rar fil og skrev over :\

takk uansett

Lsass · 13. mars 2008

Scriptet funker akkurat som jeg vil, utrolig bra

Eneste er det siste "problemet" nå

http://oestbye.net/eok/

Hvordan få de 3 på samme linje, med mellomrom, så det ikke bildene ligger helt tett inntil hverandre? : )

G2Petter · 13. mars 2008

Mellomrommet setter du med margin. Eksperimenter med hva som passer. Husk å resize bildene så det ikke blir så mye å laste. Nå ser det veldig rart ut siden alle bildene har samme bredde og høyde uavhengig av opprinnelige proporsjoner.

Jeg foreslår at du setter en fast høyde på bildene, og lar bredden stå på auto, så beholder du forholdet mellom høyde og bredde.

Lsass · 13. mars 2008

jada : )

tester bare ut

Lsass · 13. mars 2008

hmmm, prøvd med marginer, men vet ikke om jeg får det til : \

først la jeg til;

.margin {margin: 2cm 4cm 3cm 4cm}

i css fila

så endret jeg gallery koden litt nederst til;

<p class="margin">gallery('gfx','array');/p>

<p class="margin">gallery('gfx2','array2');/p>

<p class="margin">gallery('gfx3','array3');/p>

Dette går nok kanskje ikke?

men uansett om jeg får margin mellom de, hvordan få de på samme linje?

www.oestbye.net/eok

de er ikke det nå :\

Lsass · 13. mars 2008

fant ut dette selv faktisk

takk inntil videre ;D

http://oestbye.net/eok/ for å se resultat

faen, funket fett i OPERA, men ble evig stygt i IE..

1. bildene skifter ikke / slider

2. De står ikke stilt riktig..

noen som vet hvordan jeg fikser dette?

Ligger med screen fra opera og ie

Endret 13. mars 2008 av Lsass

WiRRE · 14. mars 2008

Du kunne jo brukt php til å mekke ett javascript array, så kan kunne du loope deg igjennom det, så slipper du Ajax biten.. Mindre load på server etc.. Jeg er enig i at Ajax er fryktelig gøy, men det behøver jo ikke stå å sende request til serveren hvert 20 sekund for alle brukerene som er inne! Tenk hvor mye båndbredde dette hadde blitt for f.eks vg.no :dribble:

Logg inn

Bilde-Slider/fremviser - enkelt php script.

Anbefalte innlegg

Lsass

Videoannonse

G2Petter

Lsass

G2Petter

DDrevan

Lsass

G2Petter

G2Petter

Lsass

Lsass

G2Petter

Lsass

G2Petter

Lsass

Lsass

G2Petter

Lsass

Lsass

Lsass

WiRRE

Opprett en konto eller logg inn for å kommentere

Opprett konto

Logg inn

Hvem er aktive 0 medlemmer