Autor Thema: Kleine Produktbilder mit Maus-Drüberfahren vergrößern  (Gelesen 4703 mal)

0 Mitglieder und 1 Gast betrachten dieses Thema.

Offline hop

  • Global Moderator
  • Hero Member
  • *****
  • Beiträge: 705
  • Lob: 5
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.
<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:

<!--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.

<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: http://www.shoppilot.net/pf/seo/7/seo/1509/
Schöne Grüße hop


smiley
search - Anzeige => kleine css-Spielerei ;)

Begonnen von dobra

0 Antworten
2622 Aufrufe
Letzter Beitrag Mai 04, 2008, 11:53:12
von dobra
xx
Kleine Probleme beim Enterprise Shop

Begonnen von phalbig

1 Antworten
3040 Aufrufe
Letzter Beitrag Dezember 14, 2002, 13:39:44
von hop
xx
Produktbilder in einer Lightbox auf Shopseiten darstellen

Begonnen von admin

21 Antworten
23927 Aufrufe
Letzter Beitrag November 02, 2009, 15:08:57
von admin