Vilken teknik används?

Hej. Jag är ny här på forumet så detta ämne kanske har varit uppe tidigare men jag ställer frågan ändå.

Ofta på e-handelssiter så kan man klicka upp en produktbild i större format.
Det blir liksom en ruta med bilden i som ligger framför resten av sidan.

Ofta tonas också också färgen ned på sidan bakom.

Görs detta enbart med typ en div-tagg med absolut positionering för produktbilden i förgrunden och färgnedtoningen genom att manipulera css-värdena med DOM och Javascript?

Eller finns det bättre tekniker? Jag vill själv göra en sådan funktion men är lite rådvill om vilken väg som är bäst att gå.

Jag vill inte ladda ner något färdigt script. Vill göra det själv så att man lär sig något på vägen också. :stud

Kan det vara fancybox du menar: http://fancybox.net/ ?

Lite tips:
position: fixed; kan vara till nytta för att positionera divar så att de inte påverkas av scrollning.
background-color + opacity på en heltäckande div kan användas för att skapa nertoningen.
max-width + max-height med procentuella värden kan eventuellt användas för att ange hur stor del själva bilden ska ta av fönsterytan.

voigtann1 skrev:

Kan det vara fancybox du menar: http://fancybox.net/ ?

Ja, den är ju snygg, men ofta tycker jag att det är lite segt på siter som använder denna lösning. Kanske beror lite på hur man implemterar den och vilka effekter man använder.

Tänkte mest att jag skulle göra en egen. Utan mjuka toningar, animeringar, droppskuggor och annat krimskrams som iofs är snyggt men även kan bli irriterande. Jag gilla snabba siter. När man klickar ska saker hända direkt helst. Det är illa nog att man ibland måste ladda om sidor osv.

Men om det bara handlar om att synliggöra en div och tona ner bakgrunden med lite css/DOM så torde det ju gå rätt så kvickt.

voigtann1 skrev:

Kan det vara fancybox du menar: http://fancybox.net/ ?

nitro2k01 skrev:

Lite tips:
position: fixed; kan vara till nytta för att positionera divar så att de inte påverkas av scrollning.
background-color + opacity på en heltäckande div kan användas för att skapa nertoningen.
max-width + max-height med procentuella värden kan eventuellt användas för att ange hur stor del själva bilden ska ta av fönsterytan.

background-color + opacity har jag inte kollat in. Skall göra genast! :birp

En tanke kring det där med animeringar... Bilden kommer ju garanterat ta någon halv sekund att ladda om den är halvstor. Genom att börja förladda bilden, och sedan utföra animationen kan man skapa en upplevelse att bilden laddas snabbt... Den är ju troligen färdigladdad när animationen är klar efter en halv sekund, och användaren upplever att den visas "direkt".

nitro2k01 skrev:

En tanke kring det där med animeringar... Bilden kommer ju garanterat ta någon halv sekund att ladda om den är halvstor. Genom att börja förladda bilden, och sedan utföra animationen kan man skapa en upplevelse att bilden laddas snabbt... Den är ju troligen färdigladdad när animationen är klar efter en halv sekund, och användaren upplever att den visas "direkt".

Det är just detta som jag inte riktigt har koll på. Frågan är om det man upplever är lite segt vekligen beror på själva ladd-tiden för bilderna, eller om själva animeringen är av sådan typ att den helt enkelt blir seg. En webläsare är ju trots allt inget optimalt media för snygga grafiska effekter.

Varför finns det inte <opengl rotatez="45" opacity="50"> </opengl>???? :e

Rotation kommer i CSS3 och stöds faktiskt redan i FF och Safari/Chrome mha attributen -webkit-transform: rotate(45deg); och -moz-transform: rotate(45deg);.

Froggy skrev:

...Tänkte mest att jag skulle göra en egen...

Jag läste en tutorial för ett par dagar sedan om det.
http://www.sohtanaka.com/web-design/inline-modal-window-w-css-and-jquery/

Just den här varianten hämtar popupen inline, från en annan div i dokumentet men läser du koden och är lite insatt i jQuery är det inte svårt att ladda med ajax istället.