JQuery Karussell: Unterschied zwischen den Versionen

Aktuelle Version vom 12. Februar 2016, 15:14 Uhr

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 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

<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>

Script

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"));
	}
});