Bildwechsel Modul gesucht

dylan · 18. März 2011 10:49

Welches Modul könnt Ihr für einen automatisierten Bildwechsel empfehlen, gerne per jQuery.
Schön wären Links dazu um das Modul mal in Aktion zu sehen.

Danke

Andynium · 18. März 2011 10:56

uniqu3 hatte da vor längerem mal einen Artikel in seinem Blog

http://www.i-do-this.com/blog/21/Create … cle-plugin

Bezieht sich zwar auf das News-Modul, sollte sich aber ganz entspannt auch für das Gallery-Modul anpassen lassen ...

dylan · 18. März 2011 11:04

News bzw. Text muss nicht zwingend sein, ein reiner Bildwechsel würde reichen.
Wobei: Das Beispiel von uniqu3 ist wirklich interessant.

owr_web · 18. März 2011 11:26

Ich hatte zuerst das rotate-plugin, habe es dann aber auf cross-slide umgebaut.

http://www.cmsmadesimple.de/forum/viewt … 1069#p1069
Hier gibts nähere Infos dazu.
Du kannst es dir auf http://www.wasserrettung-kufstein.com (Startseite) in Natura ansehen.

tbtip · 18. März 2011 13:21

Hallo dylan,

ich habe bei einer Internetseite von einem Maschinenbau Betrieb das Showtime Modul eingesetzt.

Hier der Link zu einer Galerie wo es um CNC Fräsen geht.

Auf der Internetseite wurde dies Modul an mehreren Stellen mit jquery eingesetzt. Die möglichkeit mit swfobject wäre auch möglich.

Das Modul findet man hier: http://dev.cmsmadesimple.org/projects/showtimemod

Andynium · 18. März 2011 13:49

Was mir bei beiden Links aufgefallen ist - keiner enthält einen Hinweis darauf, dass Javascript für die Anzeige der Show erforderlich ist.

NoScript (das FF-Plugin) blockt da alles zuverlässig cool .

Da sollte besucherfreundlicherweise noch ein <noscript> ... </noscript> mit den entsprechenden Infos rein.

dylan · 18. März 2011 13:51

Danke für die Tipps. Ich habe mich für den Tipp von owr_web entschieden, weil mir das script am »flüssigsten« läuft, zumindest kommt es bei mir so rüber.
Ich hab's nach den Tipps der verlinkten Seite unter dem schließenden body-Tag eingebaut. Funktioniert alles sehr gut.
Ein Problem habe ich allerdings:

Hier klicken, um den Code zum Kopieren zu markieren

<div id="header">
<div id="navigation">
{menu loadprops=0 childrenof=$lang_parent lang=$lang_locale}
</div>
<div id="sprachauswahl">{MleCMS action="langs"}</div>
<div id="headcontent">
<!-- slider -->
</div>
</div>

Im DIV headcontent findet die slideshow statt. Vor dem Einbau hatte ich ein statisches Bild drin, die DIVs navigation u. sprachauswahl lagen oberhalb, auf dem headcontent-image, waren also zu sehen. Jetzt sind sie nicht mehr zu sehen.

Die slideshow wirkt sich anscheinend auf das CSS aus (!?), überlagert navigation u. sprachauswahl. Hat jemand eine Idee woran das liegen kann?

owr_web · 18. März 2011 13:53

Hast du einen Link, dass man sich das direkt ansehen kann?

owr_web · 18. März 2011 14:00

cyberman schrieb:

Da sollte besucherfreundlicherweise noch ein <noscript> ... </noscript> mit den entsprechenden Infos rein.

Wieso denn? bei mir ists z.b. dass er ja das erste Bildchen sowieso anzeigt, egal ob js oder nicht. Also wer kein js hat, hat halt nur ein Bildchen statt 12 lol

Beitrag geändert von owr_web (18. März 2011 14:00)

mike-r · 18. März 2011 14:03

@dylan: hast Du bei #headcontent auch eine Höhe eingestellt?
Kann man das mal sehen?

€: herrje, bin ich langsam yikes

Beitrag geändert von mike-r (18. März 2011 14:04)

uniqu3 · 18. März 2011 14:13

Bei solchen aufgaben bevorzuge ich lieber jQuery durch mich in Template eingebunden und kombiniert mit Gallery oder GBFilePicker.
Showtime ist zwar nett aber für mein Geschmack sieht der Quelltext nicht mehr so sauber aus danach smile

@cyberman Bezüglich noscript, verwende ich es auch nicht unbedingt immer so wie zum beispiel beim Quattro Simple template habe ich als fallback beim deaktivierten js einfach overflow:hidden im css so wird die Seite nicht zerschossen smile

@dylan da musst Du wohl im CSS für #navigation ein z-index:999; wert oder so einfügen.
Solltest Du die Flash version verwenden könnte es auch sein das im script wmode="transparent" fehlt aber mit einem link wie owr_web schon sagte wäre hilfreicher smile

Edit: passend zum Thema gerade heute durch RSS gelesen smile http://designm.ag/resources/28-fresh-jquery-tutorials/

Beitrag geändert von uniqu3 (18. März 2011 14:42)

nockenfell · 18. März 2011 14:30

Ich setze dazu jeweils den Nivoslider in Verbindung mit Gallery ein.
http://nivo.dev7studios.com/

Beispiel: http://www.oekoliberale.ch/

Andynium · 18. März 2011 15:45

owr_web schrieb:

cyberman schrieb:
Da sollte besucherfreundlicherweise noch ein <noscript> ... </noscript> mit den entsprechenden Infos rein.
Wieso denn? bei mir ists z.b. dass er ja das erste Bildchen sowieso anzeigt, egal ob js oder nicht. Also wer kein js hat, hat halt nur ein Bildchen statt 12

Wie gesagt, ich empfinde es als nett, wenn mich jemand darauf hinweist, dass da noch mehr geht wink .

Und ... eigentlich tut es keinem weh.

owr_web · 18. März 2011 15:50

naja - ist ne Grundsatzdiskussion cool

Ich sag ja schon im alt= dass mehr geht(rotierendes Startbild). Ansonsten - Wer js nicht will, der kriegt ja ohnehin das beste aller Bilder.
Ich sag mir wieder eher - na da muss er sich dann nicht unbedingt aufregen, dass ich ihm sage es gäbe ja mehr, aber nur mit JS glasses

dylan · 18. März 2011 16:59

uniqu3 schrieb:

Bei solchen aufgaben bevorzuge ich lieber jQuery durch mich in Template eingebunden und kombiniert mit Gallery oder GBFilePicker.
Showtime ist zwar nett aber für mein Geschmack sieht der Quelltext nicht mehr so sauber aus danach
@cyberman Bezüglich noscript, verwende ich es auch nicht unbedingt immer so wie zum beispiel beim Quattro Simple template habe ich als fallback beim deaktivierten js einfach overflow:hidden im css so wird die Seite nicht zerschossen
@dylan da musst Du wohl im CSS für #navigation ein z-index:999; wert oder so einfügen.
Solltest Du die Flash version verwenden könnte es auch sein das im script wmode="transparent" fehlt aber mit einem link wie owr_web schon sagte wäre hilfreicher
Edit: passend zum Thema gerade heute durch RSS gelesen http://designm.ag/resources/28-fresh-jquery-tutorials/

So habe ich es auch gemacht. Ich habe jQuery plus CrossSlide runtergeladen, in einen Ordner gepackt und per FTP hochgeladen.
Eingebunden habe ich's im Template:

Hier klicken, um den Code zum Kopieren zu markieren

{literal}
<script src="modules/jQuery/jquery.js"></script>
<script src="modules/jQuery/plugins/jquery.cross-slide.min.js"></script>
<script type="text/javascript">$(function() {
$('#headcontent').crossSlide({
     sleep:3,
      fade: 2
    }, [{ src:  'images/header/bild01.jpg'},
{ src:  'images/header/bild02.jpg'},
{ src:  'images/header/bild03.jpg'},
{ src:  'images/header/bild04.jpg'},
{ src:  'images/header/bild05.jpg'},
{ src:  'images/header/bild06.jpg'},

        ]);
    });
</script>
{/literal}
</body>

Funktioniert hervorragend.

Das z-index hat's gebracht, Navigation und Sprachauswahl sind nun wieder zu sehen. Danke!

owr_web schrieb:

Wieso denn? bei mir ists z.b. dass er ja das erste Bildchen sowieso anzeigt, egal ob js oder nicht. Also wer kein js hat, hat halt nur ein Bildchen statt 12 lol

Bei mir ist nichts zu sehen. Wie hast Du's eingefügt, ist dein slider-DIV leer? Kann ja eigentlich nichts angezeigt werden wenn JS deaktiviert ist!?

cyberman schrieb:

Da sollte besucherfreundlicherweise noch ein <noscript> ... </noscript> mit den entsprechenden Infos rein.

mike-r schrieb:

@dylan: hast Du bei #headcontent auch eine Höhe eingestellt?

Wie's bei CrossSlide / How to use it beschrieben ist, width and height smile

Danke an alle!

dylan · 19. März 2011 10:58

dylan schrieb:

owr_web schrieb:
Wieso denn? bei mir ists z.b. dass er ja das erste Bildchen sowieso anzeigt, egal ob js oder nicht. Also wer kein js hat, hat halt nur ein Bildchen statt 12 lol
Bei mir ist nichts zu sehen. Wie hast Du's eingefügt, ist dein slider-DIV leer? Kann ja eigentlich nichts angezeigt werden wenn JS deaktiviert ist!?

Lösungen können manchmal so simpel sein:
What you put inside it in your HTML is only shown while the images are being preloaded, or if the user-agent has JavaScript turned off. The current version of CrossSlide waits until all the images are preloaded before starting the slideshow, so I usually put the first image as a background-image of the div, so that users with a slow connection won't see a big hole in the website while all the images are being loaded.

owr_web · 19. März 2011 18:38

ja die simplen Lösungen - ich bin auch nocht draufgekommen, warum man meist bei denen Stunden braucht bis man draufkommt big_smile

Ich habs halt (weil schon gefragt wurde) nicht als Hintergrundbild sondern als Bild selber gelöst:

Hier klicken, um den Code zum Kopieren zu markieren

<div id="startbild"><img src="Bildquelle" title="rotierendes Startbild" alt="Bild" />

Dieses lass ich beim rotieren auch gleich als erstes anzeigen. Bei schnellen Verbindungen ist die Wartezeit zum zweiten Bild fast gleich wie dann die Einstellungen, bei langsameren Verbindungen ist halt genau dieses ein wenig länger angezeigt. die anderen Bilder legen sich ja einfach über dieses drüber (einfach erklärt).

Forum für CMS/made simple

#1 18. März 2011 10:49

Bildwechsel Modul gesucht

#2 18. März 2011 10:56

Re: Bildwechsel Modul gesucht

#3 18. März 2011 11:04

Re: Bildwechsel Modul gesucht

#4 18. März 2011 11:26

Re: Bildwechsel Modul gesucht

#5 18. März 2011 13:21

Re: Bildwechsel Modul gesucht

#6 18. März 2011 13:49

Re: Bildwechsel Modul gesucht

#7 18. März 2011 13:51

Re: Bildwechsel Modul gesucht

#8 18. März 2011 13:53

Re: Bildwechsel Modul gesucht

#9 18. März 2011 14:00

Re: Bildwechsel Modul gesucht

#10 18. März 2011 14:03

Re: Bildwechsel Modul gesucht

#11 18. März 2011 14:13

Re: Bildwechsel Modul gesucht

#12 18. März 2011 14:30

Re: Bildwechsel Modul gesucht

#13 18. März 2011 15:45

Re: Bildwechsel Modul gesucht

#14 18. März 2011 15:50

Re: Bildwechsel Modul gesucht

#15 18. März 2011 16:59

Re: Bildwechsel Modul gesucht

#16 19. März 2011 10:58

Re: Bildwechsel Modul gesucht

#17 19. März 2011 18:38

Re: Bildwechsel Modul gesucht

Fußzeile des Forums