|
Din uppgift
Extra uppgift
2.6 Skapa en "slideshow"
[ Utskriftsversion av dessa uppgifter ]
För denna uppgift behöver du några stycken bilder av
samma storlek. På grund av licensproblem med gif-filer så
stöds inte dessa i nyare php versioner, så se gärna
till att bilderna är av typen jpeg eller png. (Om
du vill veta varför - klicka här). För de saker vi
skall göra i denna övning duger dock gif bra.
[ Klicka här för att ladda ner de bilder
jag kommer att använda i mitt exempel - fem blder i ett zip arkiv
]
Skapa en katalog för bilderna
Skapa en katalog med namnet pictures, som du sätter under
din php katalog. Se till att där finns etta antal bilder
(använd mina exempelbilder om du inte hittar några lämpliga).
För att förbereda oss för kommande kod kan det vara bra
att se till att denna katalog har read och writerättigheter
(=777).
Först måste vi kunna lista alla filer
I sin enklaste form kan vi göra ett program som helt enkelt tar
alla bilder i katalogen och visar dessa. Vi skall senare bygga ut detta
program med mer funktionalitet, men för att komma i gång
nöjer vi oss med att kunna visa bildfilernas namn. getimagesize
funktionen används för att få info om builder och fungerar
bara med bildfiler. Detta använder vi för att kontrollera
om det var en bildfil. (Senare kommer vi att ha ännu mer nutta
av funktionen)
<?php
# öppna kalatlogen som finns under vår programkatalog
$pictureDir = opendir("./pictures");
# loopa genom kalatlogen
while ($filNamn = readdir ( $pictureDir ) )
{
# visar bara namnen
echo $filNamn;
echo "<br />\r\n";
}
# stäng katalogen
closedir( $pictureDir );
?>
Listning 2.6.1 - samples/s_slide1.php
winter.jpg
blue.jpg
clock.jpg
i misstag kom det en textfil hit.txt
..
WS_FTP.LOG
sun.jpg
water.jpg
_notes
_vti_cnf
.
Resultat av listning 2.6.1
Förbättrad version
Ovastående kod visar alla filer i katalogen men även .
och .. Dessutom visas eventuella andra filer i katalogen. Detta
måste vi åtgärda genom att kontrollera om det faktiskt
är en bildfil som det är frågan om.
<?php
$pictureDir = opendir("pictures");
# loopa genom den
while ($filNamn = readdir ( $pictureDir ) )
{
# kontrollera att det är en bildfil
# vi skulle kunna kolla med is_file + kontroll av
# filtypen men istället använder vi
# getimagesize som fungerar endast för jpeg, png och gif
# För att indvika felmeddelanden om det inte är en bildfil så
# sätter vi @ före funktionen -> bortkopplad felhantering
if ( $bildinfo = @getimagesize( "./pictures/" . $filNamn ) )
{
echo $filNamn;
echo "<br />\r\n";
}
}
closedir( $pictureDir );
?>
Listning 2.6.2 - samples/s_slide2.php
winter.jpg
blue.jpg
clock.jpg
sun.jpg
water.jpg
Resultat av listning 2.6.2
Visa bilderna
Nu när vi vet vilka bilder vi har kan vi sätta in kod för
att visa dessa. Nedan
<?php
$pictureDir = opendir("pictures");
# loopa genom den
while ($filNamn = readdir ( $pictureDir ) )
{
if ( $bildinfo = @getimagesize( "./pictures/" . $filNamn ) )
{
# se till att katalogen sätts med i src attributet
# och se till att en korrekt html img tag plockas ihop
echo "<img src=\"./pictures/" .
$filNamn .
"\">";
echo "<br />\r\n";
}
}
closedir( $pictureDir );
?>
Sätt in bildens storlek i taggen
Man skall alltid sätta width och height för img taggen, eftersom
detta gör det lättare för browsern att optimera sidvisningen.
PHP har beaktat detta genom att ha en speciell getimagesize
funktion som kan göra detta åt oss. Vi har redan använt
den för att kontrollera om det var en bildfil - nu skall vi även
använda dess returvärde.
<?php
$pictureDir = opendir("pictures");
while ($filNamn = readdir ( $pictureDir ) )
{
if ( $bildinfo = @getimagesize( "./pictures/" . $filNamn ) )
{
# getimagesize returnerar en array som innehåller följande
# 0 - bredd i pixel
# 1 - höjd i pixel
# 2 - typ (gif=1, jpeg=2 och png=3)
# 3 - färdigt preparerad width="xx" och height="xx"
# som vi kan använda direkt i img taggen
# "bits" - "Bits per sample" för jpeg bilder
# "channels" - "Samples per pixels" för jpeg
echo "<img src=\"./pictures/" .
$filNamn .
"\" " .
$bildinfo[3] .
">";
echo "<br />\r\n";
# för att visa lite vad getimagesize ger så visar jag dess här
foreach( $bildinfo as $vad=>$värde)
{
echo $vad . " = " . $värde . "<br>\r\n";
}
}
}
closedir( $pictureDir );
?>
Visa en bild åt gången
Idén bakom en slideshow är följande:
- Sätt ut den första bilden
- Sätt länkar till de ävriga bilderna
- Sätt vid behov "föregående" och "nästa"
länkar
- När vi klickar på någon av dessa länkar skall
sidan laddas om, men med en ny bild.
För att implementera detta behöver vi göra följande:
- Använd url-parametrar. I vårt fall skall vi sätta
?vilken=bildnummer till adressraden. t.ex. ?vilken=2 för
att visa en viss bild. Vi måste komma ihåg att i datavärden
är första=0, andra=2, tredje=2 o.s.v
- Kontrollera i programmet om ?vilken= finns i adressen.
Om det finns använder vi detta nummer, och om inte så skall
vi visa den första bilden.
- Räkna ut vilket nummer föregående och nästa
bild har.
- Vi bör även beakta att det kan sättas ett bildnummer
i adressen som inte finns, t.ex. att vi vill se den femte bilden av
fyra.
Nedan finns kod som beaktar detta:
<?php
$pictureDir = opendir("pictures");
# ny kod
while ($filNamn = readdir ( $pictureDir ) )
{
# läser in filnamnen i en array istället
# så vi kan manipulera dem senare
if ( $bildinfo = @getimagesize( "./pictures/" . $filNamn ) )
{
$bildarray[] = $filNamn;
}
}
closedir( $pictureDir );
# kontrollera om det fanns ?vilken= i adressens url
if ( ! isset ( $_REQUEST[ "vilken" ] ) )
{
# om inte skall vi börja med att visa den första bilden (=0)
$vilkenbild = 0;
}
else
{
# i annat fall skall vi visa en annan bild
# om text url var ?vilken=2 skall den tredje bilden visas
$vilkenbild = $_REQUEST[ "vilken" ];
}
# preparerar färdigt föregående och nästa bilds nummer
$förrabilden = $vilkenbild - 1;
$nästabild = $vilkenbild + 1;
# lite felhantering:
# om det står ?vilken=999 i url men vi bar har 3 bilder
# så visar vi den första bilden istället
if ( $vilkenbild >= count( $bildarray ) )
$vilkenbild = 0 ;
# om vi inte är på första bilden
if ( $vilkenbild > 0)
{
# så kan vi sätta en länk till den föregående bilden
echo " <a href=\"?vilken=" .
$förrabilden . "\"><<</a>\r\n";
}
else
{
# i annat fall lämnar vi bara lite plats
# med några mellanslag
echo " ";
}
# loopa genom arrayen
for( $i = 0; $i < count( $bildarray ) ; $i++)
{
# vi vill visa 1, 2, 3, osv och inte 0,1,2 som
# är de nummer som egentligen används för
# indexering i arrayen
$visatnummer = $i+1;
# om den nuvarande loopens nummer är
# samma som nuvarande bilds nummer
if ( $vilkenbild == $i )
{
# så sätter vi bara ut numret men inte som länk
echo " <b>" . $visatnummer . "</b>\r\n";
}
else
{
# i annat fall sätter vi en länk till bild nr. $i
echo " <a href=\"?vilken=" . $i . "\">" .
$visatnummer . "</a>\r\n";
}
}
# kontrollera om vi visar sista bilden
if ( $vilkenbild < count( $bildarray ) - 1 )
{
# och sätt ut en länk till nästa bild
# om vi inte redan visar sista bilden
echo " <a href=\"?vilken=" .
$nästabild . "\">>></a>\r\n";
}
echo "<br>\r\n";
# nya koden slut
# nedan är den kod som fanns i föregående exemplet
# loopa genom den
while ($filNamn = readdir ( $pictureDir ) )
{
if( $bildinfo = @getimagesize( "./pictures/" .
$filNamn $bildarray[ $vilkenbild ]) )
{
echo "<img src=\"./pictures/" .
$filNamn
$bildarray[ $vilkenbild ] .
"\" " .
$bildinfo[3] .
">";
echo "<br />\r\n";
}
}
closedir( $pictureDir );
?>
|
Uppgifter
Uppgift 5 
