die "etwas andere" ZOOM-Funktion

[dobra]

Hallo,

Nachdem die Zoom-Funktion aus dem Demo-Carshop mein Design sprengen würde, habe ich mir eine "etwas andere" Zoom-Funktion gebastelt:

Demo: http://www.woll-insel.at/cgi-bin/shop2/iboshop.cgi?showd100,,Twostep

• wenn man mit der Maus auf das "ZOOM" unter dem Bild zeigst, wird großes Bild angezeigt
   (natürlich stellt der IE das mal wieder ein bißchen anders dar als FF -  aber das sind wir ja schon gewohnt    )
• funktioniert mit css - also auch ohne JavaScript
   (das <a href="javascript:void(0)"> im Script ist nur dazu da, damit beim klicken die Seite nicht neu gelden wird
  -> hab lang nach so einer Ausschaltmöglichkeit für "klick" gesucht und schließlich gefunden)
• das "ZOOM" wird nur angezeigt, wenn für diesen Artikel auch ein XL-Bild vorhanden ist -> ssp-Funktion
  (bei mir ist das momentan nur auf dieser einen Seite der Fall)

Notwendige Schritte zum Einbau:

1.) ein benutzerdefiniertes Arikel-Feld (Bilddatei !) "ZOOM" anlegen
     (hier werden die XL-Bilder hinterlegt)

2.) Script in stdall.ipl:

Code: [Auswählen]

<!--spmacro:module(bild)
    sub zoom {
         my $index = $_[0];
         my $anzahl = $_[1];
            if ($index <= $anzahl) {
                  my $z = ssp::get_var_article('ZOOM',$index);
            if (length($z) > 1) {
                  $z = qq{<p><div id="zoom"> <a href="javascript:void(0)"> <IMG BORDER=0 SRC="http://www.woll.insel.at/shop2/Icon/zoom2.gif" BORDER=0 ><span><IMG  BORDER=0 SRC="http://www.woll-insel.at/shop2/$z" BORDER=0></span></a></div></p>};
            main::mprint($z);
            }
       }
            return 0;
   }
 -->

http-Adressen" muß natürlich anpassen werden

Code in der css-Datei:

Code: [Auswählen]

#zoom {
  position:absolute;
  z-index:3;}

  #zoom a {
  display:block;
  padding:0px;
 }

  #zoom a:hover {
  width:0px; }

  #zoom a span {display:none;}

  #zoom a:hover span {
  position:absolute; top:-300px; right:100px; z-index:3;         #  Einstellung WO das XL-Bild positioniert werden soll
  display:block;
  background:#ffffff;                         # Hintergrundfarbe
  border:2px dashed blue;               # Rahmen
  padding:5px;                               # Abstand von Rahmen zu Bild
 }

in den Templates:  __dimage__  mit

Code: [Auswählen]

<table width="50px" cellSpacing=0 cellPadding=0 border=0><tr><td>__dimage__</td></tr><tr><td align="center">__bild::zoom__&nbsp;</td></tr></table>ersetzen.
(muß möglicherweise auch angepaßt werden)

Keine Angst, das schaut viel komplizierter aus, als es ist 
Wenn es einmal eingebaut ist, kann es wie eine "normale" Shop-Funktion benutzt werden,


Linkback: https://www.shoppilot.net/pf/index.php?topic=852.0

[Andi]

echt COOLE Sache - das werden ich ggf. auch so machen (abgucken..)
Grüße v. ANDI

[jg]

Wirklich eine gute Idee! Werden wir wohl auch so ähnlich einbauen... 
Nachtrag:
Doch nicht so gut für uns, weil man nur 'absolut' positionieren kann, oder?

jg

[dobra]

Hallo jg,

ich habe es nicht probiert, aber es mußte mit "position:relative; top:irgendwas; left:irgendwas;" genauso funktionieren

Nachtrag: im oben angeführten Codebeispiel bezieht sich die absolute Position auf das "ZOOM"-Image
Genaueres zum Positionieren steht z.B. bei SelfHTML http://de.selfhtml.org/css/eigenschaften/positionierung.htm

[jg]

> aber es mußte mit "position:relative; top:irgendwas; left:irgendwas;" genauso funktionieren

Erstmal ja. Aber so richtig sicher klappst zB. auf einer Artikelseite mit mehreren
Artikeln noch nicht. Das zeigen dann alle Browser irgendwie unterschiedlich an.
Wir nutzen jetzt eine fertige JS-Funktion. Wer JS nicht mag, muss halt aufs
Detailbild klicken. Aber ansonsten ist die Idee nicht schlecht...
Mit AJAX kann ma da wohl angeblich auch viel machen, wenn man's kann.

jg