• Das Erstellen neuer Accounts wurde ausgesetzt. Bei berechtigtem Interesse bitte Kontaktaufnahme über die üblichen Wege. Beste Grüße der Admin

Slideshow Cycle2

hardyy

New member
Hallo,
mit Hilfe hier aus dem Forum habe ich die Slideshow Cycle2 in meine Homepage integriert.
Wie man so schön sagt, mit dem Essen kommt der Hunger, reicht mir die Basic-Funktion nicht mehr.
Die Diashow läuft bei mir in der oberen rechten Ecke und zeigt Titelbilder der Foto-Alben auf der Seite.

Mit der erweiterten Funktion Alt Captions könnte ich unter die Diabilder die Albenbezeichnungen mit einblenden und
mit Pause-on-hover die Diashow anhalten.
Läuft aber leider nicht!

Irgendwo im Script hat sich ein Fehler eingeschlichen und den finde ich leider nicht.

PHP:
<!--
++++++++++++++++++++++++ Slideshow - jquery.cycle2.js ++++++++++++++++++++++ 
-->
<script src="jquery.cycle2.min.js"></script> 
<script src="jQuery Cycle Plugin.js"></script>
<script src="jquery.cycle2.caption2.min.js"></script>
<script src="jquery.cycle2.center.min.js"></script>

<!-- Javascript Code zum Starten der Slideshow -->

<script type="text/javascript">
            $(document).ready(function() {
            
            $(".cycle-slideshow").cycle({
                    fx: 'fade'             
            });
});
</script> 
</head>

<!-- ************************************************ body ************************************************* -->
<body >

<?php
// Start der Slideshow
	echo "<div class='cycle-slideshow' data-cycle-pause-on-hover='true' data-cycle-caption-template='{{alt}}'>\n"; 
     
//Ausgabe der Arrays mit for-Schleife 
        for ($x=0;       
        $x < count($fotos)AND
        $x < count($beschreibung);
        $x++)
        {     
   	      echo "<img class='scale' src='$fotos[$x]' alt='$beschreibung[$x]'>\n";
        }
   	echo "</div>\n";
        //empty element for caption
   	echo "<div id='alt-caption' class='center'></div>";
?>

Die Diashow läuft einwandfrei aber es sind keine Beschreibungen zu sehen.
Unterdrücke ich die Fotos, werden die Albenbeschreibungen statt der Bilder an gleicher Stelle angezeigt.

Die Zeile für empty element for caption kann ich mir sparen, sie zeigt keine Wirkung.
Ebenso die Funktion pause-on-hover, die Diashow stoppt nicht.

Hat jemand Erfahrung mit der Diashow Cycle2 und den Zusatzfunktionen und kann evtl. bitte helfen?
 
Zuletzt bearbeitet:
Du musst genau nach Beschreibung vorgehen: Du hast dies data-cycle-caption="#alt-caption" vergessen. Wenn Du das einfügst, funktioniert es.
PS: Und pause on hover funktioniert bei mir einwandfrei.
 
Zuletzt bearbeitet:
Du musst genau nach Beschreibung vorgehen

Bin genau nach der Beschreibung vorgegangen, die Zeile #alt-caption ist nur beim Kopieren verlorengegangen.
Jetzt habe ich das Ganze aus dem PHP-Skript herausgenommen und nur in HTML ausprobiert.
Leider genau wie vorher.

Nachfolgend jetzt das HTML-Skript:
HTML:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
<title>Ohne_Titel_1</title>
<script type="text/javascript" src="jquery.min.js"></script> 
<!--
++++++++++++++++++++++++ Slideshow - jquery.cycle2.js ++++++++++++++++++++++ 
-->
<script src="jquery.cycle2.min.js"></script> 
<script src="jQuery Cycle Plugin.js"></script>
<script src="jquery.cycle2.caption2.min.js"></script>
<script src="jquery.cycle2.center.min.js"></script>

<!-- Javascript Code zum Starten der Slideshow -->

<script type="text/javascript">
            $(document).ready(function() {
            
            $(".cycle-slideshow").cycle({
                    fx: 'fade'             //Übergangseffekt
            });
});
</script> 

</head>

<body>
<!--  Start der Slideshow -->
		<div class='cycle-slideshow' 
		data-cycle-fx='scrollHorz' 
		data-cycle-timeout=2000 
		data-cycle-pause-on-hover='true' 
		data-cycle-caption='#alt-caption' 
		data-cycle-caption-template='{{alt}}'>
				
   		<img src='fotos/PIC_1f5f6ad9353816.JPG' alt='01- Bild 01'>
		<img src='fotos/PIC_a424ed4b353849.JPG' alt='02- Bild 02'>
		<img src='fotos/PIC_f490c742353987.JPG' alt='03- Bild 03'>
		<img src='fotos/PIC_42e77b63354063.JPG' alt='04- Bild 04'>
		
   		</div>
   		<div id='alt-caption' class='center'></div>

</body>

</html>

Die Zeile data-cycle-caption-template='{{alt}}' kann ich nicht nachvollziehen,
das Beschreibungs-div ist ja bereits mit '#alt-caption definiert.
Ich bin mit JS auf dem Kriegsfuß aber ich vermute, der Fehler liegt im Aufruf der Funktion im head-Bereich und da hakt es bei mir leider aus.
 
Hm, bei mir funktioniert die Caption einwandfrei. Dies hier sieht merkwürdig aus (Leerzeichen im Dateinamen): <script src="jQuery Cycle Plugin.js"></script> - am besten löschen.
Welche Version von jQuery benutzt Du denn?
Hast Du mal einen Blick in die Fehlerkonsole geworfen?
 
Dies hier sieht merkwürdig aus (Leerzeichen im Dateinamen): <script src="jQuery Cycle Plugin.js"></script> - am besten löschen.

Kleiner Fehler große Wirkung!
Hätte ich -zigmal ansehen können und trotzdem nicht gemerkt, daß hier Punkte fehlen.

Jetzt funktioniert alles bestens, auch in meinem PHP-Skript. Vielen Dank!

Das Löschen hat sich in der Funktion nicht bemerkbar gemacht, habe also weggelassen.
 
Jetzt funktioniert alles bestens, auch in meinem PHP-Skript. Vielen Dank!

Den nächsten Schritt hoffte ich selbständig zu bewältigen aber leider hänge ich schon wieder:

Wenn ich mit der Maus ein Bild berühre, bleibt die Slideshow erwartungsgemäß stehen.
Jetzt würde ich gerne das Bild anklicken um irgendwohin zu gelangen.

Mein Skript

PHP:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
<title>Ohne_Titel_1</title>
<script type="text/javascript" src="jquery.min.js"></script> 
<!--
++++++++++++++++++++++++ Slideshow - jquery.cycle2.js ++++++++++++++++++++++ 
-->
<link href="styles/cycle2.css" type="text/css" rel="stylesheet" />
<script src="jquery.cycle2.min.js"></script>  
<script src="jquery.cycle2.caption2.min.js"></script>
<script src="jquery.cycle2.center.min.js"></script>

<!-- Javascript Code zum Starten der Slideshow -->

<script type="text/javascript">
            $(document).ready(function() {
            
            $(".cycle-slideshow").cycle({
                    fx: 'fade'             //Übergangseffekt
            });
});
</script> 

</head>

<body>
<!--  Start der Slideshow -->
		<div class='cycle-slideshow'		
		 data-cycle-speedt=3000
		 data-cycle-pause-on-hover='true'
		 data-cycle-caption-plugin=caption2
 		>
		
		<div class="cycle-caption"></div> 
   		<div class="cycle-overlay"></div>
				
		<a href= 'http://localhost/Cityguide7-GB/index.php'><img src='fotos/PIC_1f5f6ad9353816.JPG' data-cycle-title='01- Bild 01' data-cycle-desc=''/></a>
		<a href= 'http://localhost/Cityguide7-GB/index.php'><img src='fotos/PIC_a424ed4b353849.JPG' data-cycle-title='02- Bild 02' data-cycle-desc=''/></a>
		<a href= 'http://localhost/Cityguide7-GB/index.php'><img src='fotos/PIC_f490c742353987.JPG' data-cycle-title='03- Bild 03' data-cycle-desc=''/></a>
		<a href= 'http://localhost/Cityguide7-GB/index.php'><img src='fotos/PIC_42e77b63354063.JPG' data-cycle-title='04- Bild 04' data-cycle-desc=''/></a>

   		</div>
   		  

</body>

</html>

Die Links funktionieren zwar
aber damit läuft die Slideshow leider nicht und alle Bilder erscheinen untereinander.

Habe ich hier einen Gedankenfehler oder geht es mit cycle2 nicht so, wie ich es mir vorstelle?
 
Die Beispiele unter Cycle2 Non-Image Slides habe ich ausprobiert.
Der Zusatz data-cycle-slides="> a"> bringt zwar den Link
aber dafür gehen leider die anderen Funktionen in meinem Skript verloren:
img class='scale' funktioniert nicht mehr
data-cycle-title wird nicht mehr angezeit, statt dessen steht als Titel nur "desc" im Bild
HTML:
		<div class='cycle-slideshow'		
		 data-cycle-speedt=3000
		 data-cycle-pause-on-hover='true'
		 data-cycle-caption-plugin=caption2
		 data-cycle-slides="> a">
 				
		<div class="cycle-caption"></div> 
   		<div class="cycle-overlay"></div>
   			
		<a href= 'http://localhost/Cityguide7-GB/index.php'><img class='scale' src='fotos/PIC_1f5f6ad9353816.JPG' data-cycle-title='01- Bild 01' data-cycle-desc=''/></a>		
		<a href= 'http://localhost/Cityguide7-GB/index.php'><img class='scale' src='fotos/PIC_a424ed4b353849.JPG' data-cycle-title='02- Bild 02' data-cycle-desc=''/></a>
		<a href= 'http://localhost/Cityguide7-GB/index.php'><img class='scale' src='fotos/PIC_f490c742353987.JPG' data-cycle-title='03- Bild 03' data-cycle-desc=''/></a>
		<a href= 'http://localhost/Cityguide7-GB/index.php'><img class='scale' src='fotos/PIC_42e77b63354063.JPG' data-cycle-title='04- Bild 04' data-cycle-desc=''/></a>
        </div>
Habe versucht auch den Zusatz data-cycle-slides="> div"> zusätlich einzufügen
und die Titel-Zeile entsprechend dem Beispiel abzuändern:
<div class="cycle-overlay">01- Bild 01</div>
hat aber nichts gebracht.
Ein Link und ein Titel und die Skalierbarkeit des Fotos scheinen sich auszuschließen.

Gibt es evtl. noch etwas was ich ausprobieren könnte?
 
Zuletzt bearbeitet:
Man muss nur die entspr. Attribute in das a-Tag übernehmen.

Leider weiß ich nicht wie Du das meinst.
Der HTML-Code in #8 entspricht doch genau dem Beispiel erweitert um data-cycle-slides='> a'.
In den a-Tag habe ich auch die title- und scale-Atribute übernommen, desc-Atribut ist ein leerer String.

Irgendwie stehe ich auf dem Schlauch. Danke für Deine Geduld.
 
In den a-Tag habe ich auch die title- und scale-Atribute übernommen
Genau das habe ich gemeint und damit hat es bei mir funktioniert. Poste doch mal deinen gesamten Code oder lade es hoch und poste den Link.
Leider verstehe ich nicht, was es mit der Klasse "scale" auf sich hat. Bei Cycle2 habe ich dazu nichts gefunden. Verwendest Du da noch ein anderes Skript? Bei Cycle2 schreiben sie, dass das Plugin responsive ist. Ich würde versuchen, die Skalierung mit den Mitteln von Cycle2 hinzubekommen bzw. das erst Mal zurückzustellen und Links/Captions zum Laufen zu bekommen.
 
Das komplette PHP-Skript wäre zu unübersichtlich. Mir würde es genügen, wenn es in diesem HTML-Skript läuft. Das Einbinden in PHP ist dann kein Problem.

Mit diesem Code läuft alles OK. Sobald ich versuche den a-Tag einzubinden, habe ich das Problem mit der Bezeichnung.
HTML:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
<title>Ohne_Titel_1</title>
<script type="text/javascript" src="jquery.min.js"></script> 
<!--
++++++++++++++++++++++++ Slideshow - jquery.cycle2.js ++++++++++++++++++++++ 
-->
<link href="styles/cycle2.css" type="text/css" rel="stylesheet" />
<script src="jquery.cycle2.min.js"></script>  
<script src="jquery.cycle2.caption2.min.js"></script>
<script src="jquery.cycle2.center.min.js"></script>

<!-- Javascript Code zum Starten der Slideshow -->

<script type="text/javascript">
            $(document).ready(function() {
            
            $(".cycle-slideshow").cycle({
                    fx: 'fade'             //Übergangseffekt
            });
});
</script> 

</head>

<body>


<div id="slideshow">

<!--  Start der Slideshow -->
		<div class='cycle-slideshow'		
		 data-cycle-speedt=3000
		 data-cycle-pause-on-hover='true'
		 data-cycle-caption-plugin=caption2
 		>
		
		<div class='cycle-caption'></div> 
   		<div class='cycle-overlay'></div>
				
		<img src='fotos/PIC_1f5f6ad9353816.JPG' data-cycle-title='01- Bild 01' data-cycle-desc=''/>
		<img src='fotos/PIC_a424ed4b353849.JPG' data-cycle-title='02- Bild 02' data-cycle-desc=''/>
		<img src='fotos/PIC_f490c742353987.JPG' data-cycle-title='03- Bild 03' data-cycle-desc=''/>
		<img src='fotos/PIC_42e77b63354063.JPG' data-cycle-title='04- Bild 04' data-cycle-desc=''/>

   		</div>
  		  
</div>
</body>

</html>

und der CSS-Code:
Code:
#slideshow {
    display:block;
    overflow:hidden;
	padding:0%;
	margin-left:2%;
    max-height:290px;
	width:750px;
    border: solid 1px #800000;*/ 
}

/* caption */
.cycle-caption { 
	position: absolute;   
	font-size: small;
	font-weight:bold; 
	color: yellow; 
	bottom: 3px; right: 3px; z-index: 700; 
	}


/* overlay */
.cycle-overlay { 
	position: absolute;
    font-size: small;
    font-weight:bold;
    text-align: right;
    color: black;
    top: 3px; right:3px;  z-index: 600;
    background: white;  padding: 2px; opacity: 0.7; 
	}

Wenn es Dich interessiert wie die komplette Seite (noch nicht fertig!) aussieht, kannst Du hier sehen:CZ-Prag

Unter Ansichten ein Thema anwählen und dann auf der nächsten Seite im Stadtplan oder unterhalb der Beschreibung oder in der Slideshow in der oberen rechten Ecke ein Album anklicken.
 
Wenn ich es so umändere, funktioniert es einwandfrei, natürlich mit meinen eigenen Links und Bildern:
Code:
<div id="slideshow">
<!--  Start der Slideshow -->
		<div class='cycle-slideshow'		
		 data-cycle-speedt=2000
		 data-cycle-pause-on-hover='true'
		 data-cycle-caption-plugin=caption2
         data-cycle-slides="> a"
 		>
		
		<div class='cycle-caption'></div> 
   		<div class='cycle-overlay'></div>
				
		<a href="home.html" data-cycle-title='01- Bild 01' data-cycle-desc=''><img src='bilder/1.jpg'></a>
		<a href="kontakt.html" data-cycle-title='02- Bild 02' data-cycle-desc=''><img src='bilder/2.jpg'></a>
		<a href="neu.html" data-cycle-title='03- Bild 03' data-cycle-desc=''><img src='bilder/3.jpg'></a>

   		</div>
  		  
</div>

- - - Aktualisiert - - -

PS: Sehr schöne Seiten, Respekt. Kommt mir bekannt vor, wahrscheinlich hattest Du im Zusammenhang mit dieser Site früher schon mal einen anderen Thread.
 
PS: Sehr schöne Seiten, Respekt. Kommt mir bekannt vor, wahrscheinlich hattest Du im Zusammenhang mit dieser Site früher schon mal einen anderen Thread.

Der Fehler war, daß ich data-cycle-title='03- Bild 03' data-cycle-desc='' in den img-Tag eingebunden und immer wieder darüber hinweg gesehen habe.

Vielen Dank für die Unterstützung und viel Geduld!
Jetzt funktioniert alles einwandfrei, so wie ich es mir vorgestellt habe.

Vor 2 Jahren hast Du mir bereits bei der FancyBox geholfen, deswegen kommt Dir meine Seite bekannt vor. So lange bastle ich schon an der Site herum, aber jetzt geht die meiste Zeit nur noch drauf, die Site mit Inhalt zu füllen. Alles andere sind nur "Schönheits"-Reparaturen und Ergänzungen.

Gruß Hardy
 
Zurück
Oben