[javascript]Resizen plaatjes zoals GoT

[Roa]

Ja, 100den aldan niet meer topics over dit onderwerp zijn er al. Dat weet ik. Maar toch kom ik niet verder.

Op dit moment gebruikt ik voor mijn forum een iframe waarin het plaatje geladen wordt en op die manier de layout niet verkloot. Ik ben hier echter ver van tevreden over en ik wil dit anders doen. Aangezien het op op GoT erg mooi in elkaar zit, heb ik hier eens onder de motorkap gekeken, maar mijn begrip van javascript was helaas niet genoeg om zelf een werkend iets te krijgen.

Verder is er natuurlijk ook nog het script van Crisp, wat wel goed werkt (alhoewel het voorkomt dat in een topic met meerdere plaatjes soms op onverklaarbare wijze een plaatje niet geresized wordt) maar toch niet helemaal naar wens is omdat het script wordt aangeroepen met een onload in de img tag, waardoor het plaatje eerst geladen moet zijn voor er geresized wordt, iets dat bij slome picservers geen pretje is.

Nu las ik in dit topic dat de browser de groote van het plaatje al binnenkrijgt voor het plaatje geladen is. Hier moet dus iets mee te doen zijn, maar ik zelf heb geen idee hoe ik dat moet impliceren.

Kortom, ik ben het spoor gewoon echt bijster en hoop dat u mij weer op het goede spoor kan zetten! Hoe is dit nu eigenlijk in GoT toegepast?

Ojah, en natuurlijk een prettige kerst!

[crisp]

uit de js-file heb je de volgende functies nodig:

user_images, user_images_ie, scaleImage en openImage

verder wordt er bovenin het bestand nog een var incompetent_browser geset; die heb je ook nodig.
Om de code te triggeren moet je in je HTML ergens onderin de functie user_images() aanroepen. De code resized alle images die een class 'rml', 'rmlleft', of 'rmlright' hebben. Verder wordt de max breedte berekent aan de hand van de breedte van de parent waarin de images zitten; dat is of een div met class="content" of (voor quotes) een div met class=""message-quote-div". eea is dus behoorlijk geintegreerd met de markup, en dat zal je dus moeten aanpassen aan je eigen markup.

De code is (uiteraard) copyrighted (by me ), maar je mag het gebruiken mits je een copyright en bronvermelding opneemt.

[Roa]

Echt onwijs bedankt. Het script werkt na een uur aanpassen en tweaken echt perfect! Ik heb een fixed width erin gezet (hij kwam met een object vereist fout die waarschijnlijk te maken heeft met het feit dat ik tabellen gebruik in plaats van divs ) en ik heb een kleine wijziging aangepast om zo avatars de max 60 te geven en plaatjes in posts 550. Om de één of andere vage reden verliest de avatar de border na de resize, terwijl een forum plaatje dat niet doet. Dit heb ik afgevangen door een extra class 'icon_resized' in m'n stylesheet te zetten, maar misschien heb je daar een verklaring voor.

In ieder geval echt ontzettend bedankt! En je wensen worden natuurlijk gehonoreerd:

code:

// Script voor het resizen van de plaatjes op het forum
//  Met veel dank aan Crisp van Gathering of Tweakers (http://gathering.tweakers.net)
// © Crisp 2004

[toevoeging]
Goed, ik heb besloten m'n hele forum maar eens opnieuw te gaan maken (html-wise), dus de huidige versie is dit script nog niet toegepast. Ik ben nu even aan het kijken, maar om de één of andere rede werkt het niet in IE6, hij haalt telkens maar 30 van de grote af, en ik snap niet waarom. In Firefox werkt het perfect. Het plaatje staat in een div en de div heeft een width meegekregen vanuit css.

Verder lijkt het ook nog zo te zijn dat het plaatje eerst geladen moet worden en dan pas geresized wordt, terwijl dat op GoT niet lijkt te gebeuren (bij hetzelfde plaatje). Ik ga nog even verder knutselen, helaas kan ik nu niet slapen voordat ik dit enigsinds doorheb, funny how the mind works

[ Voor 41% gewijzigd door Roa op 26-12-2004 02:49 ]