Nu ska jag banne mig lära mig javascript, så jag behöver allting förklarat för mig, steg för steg.
Det är så att jag har ett bildarkiv med thumbnails, och man ska kunna klicka på dessa bilder för att få upp orginalstorleken i ett nytt fönster, som är anpassat till bildens storlek.
Har börjat lite smått
Det första argumentet anger fönstrets bredd och det andra argumentet dess höjd. Med document.images[0] hämtar vi en referens till dokumentets första bildobjekt (det skriver ut på raden under denna). Bredd och höjd får vi med .width respektive .height.
Nu, på dessa värden är det inte omöjligt att du får addera något tal för att få det som du vill. Sedan har ju de olika webbläsarna benägenheten att rendera saker och ting annorlunda ändå
Om fönstrets dimensioner går att ändra på användarnivå kanske du också vill använda body.onresize.
Jag kan passa på att tipsa om Jojoxx popupskript. De tar hänsyn till både det ena och det andra. Vill du ha dem förklarade är det bara att posta något här.
Det känns som jag förstår vad koden gör, bara det att jag måste öva en jäkla massa för att lära mig de olika syntax:erna utantill.
Det verkar dock som att den ovanstående koden vill att man måste acceptera popups för just den sidan, vilket inte något av de andra scripten Jojoxx har gjort gör.
Vad är det som skiljer detta från de andra?
Har stirrat mig blind nu, men jag ser ingen markant skillnad, förutom att sidan laddas med "loader". Är det det som strular till att?
Problemet verkar ligga i att popupen genereras genom bildens onloadattribut (vilket kan jämföras med t.ex. window.onload i vilken popups också blockeras). Det lustiga med koden är att popupen bara blockeras varannan gång för mig i Firefox.
Du kanske får ta en annan av Johans varianter - en utan förladdningsfönster.
Använder en annan variant nu, men det vore toppen om man öppnade ett fönster, som anpassade sig till bildens storlek, men ändå var ett dokument som jag själv har döpt och kan ändra i.
Typ som WebTor har på http://www.tor.nu/
Beroende på hur du visar dina bilder kan det göras på några olika sätt.
// huvudfönstret med tumnaglarna
// php har väl några trevliga funktioner för att ta reda på bilders dimensioner?
<a href="image.php?img=[b]bildnamn[/b]&width=[b]bredd[/b]&height=[b]height[/b]" onclick="return openWin(this.href)">
function openWin(url){
window.open(url, "imgPopup", "height=100,width=100");
return false;
}
// i image.php använder du sedan querystring-variablerna så här
// nb. att sätta GET-värdena direkt i openWin() går ju också
<head>
<script type="text/javascript">
window.resizeTo($_GET['width'], $_GET['height']);
</script>
</head>
Du kan som sagt behöva addera något mysigt tal till GET-värdena.
Beroende på hur du visar dina bilder kan det göras på några olika sätt.
// huvudfönstret med tumnaglarna
// php har väl några trevliga funktioner för att ta reda på bilders dimensioner?
<a href="image.php?img=[b]bildnamn[/b]&width=[b]bredd[/b]&height=[b]height[/b]" onclick="return openWin(this.href)">
function openWin(url){
window.open(url, "imgPopup", "height=100,width=100");
return false;
}
// i image.php använder du sedan querystring-variablerna så här
// nb. att sätta GET-värdena direkt i openWin() går ju också
<head>
<script type="text/javascript">
window.resizeTo($_GET['width'], $_GET['height']);
</script>
</head>
Du kan som sagt behöva addera något mysigt tal till GET-värdena.
Tack Peter!
Jo, i php kan man skriva getimagesize() för att ta fram storleken och lite annat på bilden, så det fixar sig nog.
En annan fråga, som jag lika gärna kan ställa här istället för att skapa en ny tråd.
Danny tipsade mig här om hur det skulle kunna se ut på sidan.
Saken är ju den att varje gång jag väljer en ny bild i vänsterkanten så laddas sidan om. Detta skulle jag kanske kunna lösa genom att lägga det i en frame eller dyl, men jag tycker inte det är en snygg lösning.
Så, kan jag lösa det med javascript på något vis? Att varje gång jag markerar en bild i vänsterkanten så uppdateras bildens src="" värden automatiskt i mitten?
Hm, nu tar den ju med rubbet som står i src="", även size=90, vilket gör att bilden till vänster blir 90 pixlar bred. Måste jag lösa det med något reguljärt uttryck för att endast ta med 'images/photo/1.jpg'?
Du är en klippa Peter!
Men nu får jag inte riktigt koll på hur jag ska bygga upp det, antagligen är det bara huvet som inte riktigt hänger med såhär på fredagskvällen.
Hur hade du byggt upp det?
Om vi säger att jag skulle vilja ha size=230 på högersidan, och size=90 på vänstersidan, hur gör jag då?
/red Hm, detta håller ju inte riktigt.
Eftersom adressen inte ändras i html-koden ändras inte heller länken till popupen som ska visa bilden i sin fulla storlek.
Sorry Peter, men det är faktiskt jag som har fått hjärnsläpp!
Hur hade du löst det?
Hm, jag hann inte med redigeringen. Jag tror på idén att endast ha en variant av tumnaglar på sidan (antingen till vänster eller centralt). Funktionaliteten skulle jag sedan hämta från inlägg #6.
Det blir nog för mycket pillande med JavaScript för att det skall vara värt mödan annars.
