verschiedene Ansichten + Zoomansicht kombinieren

[dobra]

Hallo,

Die unterschiedlichen Ansichten eines Artikeln anzeigen wie im Carshop-Demoshop -> Automobile -> Unfallwagen gefällt mir sehr
Die css-Zoomfunkion s.hier hatte ich schon (so ähnlich - meine Version davon  )

Ich wollte jetzt aber beides haben 

Nach einigem herum probieren habe ich beide Script unter einen Hut gebracht,
Live-Demo (funktioniert perfekt  - aber die Bilder sind erst mal "irgendwelche" Testbilder)

So geht's:

JS:

Code: [Auswählen]

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

// Wechselnde Zoomansicht
function plus1(url) {
document.images.dummy1.src=url;
document.getElementById("show1").style.display='inline';
document.getElementById("show2").style.display='none';
document.getElementById("show3").style.display='none';
}

function plus2(url) {
document.images.dummy2.src=url;
document.getElementById("show2").style.display='inline';
document.getElementById("show1").style.display='none';
document.getElementById("show3").style.display='none';
}

function plus3(url) {
document.images.dummy3.src=url;
document.getElementById("show3").style.display='inline';
document.getElementById("show1").style.display='none';
document.getElementById("show2").style.display='none';
}

</script>
ssp

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 = "";
   my $link = "";
 
   if ($img ne $ssp::undefined and $img ne "" and $img ne "") {
$url  = $ssp::catalog_abs . '/' . $img;
$link = qq |<a href="javascript:plus1('$url');" id="script1"> <img src="$url" style="height:30px; margin:0px; padding:0px; display:inline; cursor:hand; cursor:pointer;" border="0" name="dummy1" onclick="javascript:changepic('$url');"></a>|;
}
   main::mprint($link);
}

sub dBild4 {
   my $img = ssp::get_var_article('IMAGE2');
   my $url = "";
   my $link = "";
 
   if ($img ne $ssp::undefined and $img ne "" and $img ne "") {
$url  = $ssp::catalog_abs . '/' . $img; 
$link = qq |<a href="javascript:plus2('$url');" id="script2"> <img src="$url" style="height:30px; margin:0px; padding:0px; display:inline; cursor:hand; cursor:pointer;" border="0" name="dummy2" onclick="javascript:changepic('$url');"></a>|;
}
main::mprint($link);
}

sub dBild5 {
   my $img = ssp::get_var_article('IMAGE3');
   my $url = "";
   my $link = "";
 
   if ($img ne $ssp::undefined and $img ne "") {
$url  = $ssp::catalog_abs . '/' . $img;
$link = qq |<a href="javascript:plus3('$url');" id="script3"> <img src="$url" style="height:30px; margin:0px; padding:0px; display:inline; cursor:hand; cursor:pointer;" border="0" name="dummy3" onclick="javascript:changepic('$url');"></a>|;
}
main::mprint($link);
}

### nur anzeigen, wenn es auch verschiedene Ansichten gibt
sub showauswahl {
   my $img2 = ssp::get_var_article('IMAGE2');
   my $img3 = ssp::get_var_article('IMAGE3');
 
   if (($img2 ne $ssp::undefined and $img2 ne "") || ($img3 ne $ssp::undefined and $img3 ne ""))  {
my $out = qq|<br><br><br><span class="myh7"> Ansicht:</span><br> __detail::dBild__ __detail::dBild4__ __detail::dBild5__ |;
main::mprint $out;
}
}
-->

<!--spmacro:module(bild)
sub zoom1 {
my $index = $_[0];
my $anzahl = $_[1];
if ($index <= $anzahl) {
my $z = ssp::get_var_article('ZOOM2',$index);
if (length($z) > 1) {
$z = qq{<div class="zoomdiv"><a href="javascript:void(0)"><IMG BORDER=0 SRC="../zoom.gif"><span><IMG BORDER=0 SRC="../$z" BORDER=0></span></a></div>};
main::mprint($z);
}
}
return 0;
}

sub zoom2 {
my $index = $_[0];
my $anzahl = $_[1];
if ($index <= $anzahl) {
my $z = ssp::get_var_article('IMAGE2ZOOM',$index);
if (length($z) > 1) {
$z = qq{<div class="zoomdiv"><a href="javascript:void(0)"><IMG BORDER=0 SRC="../zoom.gif"><span><IMG BORDER=0 SRC="../$z" BORDER=0></span></a></div>};
main::mprint($z);
}
}
return 0;
}

sub zoom3 {
my $index = $_[0];
my $anzahl = $_[1];
if ($index <= $anzahl) {
my $z = ssp::get_var_article('IMAGE3ZOOM',$index);
if (length($z) > 1) {
$z = qq{<div class="zoomdiv"><a href="javascript:void(0)"><IMG BORDER=0 SRC="../zoom.gif"><span><IMG BORDER=0 SRC="../$z" BORDER=0></span></a></div>};
main::mprint($z);
}
}
return 0;
}
-->
HTML:

Code: [Auswählen]

__detail::showauswahl__dort, wo die kleinen Vorschau-Auswahlbilder angezeigt werden sollen

Code: [Auswählen]

<div class="dimage"><img id="picturechange" src="__detail::stdBild__" border="0" alt=""></div><span style="display: inline" id=show1>__bild::zoom1__</span><span style="display: none" id=show2>__bild::zoom2__</span><span style="display: none" id=show3>__bild::zoom3__</span>für die Anzeige des Bildes und das jeweilig verwendete ZOOM-Icon

Die ben.def. Felder müssen natürlich angelegt und die verschiedenen Bilder bzw. Zoombilder eingetragen werden und die Pfade zu den Bildern müssen angepasst werden.

Im Beispiel sind die ben.def. Artikelfelder:
IMAGE2 und IMAGE2ZOOM für das 2. Bild, IMAGE3 und IMAGE3ZOOM für das 3. Bild.

P.S.: an der css-Datei braucht nichts geändert werden, daher habe ich sie hier nicht extra angeführt

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