Keskustelu: Nettisivujen teko: Kuvien avaaminen oikein (pysty/vaaka)

Nyt tarvitsisin hieman apua, kun ei tunnu järkevää ratkaisua omin avuin asiaan löytyvän.

Ongelmana siis kuvien avaaminen oikein päin kuvagalleriassa.

vaakakuva = width: 500px; height: 375px;

pystykuva = width: 375px; height: 500px;

Aluksi lähdin toteuttamaan tätä JavaScriptillä muuttamalla suoraan kuvan css width ja height arvoja seuraavaan malliin:

document.images["kuvagalleria_iso_kuva"].src = "images/Kuvagalleria/" + pictures[j];

var newImg = new Image();
newImg.src = document.images["kuvagalleria_iso_kuva"].src;
var imgHeight = newImg.height;
var imgWidth = newImg.width;

if (imgWidth > imgHeight)
{
			document.getElementById("kuvagalleria_iso_kuva").style["width"] = "500px";
			document.getElementById("kuvagalleria_iso_kuva").style["height"] = "375px";
}
else
{
			document.getElementById("kuvagalleria_iso_kuva").style["height"] = "500px";
			document.getElementById("kuvagalleria_iso_kuva").style["width"] = "375px";
}

Edellä olevassa toteutusmallissa ongelmana on se, että scripti ei ilmeisesti tunnista kuvan leveys ja korkeus arvoja ensimmäisellä klikkaus kerralla. Scripti toimii oikein vasta toisen kerran kuvan thumbnailia klikattua.

Seuraavaksi lähdin toteuttamaan tätä AJAX:lla. Eli kuvan leveys/korkeus -vertailu tapahtuu serveripuolella PHP:llä ja kuvan ympärillä oleva div-elementin sisältö kirjoitetaan uudelleen. Tämä ratkaisumalli toimii kyllä muutoin toivotulla tavalla, mutta ongelmaksi nyt tulee se, että kuva ladataan näin joka kerta palvelimelta selaimelle, eikä käytetä selaimen välimuistia. Eli tämä tuntuu turhan raskaalta ja hitaalta.

Olisiko tuohon ensimmäiseen JavaScript toteutukseen kehitysehdotuksia kuinka saisi toimimaan jo ensimmäisellä klikkauksella. Tai mitä tahansa ehdotuksia.

- Weza

Kuvan mittojahan javascript ei tiedä, ennen kuin kuva on ladattu.

Itse suosittelisin myös tähän valmista kikkaretta:
http://fancybox.net/