[Bijdrager Lexis]

Koppelen van HTML Snippet aan Shadowbox

Hallo,

Ik wil graag een HTML snippet dat voor een mouse-over zorgt koppelen aan shadowbox.

Het script van de mouseover is als volgt:

<br />
<script type="text/javascript"> function mouseOver()<br />
{document.rollover_one.src ="http://www.ventummedia.nl/test/rollover/pmeroll.png"}<br />
function mouseOut()<br />
{document.rollover_one.src ="http://www.ventummedia.nl/test/rollover/pmee.png"}<br />
</script><br />
<a href="http://www.ventummedia.nl/test/files/pme.png" rel="shadowbox"><br />
<img alt="Link Title" src="http://www.ventummedia.nl/test/rollover/pmee.png" name="rollover_one" width="245" height="178" onmouseover="mouseOver()" onmouseout="mouseOut()" style="border: none;"/></a><br />
 

De referentie naar Shadowbox is:

rel="shadowbox[Group]"

Waar moet ik deze inplakken?
Je kunt zien hoe het nu is(en dus niet moet) op:
http://www.ventummedia.nl/test

Als je over de thumbnails heengaat komt er dus een mouseover effect (een zoomicoon), en als je erop klikt wil ik dat shadowbox start… Maar hoe?

Btw, het is in iWeb gemaakt…

Bedankt,

Lexis

[Bijdrager Dr. Maddox]

Ik zie nergens tussen de head tags een javascript staan. Wel de door iWeb geplaatste scripts maar nergens een van shadowbox…

[Bijdrager Lexis]

Ja goeie, die zal ik er weer even tussenzetten. Ik was even aan het klieren nog.

Instant update: Staat er nu weer bij.

[Bijdrager Dr. Maddox]

Die achtergrond afbeeldingen van 500kb kunnen echt niet Lex! Maak er een patroon van en zet er een herhaling achter. De site is nu al erg log en zwaar om te downloaden.

Laat het zoom effect achterwege en kies voor het shadowbox script zou ik zeggen. Dat inzoomen is leuk maar wel vervelend aangezien je voor elke slideover een volledige schermafbeelding nodig hebt.

[Bijdrager Lexis]

Welke achtergronden zijn 500kb? En met zoom-effect bedoel je de mouseover?
Ik zal de plaatjes iig verkleinen…

En het schijnt wel te kunnen en ik wil het wel…

[Bijdrager Dr. Maddox]

Ik bedoel de carbon achtergrond. Dat is nu een JPG van 420kb. JPG is niet geschikt voor dit soort gedetailleerde afbeeldingen. Daar wordt het onscherp en troebel van.

Hieronder exact dezelfde afbeelding maar dan in gif formaat. Ik heb een vast patroon genomen en de kleuren naar 13 teruggebracht in het gif palet. Het resultaat: Een bestand van 16kb met een vlijmscherp en zuiver resultaat.

[Bijdrager Lexis]

Ja, ik weet alleen niet meer waar ik die heb gebruikt. Ff zoeken.

[Bijdrager Dr. Maddox]

Graag gedaan…

Hier ook nog de andere versie maar dan scherper en niet transparant.

Winst: van 244kb naar 12kb (!!)

Je vind ze hier:
/test/Home_files/carbon1.jpg
/test/Home_files/shapeimage_25.png

[Bijdrager Lexis]

Ik heb het allemaal al met die ene gedaan, en wel transparant gemaakt.
Ff kijken wat nu de winst is.

[Bijdrager Lexis]

Lol, en toen was de hele layout naar de maan. Ik ga ff kijken wat er fout zit.
Nou, dat doe ik vanmiddag wel, ik moet nu naar de TU.

Als je misschien toch nog weet hoe en waar ik die rel=”shadowbox” er tussen moet gooien; graag!

[Bijdrager Lexis]

@Maddox
Ik heb de gehele website verkleind. Je kunt de verkleinde website bekijken op:
http://www.ventummedia.nl/test

Er zitten nog wat designfouten in, maar die haal ik er zo uit. Ik heb het geheel namelijk opnieuw opgebouwd met de files die ik van jou heb gekregen.

De site in z’n geheel is dan 516kb. Dat is wel prima toch?

[Bijdrager Lexis]

Nu blijft trouwens de vraag uit de openingspost van dit topic nog staan. Hoe krijg ik die twee stukken code aan elkaar gekoppeld…? Hoe laat ik ze samenwerken?

[Bijdrager Hailstorm]

Ventum Media bouwt websites en komt hier om simpele dingen vragen?

Dáár geef ik geen antwoorden op…

[Bijdrager Lexis]

T is maar een testsite Hail. Bovendien denk ik dat jij er toch geen antwoord op kunt geven. Dus als je dit soort praktijken even mee wilt nemen naar de koffietent. Ik probeer het hier serieus te houden omdat ik echt wil weten hoe het moet.

Danku.

[Bijdrager Lexis]

Wowie, ik had het net heel even werkend! Check die video!
Maar toen ik het effect op beide thumbnails toe wilde passen ging ie moeilijk doen. De rollover doet het niet meer…

Gelukkig hebben we het beeldmateriaal nog! (video wordt nog verwerkt)

[Bijdrager Dr. Maddox]

Goed werk Lex! De site is nu tenminste licht verteerbaar. Je kan goed merken dat er ruim 500kb minder aan afbeeldingen in zit. Dat zoom effect heb je (gelukkig) weggelaten. Goede keuze!

De ‘nieuw’ banners op de thumbnails mogen nog een tikkie naar rechts zodat ze een beetje ruimte kijgen. Zoals bij de pop-ups zeg maar. Daar komen ze trouwens erg mooi uit de verf! Netjes!

Edit:

Ik zie net dat je javascripts in je body hebt staan. Dat mag wel maar zorgt wel voor problemen in andre browsers toch? Vooral omdat het met de layout te maken heeft. Daar laat ik liever een ander over oordelen maar ik zou het even dubbelchecken op een Windows configuratie.

En er ontbreekt ergens een /> tag . Zie hier