Door
Roy -
op 14-01-2012 16:43
gewijzigd op 20-01-2012 22:08
3.796 views
Beste forum leden!
Wie kan mij helpen aan een image rotator met de volgende eisen:
- Paar leuke overgangen
- Over de volledige pagina te gebruiken (width: 100% en height: 100%)
- Afbeeldingen volledig weergegeven (met de afbeeldingen in de rotator een soort van max-width en max-height)
Lijkt simpel maar heb al een gigantisch speurtocht achter de rug. Hopende dat hier iemand mij kan helpen. Alles wat ik heb gevonden en geprobeerd snijden de afbeeldingen bij zodat deze in de rotator passen.
Uiteindelijk zelf wezen knutselen met als resultaat dat het niet werkt in oudere browsers (bijv. IE8 en lager):
Lijkt simpel? Is ook simpel volgens mij. Ik neem aan dat je javascript gebruikt. Wat je eerst doet is kijken hoe groot je viewport is, het venster. Als je die gegevens hebt weet je a) de orientatie en b) hoe groot je bepaalde afbeeldingen kunt schalen.
Nu moet je voor elke afbeelding die geselecteerd wordt kijken wat groter is, de X of de Y as. Als de Y as groter is, moet de afbeelding dus op de Y as geschaald worden. Als je dat percentage hebt, ( stel je ratio is 1.2) dan kun je nu ook de X offset bepalen, oftewel je ratio toepassen. Stel je hebt een viewport van 600 pixels hoog, je afbeelding is verticaal georienteerd en dus 800 pixels hoog, moet dit geschaald worden naar beneden. m.a.w. 600 ( viewport ) delen door je afbeeldingshoogte ( 800px )
6/8 levert 0.75 op. Dan weet je dat je de breedte van je afbeelding ook * .75 moet doen. Dit is natuurlijk niet alles want je moet ook kijken wat de breedte is van je X as, stel je viewport wordt verkleind ( of is verkleind ) en je hebt een X breedte van slechts 400 pixels, dan kun je daar ook rekening mee houden, oftewel hetzelfde sommetje, alleen dan voor de X.
Het enige wat je hoeft te doen is vervolgens je <img> tag de width en height mee geven. In javascript heb je ook functies en handlers die getriggerd worden als je venster verkleind wordt, uit m`n hoofd document.viewport of iets dergelijks, dus kun je het ook "on-the-fly" doen.
Verder kun je het beste ook eens kijken naar jQuery voor mooie transitie effecten. Daarnaast is het erg makkelijk om een slider te maken in jQuery en kun je gemakkelijk en snel bijv. je <img> tags aanpassen. Hoop dat het helpt.
Zelf maak ik gebruik van http://medienfreunde.com/lab/innerfade/, makkelijk en licht :) Zelf heb ik er nog functies bij geschreven voor knoppen om te kunnen navigeren tussen afbeeldingen. Helaas kan ik die functies niet openbaar maken :)
Heb weer diversen image rotators geprobeerd maar geen doen wat ik wil dat ze doen.
Zodoende doorgegaan met de code waar ik mee bezig was met een aardig resultaat, lijkt hier nu goed te gaan. Daar ook? Is de vraag.
Ik hoor graag eventuele aan of opmerkingen.
Edit: Zie nu dat na een aantal afbeeldingen deze niet meer tevoorschijn komen in IE9? Van die mooie rode kruisjes..? Weet dat er een aantal afbeeldingen tussen zitten die het niet doen, maar als ik de afbeelding link kopieer doet deze het wel "los in de browser". Ik hoor graag!
?
Onbekende gebruiker
18-01-2012 20:26
Het blijft een rotator wat met verschillende plugins gedaan kan worden.
Ik raadt je wel aan om je plaatjes iets kleiner te maken, website loopt traag en hakkelt erg veel.
Wel in mijn FF dan in ieder geval.
@Hertog Jan; Maakt toch niet uit als je je knoppen openbaar maakt, of ben je niet van de open source en houdt je alles voor jezelf?
Als ik het zeg, gierig. Met knoppen voor de plugin valt toch geen geld te verdienen.
Dank voor je reactie! Wat is aan te raden als maximale afbeelding grote?
?
Onbekende gebruiker
18-01-2012 21:07
Roy D op 18/01/2012 20:49:14
Dank voor je reactie! Wat is aan te raden als maximale afbeelding grote?
Ligt eraan wat voor breedte je website is.
Ik zou als max 1024x768 aanhouden. Als je dan down scaled naar bijvoorbeeld 900x .. dan kan een browser het nog wel bijbenen.
Inmiddels weer wat verder maar ook weer niet.. Lijkt nu te werken in IE6/7/8 maar krijg de foutmelding: "Uncaught RangeError: Maximum call stack size exceeded". Kom hierover van alles tegen maar zie zelf de fouten niet.
Heb nu "gewone" javascript functies met daarin jQuery en ook andersom. Zit zo te rommelen dat ik door de bomen het bos niet meer zie.
Wie wilt er een kijkje nemen in de source: http://tiny.cc/pbg0d en mij de juiste richting op duwen?
