Slide-show

[conny2540]

Hallo,

bin leider kein Prog. und kenne mich nur ein wenig mit HTML und Javascript aus. Ich wollte in der index eine Tabelle einbauen, wobei eines der Felder ein Script mit einer Slideshow enthält. Wenn ich diese Tabelle mit einem Browser ansehen, dann läuft die Show ganz normal ab. Wenn ich diese aber in die Index einbaue, dann spielt sich nichts ab.

Geht das so nicht ? Wie kann ich eine Slide-Show einbauen. Von php und Co. habe ich leider keine Ahnung. Muss ich das als Flash einbauen anstatt als javascript slide-show?

Danke für jede leichte Hilfestellung.

LG

Conny

[supervisior]

vermutlich deshalb, weil Deine Pfade nicht stimmen. Ein Thema, das heute irgendwie nicht abreissen will.

[John Steed]

@Conny:

Hast Du vielleicht mal ein Link, wo man sich Dein Malheur anschauen kann?

Der supervisior und ich sind nämlich in der gleichen Pfadfindergruppe...

[conny2540]

Hallo,

ähm ich meine nicht in der index.html sondern in der index content. Ich möchte auch in den jeweiligen Kategorien dort oben wo man ein text eingibt eine andere slideshow einbauen wo Produkte der Kategorie vorbeilaufen und anklickbar sind. Vielleicht meint Ihr was anderes ? habe im Forum gesehen, dass es auch andere Möglichkeiten gibt, aber leider mit php. Und habe auch schon Shops gesehen, die das in eine Box eingebaut haben. Das ist für mich sicherlich zu kompliziert, weil man da eben mit php coden muss, wo ich micht nich auskenne.

Ist ein fertiges, angepasstes Script. Die links stimmen auch. Bilder sind am Server abgelegt, aber nicht innerhalb von xtc. Slideshow funktioniert, wenn ich diese direkt mit einem bleibigen Browser aufrufe, aber leider nicht mehr, wenn ich diese in den content von xtc einbaue.

hier mal der Link zur Slideshow (Bilder werden noch angepasst, ist nur ein Test, ob es funktioniert, wie ich mir vorstelle).

test

Das Ganze soll jetzt eben so ähnlich in den content hinein. Vielleicht geht es auch mit flash, so wäre es für mich aber schneller, weil das Script schon steht und ich nur noch Referenzieren muss.

Bin dankbar für jede Hilfe.

LG

Conny

[supervisior]

@Conny:

Hast Du vielleicht mal ein Link, wo man sich Dein Malheur anschauen kann?

Der supervisior und ich sind nämlich in der gleichen Pfadfindergruppe...

Aber wir sind besser als der Film!

[conny2540]

Hallo,

das mag sein, aber ich büsse meine Sünden mit dem jetzt ab. Habe auch einen anderen gestrigen Thread hierüber gelesen, aber komme wirklich nicht mit den Pfadangaben zugleich. Es funktioniert einfach nicht... Mein Shop steht nicht im root sondern in einem Unterverzeichnis /shop. Die images sind jetzt nicht auch in /shop/images drinnen. Aber egal was ich angebe die Bilder werden nicht angezeigt. Welche Eigenheit hat der content, die ich nicht verstehen kann ? (habe die Bilder auch schon direkt im content hineingeschoben shop/media. Auch nicht !

Wer kann mir da helfen ? /shop/bild.gif, shop/images/bild.gif, alles negativ.

LG

Conny

[supervisior]

1.) Wie hast Du das javascript eingebunden?

a.) So wie es ist in die content Seite?

b.) in die general.js.php?

c.) in eine eigene .js Datei?

[conny2540]

hallo,

nö. im content selbst. Kannst mal auf meiner Site gucken. Wie gesagt, habe schon alle möglichen Pfadangaben ausprobiert. Komme einfach nicht dahinter.

Bilder werden noch neu erstellt, sind jetzt im Ordner /shop/images. Gehören die woanders hin ?

im gs.jv kann ich das nicht einbauen, weil jede Kategorie dann eine andere Slideshow bekommen soll. Ich muss nur herausbekommen, wie die Routine funktioniert....

Hier der Link

http://www.6webshop.at/shop

Genau unter Unsere Vorteile.... soll sich die Bildershow abspielen.

und wenn wir schon dabei sind... wo kann ich das abändern: auf der Hauptseite stehen die Sonderangebote zuerst und dann kommen die "Artikel im Top" und dann Vorschau. Diese Reihenfolge hätte ich gerne anders. In der Index.html ist das nicht enthalten. Welche Datei ist es ?

Danke Dir und LG

Conny

[supervisior]

Es gibt mehrere Wege das Teil zum Laufen zu bringen. Hier mal ein Vorschlag, wie ich es machen würde.

1.) Erstelle mit z.B. Notepad eine .txt Datei mit Namen flexi.txt und speicher diese Datei im javascript Ordner deines Template Ordners.

2. Öffne diese flexi.txt und kopiere folgenden Code in diese Datei hinein.

 

var variableslide=new Array()

//variableslide[x]=["path to image", "OPTIONAL link for image", "OPTIONAL text description (supports HTML tags)"]

variableslide[0]=['ball.gif', '', '']

variableslide[1]=['spaceship.gif', 'http://www.space.com', 'Has aliens landed on earth? You decide.']

variableslide[2]=['cake.gif', '', '']

//configure the below 3 variables to set the dimension/background color of the slideshow

var slidewidth='130px' //set to width of LARGEST image in your slideshow

var slideheight='120px' //set to height of LARGEST iamge in your slideshow, plus any text description

var slidebgcolor='#F3F3F3'

//configure the below variable to determine the delay between image rotations (in miliseconds)

var slidedelay=3000

////Do not edit pass this line////////////////

var ie=document.all

var dom=document.getElementById

for (i=0;i<variableslide.length;i++){

var cacheimage=new Image()

cacheimage.src=variableslide[i][0]

}

var currentslide=0

function rotateimages(){

contentcontainer='<center>'

if (variableslide[currentslide][1]!="")

contentcontainer+='<a href="'+variableslide[currentslide][1]+'">'

contentcontainer+='<img src="'+variableslide[currentslide][0]+'" border="0" vspace="3">'

if (variableslide[currentslide][1]!="")

contentcontainer+='</a>'

contentcontainer+='</center>'

if (variableslide[currentslide][2]!="")

contentcontainer+=variableslide[currentslide][2]

if (document.layers){

crossrotateobj.document.write(contentcontainer)

crossrotateobj.document.close()

}

else if (ie||dom)

crossrotateobj.innerHTML=contentcontainer

if (currentslide==variableslide.length-1) currentslide=0

else currentslide++

setTimeout("rotateimages()",slidedelay)

}

if (ie||dom)

document.write('<div id="slidedom" style="width:'+slidewidth+';height:'+slideheight+'; background-color:'+slidebgcolor+'"></div>')

function start_slider(){

crossrotateobj=dom? document.getElementById("slidedom") : ie? document.all.slidedom : document.slidensmain.document.slidenssub

if (document.layers)

document.slidensmain.visibility="show"

rotateimages()

}

if (ie||dom)

start_slider()

else if (document.layers)

window.onload=start_slider

[/php]

In diesem javascript bei variableslide[0] usw. musst Du jetzt Deine Bilder definieren. Je nachdem wo deine Bilder liegen, musst Du jetzt die Pfade zu den Bildern angeben. Liegen diese Bilder im /images Ordner, dann einfach images/bild.gif. Liegen diese Bilder im /img Ordner Deines Templates, dann eben /templates/dein_template/img/bild.gif. Wenn Du alle Bilder definiert hast, speichere die Änderungen und ändere die Dateiendung von .txt in .js

3.) Wenn Du diese Slideshow an mehreren Stellen im Shop darstellen willst, dann öffne nun die header.php im /includes Ordner und suche nach:

[php]
<link rel="stylesheet" type="text/css" href="<?php echo 'templates/'.CURRENT_TEMPLATE.'/stylesheet.css'; ?>" />

und füge danach ein:

 

<script type="text/javascript" src="templates/dein_template/javascript/flexi.js">

/***********************************************

* Flexi Slideshow- © Dynamic Drive (www.dynamicdrive.com)

* This notice must stay intact for use

* Visit http://www.dynamicdrive.com/ for full source code

***********************************************/

</script>

[/php]

In dem Pfad musst Du natürlich noch den Verzeichnis Namen deines Templates ändern.

4.) So, und also letzten Schritt fügst Du in jede Datei wo die Slideshow angezeigt werden soll und an beliebiger Stelle folgendes ein.

[php]
<ilayer id="slidensmain" width=&{slidewidth}; height=&{slideheight}; bgColor=&{slidebgcolor}; visibility=hide><layer id="slidenssub" width=&{slidewidth}; left=0 top=0></layer></ilayer>

Ich habs jetzt nur trocken gemacht, aber sollte so funktionieren.

[conny2540]

Es gibt mehrere Wege das Teil zum Laufen zu bringen. Hier mal ein Vorschlag, wie ich es machen würde.

1.) Erstelle mit z.B. Notepad eine .txt Datei mit Namen flexi.txt und speicher diese Datei im javascript Ordner deines Template Ordners.

2. Öffne diese flexi.txt und kopiere folgenden Code in diese Datei hinein.

 

var variableslide=new Array()

//variableslide[x]=["path to image", "OPTIONAL link for image", "OPTIONAL text description (supports HTML tags)"]

variableslide[0]=['ball.gif', '', '']

variableslide[1]=['spaceship.gif', 'http://www.space.com', 'Has aliens landed on earth? You decide.']

variableslide[2]=['cake.gif', '', '']

//configure the below 3 variables to set the dimension/background color of the slideshow

var slidewidth='130px' //set to width of LARGEST image in your slideshow

var slideheight='120px' //set to height of LARGEST iamge in your slideshow, plus any text description

var slidebgcolor='#F3F3F3'

//configure the below variable to determine the delay between image rotations (in miliseconds)

var slidedelay=3000

////Do not edit pass this line////////////////

var ie=document.all

var dom=document.getElementById

for (i=0;i<variableslide.length;i++){

var cacheimage=new Image()

cacheimage.src=variableslide[i][0]

}

var currentslide=0

function rotateimages(){

contentcontainer='<center>'

if (variableslide[currentslide][1]!="")

contentcontainer+='<a href="'+variableslide[currentslide][1]+'">'

contentcontainer+='<img src="'+variableslide[currentslide][0]+'" border="0" vspace="3">'

if (variableslide[currentslide][1]!="")

contentcontainer+='</a>'

contentcontainer+='</center>'

if (variableslide[currentslide][2]!="")

contentcontainer+=variableslide[currentslide][2]

if (document.layers){

crossrotateobj.document.write(contentcontainer)

crossrotateobj.document.close()

}

else if (ie||dom)

crossrotateobj.innerHTML=contentcontainer

if (currentslide==variableslide.length-1) currentslide=0

else currentslide++

setTimeout("rotateimages()",slidedelay)

}

if (ie||dom)

document.write('<div id="slidedom" style="width:'+slidewidth+';height:'+slideheight+'; background-color:'+slidebgcolor+'"></div>')

function start_slider(){

crossrotateobj=dom? document.getElementById("slidedom") : ie? document.all.slidedom : document.slidensmain.document.slidenssub

if (document.layers)

document.slidensmain.visibility="show"

rotateimages()

}

if (ie||dom)

start_slider()

else if (document.layers)

window.onload=start_slider

[/php]

In diesem javascript bei variableslide[0] usw. musst Du jetzt Deine Bilder definieren. Je nachdem wo deine Bilder liegen, musst Du jetzt die Pfade zu den Bildern angeben. Liegen diese Bilder im /images Ordner, dann einfach images/bild.gif. Liegen diese Bilder im /img Ordner Deines Templates, dann eben /templates/dein_template/img/bild.gif. Wenn Du alle Bilder definiert hast, speichere die Änderungen und ändere die Dateiendung von .txt in .js

1) Bis hier alles ok, aber das Problem ist, dass ich nicht die gleiche Slideshow überall anzeigen möchte. Auf der Haupsite habe ich eben eine Tabelle gemacht und in eine Spalte davon möchte ich eben bestimmte Bilder "ablaufen" lassen.

In den Kategorien, kommt dann eine andere Tabelle mit anderen Bildern, nämlich anklickbare Produkte, die vorbeilaufen...

Ist das mit dem Content nicht machbar ? Man kann ja überall im Produkt und auch Content-Seiten auch eine Flash-Datei einfügen, wäre das nicht leichter ?

2) Kannst Du mir zufällig auch sagen wo ich das abändere ? auf der Hauptseite stehen die Sonderangebote zuerst und dann kommen die "Artikel im Top" und dann Vorschau. Diese Reihenfolge hätte ich gerne anders. In der Index.html in den Template ist das nicht enthalten. Welche Datei ist es ?

Danke

LG

Conny

[supervisior]

Wenn Du unterschiedliche Slideshows haben willst, dann musst für jede Slideshow eine eigenen .js Datei erstellen und jeweils einen anderen Datei Namen wählen, bzw. für jede Datei einen eigenen Eintrag in der header.php machen. Außerdem musst du dann noch den Namen für die layer id in jeder .js Datei und in der jeweiligen html ändern.

Aber ich befürchte, dass das deinen Shop bei mehreren Slideshows ziemlich ausbremsen wird, weil ja auch jedes mal Bilder geladen werden.

[supervisior]

1)

2) Kannst Du mir zufällig auch sagen wo ich das abändere ? auf der Hauptseite stehen die Sonderangebote zuerst und dann kommen die "Artikel im Top" und dann Vorschau. Diese Reihenfolge hätte ich gerne anders. In der Index.html in den Template ist das nicht enthalten. Welche Datei ist es ?

Schau mal in die main_content.html

[conny2540]

Wenn Du unterschiedliche Slideshows haben willst, dann musst für jede Slideshow eine eigenen .js Datei erstellen und jeweils einen anderen Datei Namen wählen, bzw. für jede Datei einen eigenen Eintrag in der header.php machen. Außerdem musst du dann noch den Namen für die layer id in jeder .js Datei und in der jeweiligen html ändern.

Aber ich befürchte, dass das deinen Shop bei mehreren Slideshows ziemlich ausbremsen wird, weil ja auch jedes mal Bilder geladen werden.

Ja, da hast Du Recht. Doch keine so gute Idee... Dann lass ich es bleiben und baue es vorerst nur mal in der ersten Seite ein, da dort für meinen Geschmack schon viel zu viel Information stehen und zu wenig Produkte. Ich will ja Produkte verkaufen und nicht Infos über wer wir sind....

In den Kat. lasse ich es vorerst und regle es anders.

Danke bin gerade am basteln....

LG

Conny

[conny2540]

Hallo,

habs jetzt mal eingebaut, aber leider keine Bilder laufen ab UND das ganze steht im Header-Bereich über dem top_logo.gif ???? Hab wohl was falsch gemacht, aber was ?

Siehe Anhang

LG

Conny

[supervisior]

Ja, hast Du! Du musst den letzten Schritt in die richtige html Datei einbauen.

[conny2540]

Ja, hast Du! Du musst den letzten Schritt in die richtige html Datei einbauen.

Lach nur... Aber macht nichts, denn ich weiss wirklich nicht welche Datei Du meinst !

Ich wollte das Ganze eben in die Tabelle im Content einbauen .

Was soll ich jetzt mit dem letzten Abschnitt ? eine extra html-Datei anlegen ? Ist das Richtig ?? Sorry bin aber wirklich nicht sehr Fit mit Programmierung. Habe das nie gelernt, bin eine die sich anhand von Büchern und ausprobieren alles selbst beigebracht hat (und nicht Bolnd...!!). Wenn das mit der Datei stimmt, dann wie soll ich die in die Index im content manager hineinbringen ???? Glaube mir ist das doch zu hoch

Meinst Du vielleicht die main_content.html ? Aber dort ist dann keine Tabelle mit den restlichen 3 Spalten ! Sorry bin wirklich verwirrt.

2) main_content für die Reihenfolgeänderung war richtig. Danke. Habe diese geändert.

LG Conny

[supervisior]

Nimms nicht persönlich, wenn ich da mal einen Smiley dran hänge.

Wenn Du die slideshow z.B. auf der Startseite anzeigen lassen willst, dann nimm entweder eine leere HTML oder die Datei in der Inhalt Deiner Startseite definiert ist und binde dort

<ilayer id="slidensmain" width=&{slidewidth}; height=&{slideheight}; bgColor=&{slidebgcolor}; visibility=hide><layer id="slidenssub" width=&{slidewidth}; left=0 top=0></layer></ilayer>[/PHP]

[/color][/color]

[color=#000000][color=#007700][/color][/color]

[color=#000000][color=#007700][color=black]ein.[/color][/color][/color]

[conny2540]

Hallo,

hat mich nicht getroffen, habe ja selbst herzlich darüber gelacht, wie blöd ich bin...

So jetzt noch einmal. Ich will es auf der index-Seite haben. Habe das in die main_content.html eingebaut und zwar unter

<td class="pageHeading"> </td>

</tr>

Abe leider habe ich das gleiche Bild wie bereits angehängt. Da ändert sich nix. Keine Bilder laufen ab und Platzhalter über dem top_logo.gif. Ich glaube ich belasse es bei den Link. Wenn jemand mehr wissen möchte, dann soll er halt draufklicken. Die anderen die nix wissen möchten, sollen halt ohne Wissen kaufen... Die Info ist da für denjenigen die es brauchen und das reicht wohl.

Danke trotzdem für die Mühe.

LG

Conny

[jbm42]

Hallo,

ich habe das gleich Problem mit dem Script. Sobald ich die Zeile:

"<script type="text/javascript" src="templates/seven/javascript/flexi.js"> </script> "

in die header.php einfüge, kommt oben lins ein grauer kasten in der bestimmten Größe. Ich habe das Script noch in keiner html eingefügt und trotzdem kommt der Fehler...

Weiß jemand, was ich falsch mache?

Gruß, Ben