Sökes: smart funktion för lat nybörjare

[nixy]

Har ganska lite erfarenhet av webdesign men försöker lära mig tillräckligt för att få den här grejen att funka: en websida för bildvisning där jag kan byta ut bildkataloger utan att behöva skriva in alla namn i html-koden. Tillsvidare skriver jag in dom där för att slimbox (javascriptet som visar bilderna) ska hitta dom.

Så här ser htmlkoden ut för tre bilder:

Kod: Markera allt

<p>
<a href="huvudkatalog/090621/skater1.jpg" rel="lightbox-090621" title="skater1.jpg"><img src="tumnagelkatalog/090621/skater1.jpg" width="70"/> </a>
<a href="huvudkatalog/090621/skater2.jpg" rel="lightbox-090621" title="skater2.jpg"><img src="tumnagelkatalog/090621/skater2.jpg" width="70"/> </a>
<a href="huvudkatalog/friends/beer.jpg" rel="lightbox-friends" title="beer.jpg"><img src="tumnagelkatalog/friends/beer.jpg" width="70"/> </a>
</p>

Men listan blir lång och omständig att uppdatera eftersom jag har många bilder i olika kataloger. Därför undrar jag om det är möjligt att få namnen att uppdateras automatiskt vartefter jag byter ut, tar bort, eller lägger till kataloger?

Till exempel genom att ersätta listan med en rad som kanske skulle kunna se ut så här:

Kod: Markera allt

<p>
<a href="huvudkatalog/f1/f2" rel="lightbox-f1" title="f1"><img src="tumnagelkatalog/f1/f2" width="70"/> </a>
</p>

..där katalognamn och bildnamn alltså har ersatts med funktionerna f1 och f2 som automatiskt scannar efter aktuella namn i huvudkatalogen, och, om möjligt, förser slimbox med dessa.

Eller bör jag använda ett databasprogram? Någon som har nåt bra förslag?

.

[Thomas]

partar vi om 50 bilder eller 5000? bilder?

är det frågan om mycket bilder så tror jag att du ska köra det i databas. för annars kommer din sida att ta en stund att ladda in, om du ska köra med javascript o så.

mellan om du kör med php så kan du köra en lopp som tar alla poster tex 1-20000 på en gång

du får gärna berätta mer om hur vad sidan ska va till??

[nixy]

Hej
Skulle tro att det blir max ett hundratal bilder. Har börjat lite försiktigt t.ex. här --> http://linuxuser.se/~kopare/sk8. När man klickar på tumnagelbilderna så öppnas dom stora versionerna med slimbox, vilket verkar funka snabbt och bra. Men tumnagelbilderna bör sorteras på något bra sätt vartefter antalet bilder förändras.

En funktion som listar kataloginnehåll kanske kan användas för två saker: dels för att slimbox ska kunna hitta rätt bilder, och dels för att sortera tumnagelbilderna på sidan. Till exempel så att varje förekomst av en bildkatalog visas på sidan som en klickbar ikon, och när man klickar på den öppnar slimbox den katalogens bilder.

[Thomas]

http://redskin.homeip.net/demo/ kanske är vad du söker efter. färdig kod med mera. ska även gå att köra emot databas om man vill det..annars så kör den emot text filer tycket jag lästa.

[nixy]

Tackar! ..då får man lära sig lite php också

[Thomas]

php är trevligt språk

[nixy]

Är som sagt ganska ny på det här, och ska läsa mer om php, men undrar en par saker om filernas relationer.

1. Ska html-filen och css-filen peka på php-filen, eller behövs endast php-filen?

2. Om nuvarande javascript hämtar bildernas filnamn från html-filen, så undrar jag om det är javaskriptet som ska ändras så att det istället hämtar filnamnen i php-filen?

[Thomas]

du ska bara behöva php filen.

du bör inte behöva nått javascript känns det som.

finns en bra bok att läsa http://butik.pagina.se/fb_produkt.asp?art=63608006
PHP 5 programmering heter boken. bör finnas på närmaste bibliotek om du inte känner för att köpa boken.

[palle-kuling]

Jag skrev ihop något du kan börja lite med. Kanske du får blodad tand?

Kod: Markera allt

<script type="text/javascript" src="js/mootools.js"></script>
<script type="text/javascript" src="js/slimbox.js"></script>


<p>du kan smyga in html utanför php taggarna</p>

<?php

// tumnagelkatalog och huvudkatalog antas ligga i samma katalog som php skriptet...

// full sökväg till skriptet, plus katalognamn
$basedir = getcwd()."/tumnagelkatalog/";

// funktion som ger tillbaka en "array" med filer/kataloger
function directory2array($path) {
	//om filen katalogen går att öppna
	if($handle = opendir($path)) {
		// gör, tills inget finns kvar att läsa
		while (false !== ($name = readdir($handle))) {
			// "." och ".." betyder "här" och "en katalog bakåt"
			// det vill vi inte ha med i våran "array"
			if ($name != "." && $name != "..") {
				// med detta sparar vi
				$array[] = $name;
			}
		}
		// "stänger" katalogen vi öppnade
		closedir($handle);
	}
	// ge resultatet till den som efterfrågade
	return $array;
}

// nu frågar vi om resultat, resultatet hamnar i $dirs "arrayen"
$dirs = directory2array($basedir);
// för varje katalog, spara namnet i $dirname variabeln
foreach($dirs as $dirname) {
	// smyg in lite html bara som ett test. stänger och öppnar php läge med ?> <!-- html läge --> <?php
	?> <p>här gör vi det i katalogen "<?php echo $dirname; ?>" nedan</p> <?php
	// spara alla bilder i $pics "arrayen"
	$pics = directory2array($basedir.$dirname);
	// för varje bild, spara bildnamnet i $picname
	foreach($pics as $picname) {
		// vi använder echo, med kunde öppnat och stängt php taggar där det behövdes också. men det kan vara bra att kunna båda.
		// "\" används för att kunna använda hartassar, innom hartassar. Det blir lite rörigt, men det funkar...
		echo "<a href=\"huvudkatalog/$dirname/$picname\" rel=\"lightbox-$dirname\" title=\"$picname\"><img src=\"tumnagelkatalog/$dirname/$picname\" width=\"70\" /></a>\n";
	}
		
}

?>

Skriptet ska ligga i samma katalog soom huvudkatalog och tumnagelkatalog. döp det galleri.php eller nåt.
Eller foga in det i befintlig html fil och döp om den med .php ändelse.
Du kan ha html ovan och under php koden. Igentligen vartsomhelst. Du förstår kanske när du tittar lite på min kod.
Ska du peta i koden, använd en editor med färgat syntax, så du inte får ont i huvet!

Lycka till

[nixy]

Tack så mycket! Säkert lätt för er som kan.... men jag får ont i huvudet även av färgat syntax Jag ser att du refererar till mootools och slimbox... Har hittills använt mig av jquery och slimbox2, men din skiss kanske funkar med dom också?

[palle-kuling]

Om jag ska vara ärlig, så fick jag för mig att det var mootools/slimbox du använde, men använde ditt syntax i länkarna som skapas. Det säkraste är nog att köra jquery/slimbox2, för det såg lite konstigt ut när jag testade
Du får titta på koden hur du vill, men personligen så ser jag "gröt" utan färgat syntax, medans jag ser funtioner/variabler/kommentarer väldigt tydligt med färgad syntax. Men alla är ju olika!
Om du plockar bort alla kommentarer jag gjort i koden, blier den mycket kortare, och det går ändå förmodligen förstå vad som försigår. Det blev lite rörigt med alla kommentarer, men dom förklarar ju vad koden gör...
Du kan ju plocka bort html som jag la till bara för att demonstrera också. Men i regel borde det funka "out of the box". Jag testade det som det ser ut på min webserver, och där funkade det fint.

Kan vi få ta oss en titt på resultatet när det är färdigt, kanske?

[nixy]

Oj oj oj dom där raderna med php verkar fixa just den funktionen som jag var ute efter. Klart man får blodad tand: bilderna radas upp snyggt och prydligt under respektive katalognamn, , och allt jag behöver göra är att lägga till, ta bort eller ändra kataloger. Den första raden med bilder öppnas som dom ska i slimbox, men när jag klickar på dom nya bilderna i andra raden startar slimbox men verkar inte hitta bilderna. Vad har jag missat? [EDIT: jag upptäckte att jag stavat ena katalognamnet fel, men nu funkar det!]

Får se vad det blir för utformning på sidan när jag får mer tid. Den enkla funktionaliteten tycker jag är en stor framgång. Kul att se vad det går att åstadkomma med några rader kod. Tack för hjälpen!

[palle-kuling]

"Men vänta, det finns mer...!" som dom skulle sagt i tvshop! haha.
Jag modifierade skriptet lite för "on-the-fly-resizing" med phpthumb. Nu slipper du skapa tumnaglar, för det görs automatiskt, och du kan även begränsa storleken på fullsize bildera med w= variabeln!

Ändra;

Kod: Markera allt

$basedir = getcwd()."/tumnagelkatalog/";

Till:

Kod: Markera allt

$basedir = getcwd()."/galleri/";

Och ändra;

Kod: Markera allt

echo "<a href=\"huvudkatalog/$dirname/$picname\" rel=\"lightbox-$dirname\" title=\"$picname\"><img src=\"tumnagelkatalog/$dirname/$picname\" width=\"70\" /></a>\n";

till

Kod: Markera allt

echo "<a href=\"phpThumb_1.7.9/phpThumb.php?src=../galleri/$dirname/$picname&w=1024\" rel=\"lightbox-$dirname\" title=\"$picname\"><img src=\"phpThumb_1.7.9/phpThumb.php?src=../galleri/$dirname/$picname&w=128\" /></a>\n";

Döp om huvudkatalog till galleri

Ladda ner phpthumb; http://sourceforge.net/project/download ... a=64555413
packa upp den, och döp om filen phpThumb.config.php.default till phpThumb.config.php
och lägg den roten i din hemsida (katalogen bör heta phpThumb_1.7.9, med stort T i mitten, gör den inte det så byt namn på den)

Hoppas det går bra!

EDIT: phpthumb kan vara lite bökigt att få till på "riktiga webservrar", för dom har så tajta säkerhetsfunktioner i plats, men det bör funka, iaf om man trixar lite. På min egen server hemma funkar det help perfekt utan modifieringar dock...

[nixy]

tack för tipset. Har hämtat phpThumb, kollat lite på parametrarna, men inte provat ännu. Verkar användbart för sidan med skatebilder, men sen har jag en annan sida där vissa tumnagelbilder inte ska vara nerskalade kopior av originalet (t.e.x en engelsk flagga som länkar till en text). Tyckte mig läsa nånstans att det ska vara möjligt att visa en htmlsida i slimbox, men jag fick det inte att funka när jag prova, och nu hittar jag inte sidan, men på slimbox websida står det uttryckligen att programmet är gjort för bildvisning, så det jag tyckte mig läsa kanske var fel... Hoppas hinna experimentera lite mer nu i helgen.


EDIT
jag namnger varje katalog med datum (t.ex. "090627...") så man snabbt ser när bilderna är tagna, men php verkar inte sortera dom på sidan i namnordning utan varje nytillagd katalog hamnar underst oavsett namn. När antalet kataloger överstiger vad som får plats vertikalt i fönstret kommer man inte kunna se nytillagda bilder eftersom man då måste scrolla vertikalt för att se dom. Försöker förstå hur man i php ska få in en sorteringsfunktion... t.ex:

• 090617...
  090605...
  090501...

(eller åtminstånde så att den senast tillagda katalogen hamnar högst upp.. men helst i namnordning). Hur ska man göra?

[palle-kuling]

Verkar användbart för sidan med skatebilder, men sen har jag en annan sida där vissa tumnagelbilder inte ska vara nerskalade kopior av originalet (t.e.x en engelsk flagga som länkar till en text).

Iof är ju en tumnagelbild per defenition inte en "liten bild" (som en flagga), utan en liten bild som har ett direkt förhållande till samma, men större, bild på sidan. Men det finns andra fördelar med "phpthumb" (namnet är missvisande, det skapar igentligen inte tumnaglar, utan det skalar upp/ner storleken på en bild - om det ska vara en tumnagel eller inte, det är ju upp till användaren) som att t.ex. begränsa storleken på bilder (som i sin orginalstorlek kanske är för breda för att passa in på sidor gjorda för en viss upplösning etc).

Försöker förstå hur man i php ska få in en sorteringsfunktion...

Enklare än du tror!
En sak du verkligen ska ha som din bibel, om du funderar på att pyssla med php, är ju "referens manualen"; http://us3.php.net/manual/en/index.php
Det tar innan man vet var man ska leta, men när man lärt sig lite "php speak" eller programmerings "lingo", så är det enklare...
Men, du bör ju kanske läsa igenom en guide eller tutorial om du vill lära dig på riktigt.

Här är funktionen som gör det enkelt för dig; http://us3.php.net/manual/en/function.sort.php

Så i ditt fall så bör du ändra (eller lägga till rättare sagt);

Kod: Markera allt

	// ge resultatet till den som efterfrågade
	return $array;

till

Kod: Markera allt

	// ge resultatet till den som efterfrågade
	sort($array); // <----------------------HÄR!
	return $array;

[nixy]

Tack för länken! För en omvänd sortering verkar det vara så att man ska lägga till "ar" framför "sort":

Kod: Markera allt

arsort($array);

Då hamnar katalogen med senaste datum eller namn högst upp -> http://www.linuxuser.se/~kopare/sk8. Jag behöver fixa layouten också.. sidan kommer ju domineras av alla tumnagelbilder såvida man inte binder samman grupperna på något sätt...grafiskt eller kanske med någon ny funktion. Bör även se till så att bildernas storlek inte överskrider webläsarfönstrets storlek så man slipper skrolla; skulle tro det går att fixa med någon inställning i slimbox.

[palle-kuling]

Kul att du fick till det!

Bör även se till så att bildernas storlek inte överskrider webläsarfönstrets storlek så man slipper skrolla; skulle tro det går att fixa med någon inställning i slimbox.

Men du, med phpthumb, så fixas inte bara tumnaglar automatiskt från orginalbilderna, du kan ju även skala ner den länkade orginalbilden. Jag vet, "i sound like a broken record"...
Det jag gjorde i koden med phpthumb, var inte bara att skala ner bilden till tumnaglen till 128 pixlar bredd (w=128), utan också orginalbilden (här nedan) i 1024 pixlar som max (w=1024).
Du kan ju sätta en maxgräns på höjden istället, om det skulle vara nödvändigt. typ h=1024 elle liknande.

"<a href=\"phpThumb_1.7.9/phpThumb.php?src=../galleri/$dirname/$picname&w=1024\"

Fördelen med att skala i phpthumb (eller på "riktigt", om man säger så) är att falsk skalning ser riktigt dåligt ut (när man bara tvingar bilden till en storlek utan skalning, genom att bara sätta en width= i html eller slimbox). Men du gör ju som du vill! Jag vill bara ge dig lite tips

[nixy]

Om $picname&w=128 styr storleken på tumnageln, så undrar jag om man i samma rad kan styra border-width=0?

Innan du ändrade echo-raden pga phpThumb försökte jag lägga till border-width med liknande syntax som för width men har nog inte fattat syntax ännu ... ..<img src=\"tumnagelkatalog/$dirname/$picname\" width=\"70\"; " border-width=\"0\" /></a>\n"; (mitt tillägg i fet stil).

Försöker alltså bli av med ramen runt alla tumnagelbilder...

[palle-kuling]

Det är kolonet du la till som är problemet! (Nästan) alla rader slutar med kolon i php, så det blir ju som avklippt där efter witdth=70...

[nixy]

Aha, ok, misstänkte det, men räcker det alltså med ett mellanslag? --> ..$picname\" width=\"70\" " border-width=\"0\" /></a>\n";

En annan sak jag undrar är när jag testar phpThumb som skapar egna tumnagelbilder antar jag att jag kan ta bort den gamla tumnagelkatalogen. Men när jag gör det visas följande felmeddelanden:

Warning: opendir(/home/kopare/public_html/sk8/galleri/) [function.opendir]: failed to open dir: No such file or directory in /home/kopare/public_html/sk8/index.php on line 52

Warning: arsort() expects parameter 1 to be array, null given in /home/kopare/public_html/sk8/index.php on line 65

Warning: Invalid argument supplied for foreach() in /home/kopare/public_html/sk8/index.php on line 72

(..och om jag låter gamla tumnagelkatalogen vara kvar omdöpt till "galleri" skapar phpThumb enfärgade tumnaglar med något meddelande om att jag ska kolla dokumentationen om hur man använder programmet).

Använder förnärvarande följande echo:

Kod: Markera allt

     echo "<a href=\"phpThumb_1.7.9/phpThumb.php?src=../galleri/$dirname/$picname&w=700\" rel=\"lightbox-$dirname\" title=\"$picname\"><img src=\"phpThumb_1.7.9/phpThumb.php?src=../galleri/$dirname/$picname&w=40\" /></a>\n";