✔ jQuery Slideshow

L

Lohengrin

Grünschnabel
An die Fachleute!

Ich habe es jetzt endlich(!) geschafft in meine Website eine jquery-Slideshow, die ich im Internet gefunden habe, mit stundenlangem Tüfteln auf meine Bedürfnisse anzupassen. Nun brauche ich eine Slideshow (mit anderen Bildern – versteht sich) auf anderen Seiten ebenfalls. Leider stelle ich zu meiner Enttäuschung fest, daß das anscheinend nicht geht. Ich bekomme bei der 2. „Slideshow“ zwar die richtigen Bilder aber unten einen Scrollbalken (es handelt sich bei allen um horizontale Slideshows). Die Pfeile werden zwar schon als interaktiv angezeigt, aber sie funktionieren nicht. Kann mir jemand sagen, woran sowas liegen kann? Muß da eine Ergänzung in den jQuery-Code, den ich nicht kenne? Vielleicht noch ein Hinweis: Die Breite und Höhe der Einzelbilder sind zwar auf jeder Seite – also innerhalb einer(!) Slideshow gleich – jedoch von Slideshow zu Slideshow unterschiedlich.
Herzlichen Dank, wenn mir da jemand aus der Bedrouille helfen kann! (Bitte einfach erklären, ich habe noch keine Ahnung von jQ!)

Gruß
Lohengrin
 
Hi,

oder den Link zur funktionstüchtigen und problembehafteten Seite posten, damit wir deine "modifizierte" Slideshow direkt vor Augen haben.

mfg Maik
 
Hallo Crack und Maik vielen Dank dass ihr euch gemeldet habt!

1. Meine Website könnt ihr euch nicht anschauen, weil sie noch nicht im Netz steht
2. der relevante Quellcode sieht wie folgt aus (er ist natürlich von der funktionierenden Seite rüberkopiert):

<!-- Slideshow HTML -->
<div id="slideshow">
<span id="leftControl" class="control"<img src="bilder/schalterlinks.gif" alt="" width="11px" height="19px" /></span>
<div id="slidesContainer">
<div id="slideInner" style="width: 1800px;"><!-- Gesamtbreite aller Bilder -->
<div class="slide" style="float: left;" width="900px;"><img src="bilder/nim_01.jpg" alt="" title="Beispiel 1" width="900px" height="400px"</div>
<div class="slide" style="float: left;" width="900px;"><img src="bilder/nim_02.jpg" alt="" title="Beispiel 2" width="900px" height="400px"</div>
</div><!-- Ende slideInner -->
</div><!-- Ende slidesContainer -->
<span id="rightControl" class="control"<img src="bilder/schalterrechts.gif" alt="" width="11px" height="19px" /></span>
</div><!-- Ende Slideshow HTML -->

3. ich habe eben noch eine dritte Seite mit diesem Code für eine weitere Slideshow eingerichtet. Ergebnis: ebenfalls Scrollbalken unten. Was ist da wohl los?

Grüße aus Bayern
Lohengrin
 
Ist dein Problem, dass der Rollbalken angezeigt wird, oder die Tatsache, dass deine Slideshow nicht ganz angezeigt wird? Im ersten Fall musst du nur die Eigenschaft overflow:hidden an die entsprechende Stelle hinzufügen.
 
Hallo crack,

mein Problem ist, dass auf der 2. und 3. Seite die Rollbalken angezeigt werden und die Slideshow über Pfeile nicht mehr funktioniert (die slideshow klappt aber auf der 1. Seite wunderbar über Pfeile und ohne Scrollbalken!).
In meiner ccs-Anweisung auf der funktionierenden wie auf den nicht-funktionierenden Seiten steht overflow: auto.
Wenn ich, wie Du vorschlägst, auf der nicht-funktionierenden Seite overflow: hidden angebe, ist zwar der Scrollbalken weg, aber die Pfeile (obwohl am Monitor als aktiv sichtbar) arbeiten nicht, will heißen bringen also das 2. Bild nicht auf die Seite.

Gruß
Lohengrin
 
Hi,

wenn die Seiten online nicht erreichbar sind, solltest du hier den vollständigen Seitenquelltext (inkl. JS- u. CSS-Code), doch vor allem den der nicht-funktionierenden Variante zeigen, denn anhand deines HTML-Schnipsels lässt sich schwer etwas zur Ursache der aufgekommenen Probleme sagen.

mfg Maik
 
Mach ich ja gern, Maik!

Übrigens der jquery-code ist aus: http://sixrevisions.com/tutorials/j...-slick-and-accessible-slideshow-using-jquery/ (darf man das sagen? Ich glaube schon.)
(Einzige Modifikation meinerseits im jquery-code: siehe Kommentar im jquery-code unten: "Insert left and right arrow controls ..." Erst durch das Löschen des Inhalts:
$('#slideshow')
.prepend('<span class="control" id="leftControl">zurück</span>')
.append('<span class="control" id="rightControl">vor</span>');

habe ich keinen Links-Pfeil beim 1. Bild mehr (auf der funktionierenden Slideshow-Seite) aber das dürfte wohl mit meinem Problem nichts zu tun haben. Erwähne es nur der Ordnung halber.)

Also:

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" xml:lang="de" lang="de">
<head profile="http://gmpg.org/xfn/11">
	<title>Kiessling</title>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<link rel="stylesheet" href="stylesheet/arbeiten_nim.css" type="text/css" media="screen" />
	<script type="text/javascript" src="js/jquery-1.3.2.js">
	    <script type="text/javascript">
	$(document).ready(function(){
  var currentPosition = 0;
  var slideWidth = 900;<!-- pro Bild -->
  var slides = $('.slide');
  var numberOfSlides = slides.length;

  // Remove scrollbar in JS
  $('#slidesContainer').css('overflow', 'hidden');

  // Wrap all .slides with #slideInner div
  slides
  .wrapAll('<div id="slideInner"></div>')
  // Float left to display horizontally, readjust .slides width
  .css({
    'float' : 'left',
    'width' : slideWidth
  });

  // Set #slideInner width equal to total width of all slides
  $('#slideInner').css('width', slideWidth * numberOfSlides);

  // Insert left and right arrow controls in the DOM -> besser nicht!
 
    

  // Hide left arrow control on first load
  manageControls(currentPosition);

  // Create event listeners for .controls clicks
  $('.control').bind('click', function(){
    // Determine new position
      currentPosition = ($(this).attr('id')=='rightControl')
    ? currentPosition+1 : currentPosition-1;

      // Hide / show controls
      manageControls(currentPosition);
      // Move slideInner using margin-left
      $('#slideInner').animate({
        'marginLeft' : slideWidth*(-currentPosition)
      });
    });

  // manageControls: Hides and shows controls depending on currentPosition. if(pos... Anzahl der slides minus 1 
  function manageControls(position){
    // Hide left arrow if position is first slide
    if(position==0){ $('#leftControl').hide() }
    else{ $('#leftControl').show() }
    // Hide right arrow if position is last slide
    if(position==1){ $('#rightControl').hide() }
    else{ $('#rightControl').show() }
    }
  });
  </script>
	
</head>
<body><!-- XXXX -->
	<div id="wrapper">
		<div id="kopfbereich">
			<a href="index.html" title="zur Startseite"><img src="bilder/logo1.jpg" alt="" width="374px" height="40px" /><span>Logo</span></a>
			<ul id="navigation">
				<li><a href="ueberuns.html">Über uns</a></li>
				<li><a href="kompetenz.html">Kompetenz</a></li>				
				<li><a href="arbeiten.html" class="active">Arbeiten</a></li>
				<li><a href="aktuell.html">Neues</a></li>
				<li><a href="kontakt.html">Kontakt</a></li>			
			</ul>
		</div><!-- Ende kopfbereich -->
		<div class="trenner"><img src="bilder/blackpixel.gif" width="910px" height="1px" align="top" /></div>
		

<!-- Slideshow HTML -->
<div id="slideshow">
	<span id="leftControl" class="control"<img src="bilder/schalterlinks.gif" alt="" width="11px" height="19px" /></span>
		<div id="slidesContainer">
    		<div id="slideInner" style="width: 1800px;"><!-- Gesamtbreite aller Bilder -->
				<div class="slide" style="float: left;" width="900px;"><img src="bilder/nim_01.jpg" alt="" title="Beispiel 1" width="900px" height="400px"</div>
    			<div class="slide" style="float: left;" width="900px;"><img src="bilder/nim_02.jpg" alt="" title="Beispiel 2" width="900px" height="400px"</div>
    		</div><!-- Ende slideInner -->
  		</div><!-- Ende slidesContainer -->
	<span id="rightControl" class="control"<img src="bilder/schalterrechts.gif" alt="" width="11px" height="19px" /></span>
</div><!-- Ende Slideshow HTML -->
		

       <div id="fussbereich">
			<p><em>Kunde: </em><cite>NIM – Nano Initiative Munich</cite> <em>Projekt: </em><cite>Kalender weltweit für Fachkollegen und Institute, die sich mit Nano-Technologie beschäftigen. Das Konzept setzt organische und anorganische Strukturen des Hintergrunds mit Forschungsergebnissen im Vordergrund in Beziehung. Die Bilder der Titelblätter und teilweise die Hintergrundmotive hat das Büro konstruiert</cite></p>
			</div><!-- Ende fussbereich -->
	</div><!-- Ende wrapper -->
</body>
</html>


CSS: 
html {
	background: #fff url("maske1.png") top left no-repeat;
}
	
* {
	margin: 0px;
	padding: 0px;
}
body {
	background:FFFFFF;
	color: #000000; /*schwarz*/
	font-family: Verdana, Arial;
	font-size: 100.01%;
	text-align: center;/*Damit auch die div-Bereiche in der Mitte stehen; Mies S. 84*/
	}
#wrapper {
	width: 960px;
	text-align: left;
}
#kopfbereich {
	margin-top: 52px;
	width: 940px;
}
#kopfbereich a img {
 	border: none;
 	margin: 4px 0 4px 45px;
 }
 a span {
	display: none;
}
ul {
	float: right;
}
ul li {
	float: left;
	list-style-type: none;
	margin-left: 10px;
	
}
li a {
	text-decoration: none;
	font-size: 0.71em;
	text-align: center;
	letter-spacing: 0.06em;
	color: #87888a;/*= Grau der Navi*/
	text-transform: uppercase;
}


#navigation a {
	display: block;
	padding: 31px 12px 0px;
}
#navigation li a:hover {
	color: #000000;
}
#navigation li a.active {
	color: #000000;
}

.trenner {
	margin-left: 20px;
}
cite {
	color: #87888a;/*= Grau wie die Navi*/
}
/* Beginn slideshow */
.control {
	width: 12px;
  height: 20px;
  text-indent: 0px;
  position: absolute;
  cursor: pointer;
}
#leftControl {
  top: 110px;
  left: 705px;
}
#rightControl {
  top: 110px;
  right: 305px;
}
	
#slideshow #slidesContainer {
 top: 56px;
 left: 45px;
  width: 900px;
  height: 420px;
  overflow: hidden; /* allow scrollbar */
  position: relative;
}
/* Ende slideshow */

#fussbereich {
	margin:25px 0px 0px 487px;
	width: 440px;
	font-size: 0.78em;
	line-height: 1.4em;
	text-align: left;
	letter-spacing: 0.015em;
}
 
Zuletzt bearbeitet von einem Moderator:
Abgesehen davon, dass du die beiden öffnenden <span>-Tags, sowie die beiden <img>-Tags innerhalb von .slide nicht ordnungsgemäß mit der >-Klammer geschlossen hast, ist dies der Code der funktionstüchtigen Variante?

Ich frag nur, weil ich da in keinem Browser einen horizontalen Scrollbalken unter der Slideshow entdecke, und die beiden Steuerungbuttons soweit technisch einwandfrei funktionieren. Lediglich ihre Position im Viewport kommt mir etwas merkwürdig vor.

Lohengrin hat gesagt.:
(Einzige Modifikation meinerseits im jquery-code: siehe Kommentar im jquery-code unten: "Insert left and right arrow controls ..." Erst durch das Löschen des Inhalts:
$('#slideshow')
.prepend('<span class="control" id="leftControl">zurück</span>')
.append('<span class="control" id="rightControl">vor</span>');

habe ich keinen Links-Pfeil beim 1. Bild mehr
Zum Vergrößern anklicken....
Das ist trotz dieser Script-Zeilen auch im finalen Demo der Fall.

mfg Maik
 
Hallo Maik,

1. vielen Dank für den Klammer-Hinweis
2. da Du in meinen Codes auch keinen Grund für die Scrollbalken entdeckt hast, habe ich nochmal den jQuery- und den html-Code von der funktionierenden Seite auf zwei weitere Seiten mit Slideshows (die, wie ich schrieb nicht funktionierten, rüberkopiert, angepaßt wie gehabt und siehe es funktioniert. Web-Gestaltung hat doch was mit Schwarzer Kunst zu tun. DIe Sache ist dann erledigt. Danke für die Unterstützung, Maik.
 
Um antworten zu können musst du eingeloggt sein.

Neue Beiträge

Zurück