Forum
23.06.2007, 14:19

Eine Slideshow im Shop einbauen!

Sehr geehrte Kunden,

schon mehrfach wurden wir gefragt, wie man rasch eine Slideshow im Shop einbauen kann. Wir haben für Sie ein Script herausgesucht und beschreiben hier ganz kurz wie man so etwas im Shop einbindet.

Ein Beispiel können Sie links unten im Shopfenster sehen: www.testinstallation.de/s01.php?shopid=s01&sp=de&cur=eur&ag=2 />
Hierfür haben wir einfach ein HTML-Banner angelegt und einen solchen Code verwendet:

<center><script type="text/javascript">
/***********************************************
* Translucent Slideshow script- © Dynamic Drive DHTML code library (www.dynamicdrive.com), This notice MUST stay intact for legal use, visit Dynamic Drive at
www.dynamicdrive.com/ for full source code
***********************************************/
var slideshowcontent=new Array()

//Einstellungen:
var trans_width='120px' //Breite
var trans_height='120px' //Höhe
var pause=3000 //Pausenlänge (1000=1 Sek.)
var degree=15 //Geschwindigkeit der Animation.
//Hier beliebig viele Bilder einstellen: [image URL, OPTIONAL LINK, OPTIONAL LINK TARGET]
slideshowcontent[0]=["pic/ts-1t.jpg", "s.php?a=ts-1", ""]
slideshowcontent[1]=["pic/t-2t.jpg", "s.php?a=t-2", ""]
slideshowcontent[2]=["pic/t-3t.jpg", "s.php?a=t-3", ""]
slideshowcontent[3]=["pic/t-4t.jpg", "s.php?a=t-4", ""]

////Ab dieser Stelle braucht nichts geändert zu werden!/////
var bgcolor='white';var imageholder=new Array();
for (i=0;i<slideshowcontent.length;i++){imageholder=new Image();imageholder.src=slideshowcontent[0];}
var ie4=document.all;var dom=document.getElementById&&navigator.userAgent.indexOf("Opera")==-1;
if (ie4||dom) {document.write('<div style="position:relative;width:'+trans_width+';height:'+trans_height+';overflow:hidden"><div id="canvas0" style="position:absolute;background-color:'+bgcolor+';width:'+trans_width+';height:'+trans_height+';left:-'+trans_width+';filter:alpha(opacity=20);-moz-opacity:0.2;"></div><div id="canvas1" style="position:absolute;background-color:'+bgcolor+';width:'+trans_width+';height:'+trans_height+';left:-'+trans_width+';filter:alpha(opacity=20);-moz-opacity:0.2;"></div></div>')}
else if (document.layers){document.write('<ilayer id=tickernsmain visibility=hide width='+trans_width+' height='+trans_height+' bgColor='+bgcolor+'><layer id=tickernssub width='+trans_width+' height='+trans_height+' left=0 top=0>'+'<img src="'+slideshowcontent[0][0]+'"></layer></ilayer>')}
var curpos=trans_width*(-1);var curcanvas="canvas0";var curindex=0;var nextindex=1;
function getslidehtml(theslide){var slidehtml="";
if (theslide[1]!="")
slidehtml='<a href="'+theslide[1]+'" target="'+theslide[2]+'">'
slidehtml+='<img src="'+theslide[0]+'" border="0">'
if (theslide[1]!="")
slidehtml+='</a>';return slidehtml;}
function moveslide(){
if (curpos<0){curpos=Math.min(curpos+degree,0);tempobj.style.left=curpos+"px";}else{
clearInterval(dropslide)
if (crossobj.filters)
crossobj.filters.alpha.opacity=100
else if (crossobj.style.MozOpacity)
crossobj.style.MozOpacity=1
nextcanvas=(curcanvas=="canvas0")? "canvas0" : "canvas1"
tempobj=ie4? eval("document.all."+nextcanvas) : document.getElementById(nextcanvas)
tempobj.innerHTML=getslidehtml(slideshowcontent[curindex])
nextindex=(nextindex<slideshowcontent.length-1)? nextindex+1 : 0
setTimeout("rotateslide()",pause)]
function rotateslide(){
if (ie4||dom){resetit(curcanvas);
crossobj=tempobj=ie4? eval("document.all."+curcanvas) : document.getElementById(curcanvas)
crossobj.style.zIndex++
if (crossobj.filters)
document.all.canvas0.filters.alpha.opacity=document.all.canvas1.filters.alpha.opacity=20
else if (crossobj.style.MozOpacity)
document.getElementById("canvas0").style.MozOpacity=document.getElementById("canvas1").style.MozOpacity=0.2
var temp='setInterval("moveslide()",50)'
dropslide=eval(temp);curcanvas=(curcanvas=="canvas0")? "canvas1" : "canvas0";}
else if (document.layers){
crossobj.document.write(getslidehtml(slideshowcontent[curindex]))
crossobj.document.close();}
curindex=(curindex<slideshowcontent.length-1)? curindex+1 : 0;}
function jumptoslide(which){curindex=which;rotateslide();}
function resetit(what){curpos=parseInt(trans_width)*(-1);
var crossobj=ie4? eval("document.all."+what) : document.getElementById(what)
crossobj.style.left=curpos+"px";}
function startit(){crossobj=ie4? eval("document.all."+curcanvas) : dom? document.getElementById(curcanvas) : document.tickernsmain.document.tickernssub;
if (ie4||dom){crossobj.innerHTML=getslidehtml(slideshowcontent[curindex]);rotateslide();}
else{document.tickernsmain.visibility='show';curindex++;setInterval("rotateslide()",pause);]
if (window.addEventListener) window.addEventListener("load", startit, false)
else if (window.attachEvent) window.attachEvent("onload", startit)
else if (ie4||dom||document.layers) window.onload=startit;
</script></center>


Die Konfiguration des Scriptes ist ganz einfach! In den folgenden Zeilen können Sie entsprechende anpassungen vornehmen (rot markiert):

var trans_width='420px' //Breite
var trans_height='470px' //Höhe
var pause=1000 //Pausenlänge (1000=1 Sek.)
var degree=15 //Geschwindigkeit der Animation.

darunter finden Sie den Abschnitt, wo man die einzelnen Bilder festlegen kann. Möchte man weitere anlegen, muss man die Zeilen einfach nur kopieren und darauf achten, dass die Zahl in der eckigen Klammer hinter der Variable slideshowcontent vorgeführt wird.
Die 3 Parameter, die man festlegen kann sind:
- BildURL (z.B. img/pic1.jpg oder pic/Artikelnummer+t.jpg oder http:/usw...)
- LinkURL (z.B. einen Link aus dem Deeplinkgenerator verwenden, oder einfach Link weglassen)
- Ziel (entweder leer lassen, ansonsten z.B. "_blank", wenn sich ein neues Fenster öffnen soll)

Das war es schon. Man muss also nicht einmal HTML oder Javascript beherrschen.

So eine Slideshow läßt sich natürlich auch an vielen anderen Orten im Shop plazieren. Denkbar ist es auch im Artikeldetail, wenn man zum Artikel mehrere Bilder gleichzeitig anzeigen möchte.


Forum-Archiv

Alle Beiträge aus:

2026, 2025, 2024, 2023, 2022, 2021, 2020, 2019, 2018, 2017, 2016, 2015, 2014, 2013, 2012, 2011, 2010, 2009, 2008, 2007, 2006, 2005, 2004, 2003, 2002,