Kleine Produktbilder mit Maus-Drüberfahren vergrößern

[hop]

Hier ein Beispiel aus dem carshop

1. Die benötigten Bilder leget amn als benutzerdef. Datenfelder für Artikel an.
Üblicherweise nutzt man das Detailbild als Bild1. Dann legt man zusätzlich Bild2,Bild3 usw. an.

2. Der Code zur Darstellung der Bilder in der Detailseite.

Code: [Auswählen]

<table class="detail_zoom_table">
   <tr>
    <td>
    <img id="picturechange" src="__detail::stdBild__" border="0" alt=""></td>
    <td rowspan="2" class="text">
          <p>__dtext__</p><br>
     <br><br>
    <table style="table-layout:fixed; width:290px;">
         <tr>
           <td>
            Ansichten:
           <br><br>
          __detail::dBild__
          __detail::dBild2__
          __detail::dBild3__
          </td>
         </tr>
     </table>
    </td>
  </tr>
</table>

3. SSP-Identifier erstellen
In dem Codeschnipsel werden mehrere SSP-Identifier zum Darstellen der Bilder benutzt:

__detail::stdBild__  zum Darstellen des grossen Bilds
__detail::dBild__    kleines Detailbild
__detail::dBild2__  klienes Zusatzbild2
__detail::dBild3__  keines Zusatzbild3

Diese Identfier sind  in dem Modul "detail" definiert:

Code: [Auswählen]

<!--spmacro:module(detail)

sub stdBild {
  my $img = ssp::get_var_article('xdimage');
  my $url;
  
   if ($img ne $ssp::undefined and $img ne "") {
     $url  = $ssp::catalog_abs . '/' . $img;
   }
   main::mprint $url;
}

sub dBild {
  my $img = ssp::get_var_article('xdimage');
  my ($url,$link);
  
  if ($img ne $ssp::undefined and $img ne "") {
    $url  = $ssp::catalog_abs . '/' . $img;
  
    $link = qq|<img src="$url" style="border:none 0;width:90px; margin:0px; padding:0px; display:inline;" alt="$url" onMouseOver="javascript:changepic('$url');">|;
   }
   main::mprint($link);
}

sub dBild2 {
  my $img = ssp::get_var_article('BILD2');
  my ($url,$link);
  
  if ($img ne $ssp::undefined and $img ne "") {
    $url  = $ssp::catalog_abs . '/' . $img;
    $link = qq|<img src="$url" style="border:none 0;width:90px; margin:0px; padding:0px; display:inline;" alt="$url" onMouseOver="javascript:changepic('$url');">|;
   }
   main::mprint($link);  
}

sub dBild3 {
  my $img = ssp::get_var_article('BILD3');
  my ($url,$link);
  
  if ($img ne $ssp::undefined and $img ne "") {
    $url  = $ssp::catalog_abs . '/' . $img;
    $link = qq|<img src="$url" style="border:none 0;width:90px; margin:0px; padding:0px; display:inline;" alt="$url" onMouseOver="javascript:changepic('$url');">|;
   }
   main::mprint($link);  
}
-->



Diesen SSP-Code kann man direkt in die Detailvorlage schreiben oder besser mit dem include Makro einbinden. Dazu kopiert man den Code in eine Datei detail.ipl (der Name ist eigentlich beliebig, er sollte aber wie das entahltene Modul heißen und mit ipl enden). Einbinden mit:
<!--spmacro:include(detail.ipl)-->

Die Funktionweise kann man glaube ich schon erkennen. Das grosse Bild mit der id=picturechange wird einfach ausgetauscht, indem man die URL ersetzt.
Dazu fehlt uns jetzt noch die Javascript Funktion changepic.

Code: [Auswählen]

<script type="text/javascript" language="javascript">
function changepic(url){
document.getElementById("picturechange").src= url;
}
</script>

Dieser Code kann irgendwo im Headbereich der HTML-Vorlage stehen.
Das wars.




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