Slider einbauen

Hallo,

dafür musst Du folgende Dinge machen:

1. Die Script Datei "s3Slider.js" in das Verzeichnis "%ProjektName%/Vorlage Standard/_media" kopieren.

2. Die Template Datei "default.html" anpassen und innerhalb des head-Tags die folgenden Zeilen ganz am Ende (vor dem head Schluss-Tag) einfügen (Zeitspanne (timeOut) nach eigenen Wünschen anpassen):

<script type="text/javascript" src="../_media/s3Slider.js"></script> 
<script type="text/javascript">$(document).ready(function(){$('#s3slider').s3Slider({timeOut:4000});});</script>

3. Auf der Seite, wo der Slider hin soll einen neuen Artikel "Text einspaltig" anlegen und auf Bearbeiten/Editieren gehen. Dort in den HTML Modus wechseln und folgenden Code einfügen:

<div style="position: relative; width: 890px; height: 350px; overflow: hidden" id="s3slider"> 
<ul style="position: absolute; width: 890px; margin-left: 0px; top: 0px" id="s3sliderContent"> 
<li style="position: relative; list-style-type: none; display: none; float: left" class="s3sliderImage"><img src="file:///C:/Users/%DeinBenutzerName%/Documents/Zeta%20Producer%2010/Projects/SliderTest/web/media/images/f51ffef41e874ec7bc06cc2dab708710.jpg" /> 
<span style="position: absolute; filter: alpha(opacity=70); padding-bottom: 10px; background-color: #000; padding-left: 13px; width: 864px; padding-right: 13px; display: none; font: 10px/15px arial, helvetica, sans-serif; color: #fff; padding-top: 10px; top: 0px; left: 0px; -moz-opacity: 0.7; -khtml-opacity: 0.7; opacity: 0.7">Test 1</span> 
</li> 
<li style="position: relative; list-style-type: none; display: none; float: left" class="s3sliderImage"><img src="file:///C:/Users/%DeinBenutzerName%/Documents/Zeta%20Producer%2010/Projects/SliderTest/web/media/images/c26df324c1e544dc88f459b768d5239e.jpg" /> 
<span style="position: absolute; filter: alpha(opacity=70); padding-bottom: 10px; background-color: #000; padding-left: 13px; width: 864px; padding-right: 13px; display: none; font: 10px/15px arial, helvetica, sans-serif; color: #fff; padding-top: 10px; top: 0px; left: 0px; -moz-opacity: 0.7; -khtml-opacity: 0.7; opacity: 0.7">Test 2</span> 
<div style="clear: both" class="clear s3sliderImage"></div> 
</li> 
</ul> 
</div>

Die Styles müssen jeweils am HTML-Tag selber definiert werden, da sie sonst von den Zeta Template-Styles überschrieben werden bzw. keine Beachtung finden. Falls jemand eine Lösung hat wie man die Styles auch per css einbinden kann ohne das sie von den Zeta-Styles übergangen werden, würde ich mich freuen, die Lösung hier zu sehen.

Der Name für die Bilder kann in der Bilder Verwaltung ermittelt werden. Dort einfach auf Eigenschaften, dann unten auf das "+" für erweiterte Einstellungen und dann kann man sich den Namen, die ID usw. vom Bild anschauen. Da ich sonst noch nie versucht habe ein Bild zu Fuss (per Quelltext) bei einem Zeta-Project einzubinden, kann es sein, dass die Bild-Addressierung auch einfacher geht.

Ich hoffe ich habe nichts vergessen.

Testprojekt hier: http://hosting.zeta-producer.com/customer-10436…/aktuelles.html

Grüße.

Hallo Andreas,

vielleicht hat es ja die Bilder nicht auf deinen Server übertragen?

Versuch mal:

-Website > Website erstellen (komplett)
-Website > Online veröffentlichen (erstellen und veröffentlichen (komplett)

Wenn das nichts bringen sollte, wäre es hilfreich einen Link zu der Seite zu haben.

Gruß
Jochen

Hallo,

ok der Fehler ist, das in deinem Script deine 2 Images auf deinen Rechner lokal verweisen, und
deshalb werden Sie online nicht dargestellt.

Sieht bei dir im HTML-Quelltext so aus:
1: <img src="file://///awfile01/zeta$/Internet APT/APT DE/web/media/images/729ccd9535b6420c8978ffc73d0cbe4f.jpg" />
2: <img src="file://///awfile01/zeta$/Internet APT/APT DE/web/media/images/b2df5749e2e64e99b7d4d0c3621e4bd4.jpg" />

Und das sollte normal so aussehen:

1: <img src="media/images/729ccd9535b6420c8978ffc73d0cbe4f.jpg" />
2: <img src="media/images/b2df5749e2e64e99b7d4d0c3621e4bd4.jpg" />

Überprüfe das mal, und ändere es am besten so ab, das du direkt auf den richtigen Bildnamen verweist.
Sollte normalerweiße auch so klappen.

Gruß
Jochen

Hallo,
also wenn Du den Artikel bearbeitest, musst Du in den HTML-Quelltext Editor umschalten (der ganz rechte Button in der kleinen Menü-Leiste). Dort gibst Du beim Bild als Soure-Pfad:

file:///awfile01/zeta$/Internet APT/APT DE/web/media/images/729ccd9535b6420c8978ffc73d0cbe4f.jpg

(bitte nur drei '/' nach 'file:'). Danach wieder den HTML Bearbeitungs-Modus verlassen. Nun sollten Dir auch die Bilder im normalen Editor angezeigt werden. Diesen auch mit ok bestätigen. Wenn Du nun auf Webseite komplett neuerstellen gehst und Dir dann die Seite mal lokal auf deinem Rechner anzeigen läßt, sollte Zeta-Producer den Bild-Pfad von

file:///awfile01/zeta$/Internet APT/APT DE/web/media/images/729ccd9535b6420c8978ffc73d0cbe4f.jpg

nach nur

media/images/729ccd9535b6420c8978ffc73d0cbe4f.jpg

gemapt haben. Kontrollieren kannst Du das im dem Du Dir den HTML Quelltext anzeigen läßt.
Solltest Du gar nicht klar kommen, mache mal ein Backup von Deinem Projekt, zippe es und lade es irgendwo hoch (rapidshare od. so), dann schaue ich mir das mal an.
Grüße.

So ich habe versucht Dein Backup bei mir einzulesen. Dies ging beim ersten Versuch gründlich schief, da Du noch mit Zeta Producer 9 arbeitest. Also erneuter Versuch mit Import in Zeta Producer 9. Hat soweit geklappt. Ich habe dann versucht eine neue Seite anzulegen und die Slider Geschichte zu implementieren. Leider gab es dann beim Kompilieren der Seite irgendein Fehler. Woran es liegt weiß ich nicht.

Naja ich habe dann einfach ein neues Beispiel-Projekt angelegt und dort den Slider integriert. Die gute Nachricht es funzt auch in Zeta Producer 9. Hier der Link zum Beispiel-Projekt: http://oron.com/fa6jibtlkx7w

Wenn Du es runtergeladen hast bitte den Lösch-Link aus der PM benutzen.

Hier noch mal kurz wie Du in die HTML Bearbeitung eines normalen Artikels umschaltest (Button im roten Kreis drücken):

Normale Ansicht:

[Blockierte Grafik: http://img140.imageshack.us/img140/2807/zeta1x.png]

HTML Bearbeitungsansicht:

[Blockierte Grafik: http://img11.imageshack.us/img11/8029/zeta2.png]

Grüße.

Ich nutze das Programm "Web Diashow". Dort können Slider erstellt werden mit Text und Link. Es gibt verschiedene Übergänge, Bildgröße, Zeit, Laufrichtung usw. können eingestellt werden.

Beispiel hier (linke Spalte Kreditkartenauswahl):
http://www.kreditkarte-lohnt-sich.de/
Oder hier (oben die Werbebanner der Anbieter):
http://www.strom-lohnt-sich.de/

Ist zwar klein, aber wie schon geschrieben Größe usw individuell angepasst und es braucht keine Programmierkentnisse.

Hallo Andreas,

soweit ich hier beim lesen der ganzen Beiträge gesehen habe, hat doch vermutlich das Mitglied "madas",
dir beim letzten mal super weiterhelfen können, oder?

Sogar wohl mit der überarbeitung deines Projektes und dem lösen des Problems.

Schreib Ihn doch mal direkt hier an, evtl. weiß er ja noch, was das Problem war, oder ist, und er kann dir
damit wieder weiterhelfen (ich kann es gerade leider nicht so, auf die schnelle).

Oder aber du beschreibst mal genauer, was der Slider bei dir genau können sollte, bzw. wieviele Bilder in welcher Auflösung da rein sollen.

Evtl. gibt es noch eine andere einfachere Möglichkeit dazu, dies zu realisieren.

Gruß
Jochen

hi jochen,
ich ahne es, du meinst bestimmt "dein" tool photoscape und und den gif-animator, oder?....da habe ich noch ne alternative für eine schnelle lösung, (mit hoher auflösung) die software hatte ich letztens empfohlen, war für 19 euro im angebot....

man nehme die software jalbum, das skin "matrixslide" und baut das ganze per iframe zb. in den banner ein

http://jalbum.net/en/skins/skin/MatrixSlide

die thumbs kann man deaktivieren, man erhält ne astreine slideshow

hier zu sehen auf ner testseite von mir

http://www.asnew.de/restaurierung-aufarbeitung.html

so andreas, das war es von meiner seite, achso da sind übrigens noch rund 100 weitere slideshows und bildergallerien im preis mit drin...für mich war das ne feine sache, gerade vor dem hintergund, dass der slider "ja nicht mal eben so" umzusetzen ist.

gruss

wolfgang