Quelltext der Seite JQuery Karussell

[[Kategorie:Snippets_(Javascript),Rapid_Data_(Galerien)]]
== Einleitung ==
Rapid Data benutzt in ihren Layouts oft ein Karussel in dem drei Bilder nebeneinander Dargestellt werden, wobei das zentrierte größer ist als die äußeren.
Dies lässt sich sehr gut mit dem [http://www.bkosborne.com/jquery-waterwheel-carousel WaterwheelCarousel] umsetzen.

== Benutzung ==
Es wird die standard Galerie von Contao benutzt. Dazu müssen wir das Template anpassen und die benötigten Scripte einbinden.

Falls benötigt kann in den Meta-Einstellungen der Bilder noch ein Titel oder die Bildunterschrift angegeben werden. Je nach Bedarf sind dann im HTML-Markup die Klassen ''carousel-heading'', ''carousel-description'' oder ''carousel-menu'' zu setzen. Ggf. muss dieser Teil des Scripts angepasst werden.

=== Tempalte ===
Dateiname: gallery_waterwheelCarousel.html5

 <nowiki><div id="carousel">
  <?php $imgCount = 0; ?>
  <?php foreach ($this->body as $class=>$row): ?>
    <?php foreach ($row as $col): ?>
      <?php $imgCount++; ?>
      <?php if ($col->addImage): ?>
        <img src="<?php echo $col->src; ?>"<?php echo $col->imgSize; ?> title="<?php echo $col->alt; ?>" alt="<?php echo $col->caption; ?>">
      <?php endif; ?>
    <?php endforeach; ?>
  <?php endforeach; ?>
  <a class="carousel-next" href="#"><i class="fa fa-chevron-right"></i></a>
  <a class="carousel-prev" href="#"><i class="fa fa-chevron-left"></i></a>
</div></nowiki>
=== Script ===
 <nowiki>jQuery(document).ready(function($) {
	
	// Waterwheel carousel
	var options = {
		flankingItems: 2,
		separation: 100,
		startingItem: 1,
		opacityMultiplier: 1,
		preloadImages: false,
		movedToCenter: function($newCenter) {
			$(".carousel-heading").text($newCenter.attr("title"));
			$(".carousel-description").text($newCenter.attr("alt"));
		}
	}
	
	showDescription();
	$("#carousel img").each(function(index) {
		$(".carousel-menu").append('<li><a href="#" data-slide="'+ (index+1) +'">' + $(this).attr("title") + '</a></li>');
	});
	
	// Initialize the carousel with options above
	var carousel = $("#carousel").waterwheelCarousel(options);
	
	$(".carousel-menu a").click(function(e) {
		e.preventDefault();
		var index = parseInt($(this).attr("data-slide"));
		options.startingItem = index;
		carousel.reload(options);
		showDescription();
	});
        $(".carousel-next").click(function(e) {
		e.preventDefault();
                carousel.next();
	});
	$(".carousel-prev").click(function(e) {
		e.preventDefault();
                carousel.prev();
	});
	
	function showDescription() {
		var index = options.startingItem;
		var $sourceItem = $("#carousel img:nth-child("+ index +")");
		$(".carousel-heading").text($sourceItem.attr("title"));
		$(".carousel-description").text($sourceItem.attr("alt"));
	}
});</nowiki>