Caroufredsel und thumbnails (contao3)

**tamague** · 26.12.2012, 14:08

Hallo,
ich schaffe es mit meinen überaus bescheidenen php Kenntnissen einfach nicht , bei der pagination des Sliders Caroufredsel statt der Nummerierung von 1...* die entsprechenden thumbnails anzeigen zu lassen . Weiß jemand eine einfache Lösung ?

**Dirch** · 26.12.2012, 20:32

Zitat von tamague

Hallo,
ich schaffe es mit meinen überaus bescheidenen php Kenntnissen einfach nicht , bei der pagination des Sliders Caroufredsel statt der Nummerierung von 1...* die entsprechenden thumbnails anzeigen zu lassen . Weiß jemand eine einfache Lösung ?

Hallo hallo,

hattest du das schon in dem anderen Thread dazu gelesen? Von Haus aus sind keine Thumbnails eingebaut, da es ein Inhalts-Slider und kein reiner Bild-Slider ist. Man kann die Funktionalität allerdings recht einfach selbst einbauen.

Genau das hier muß ins Template:

PHP-Code:


    echo ($iComma == true ? ', ' : '') . 'anchorBuilder: function(nr) {';

?>

            var src = $("img", this).attr( "src" );

            src = src.replace( "/large/", "/small/");

            return '<img src="' + src + '" />';

<?php

        echo '}';

und zwar direkt nach diesem Code-Fragment:

PHP-Code:


    if ($this->paginationKeys) {

        echo ($iComma == true ? ', ' : '') . $this->paginationKeys;

        $iComma = true;

    }

Es ist so gemacht, daß die großen Bilder in einem Ordner large liegen und die kleinen mit gleichen Namen in small. Ist sozusagen der gleiche Code wie aus seinem Beispiel.

Grüße...
...Dirk

**tamague** · 26.12.2012, 23:42

Danke für die schnelle Hilfe,werde ich morgen gleich nochmal versuchen

**Doro** · 20.03.2013, 08:01

ich hänge mich hier mal mit dran, das interessiert mich auch,
@Dirch Du sprichst hier von dem "ce_caroufredsel.html5" template, richtig?

Da kann ich aber das angebene Code_Fragment nicht finden?
oder bin ich blind?
Gruß Doro

**Doro** · 20.03.2013, 09:21

gefunden es war natürlich das js_caroufredsel.html5 template

**Dirch** · 20.03.2013, 12:27

Zitat von Doro

gefunden es war natürlich das js_caroufredsel.html5 template

Hallo Doro,

hat es denn so geklappt? Die Templates haben sich seit dem ein wenig geändert und die Stelle sieht möglicherweise nicht mehr genau so aus.

Viele Grüße...
...Dirk

**Doro** · 20.03.2013, 13:17

ja

Danke Dirk es hat geklappt,
ich würde ja gerne auf Beispiel 28 hinaus mit vertiakler Thumbnailleiste, die wiederum gescrolled werden kann, dahin komme ich so wohl nicht.
Ich habe soweit meine vertikale thumbleiste schon zum Laufen gebracht, (offline, deshalb kann ich's nicht demonstrieren)
und per overflow:hidden; auf die gewünschte Höhe gebracht, weiter komme ich aber wohl nicht ohne weitere Änderungen am Template
um die Thumbs durchzuscrollen, oder?

herzl. Gruß Doro

**Dirch** · 20.03.2013, 13:59

Zitat von Doro

ja

Danke Dirk es hat geklappt,
ich würde ja gerne auf Beispiel 28 hinaus mit vertiakler Thumbnailleiste, die wiederum gescrolled werden kann, dahin komme ich so wohl nicht.
Ich habe soweit meine vertikale thumbleiste schon zum Laufen gebracht, (offline, deshalb kann ich's nicht demonstrieren)
und per overflow:hidden; auf die gewünschte Höhe gebracht, weiter komme ich aber wohl nicht ohne weitere Änderungen am Template
um die Thumbs durchzuscrollen, oder?

herzl. Gruß Doro

Leider nicht. Dadurch, daß es ein Inhalts-Slider ist, ist so eine Funktion nicht im Slider selbst integriert. Für die Thumbnails bräuchtest du daher einen weiteren Slider, der mit dem ersten über Click-Events verknüpft wird.

Ich habe aber auch eine Lösung für dieses Thema: eine implementierte carouFredsSel-Galerie, die genau das macht. Weil sie noch im Beta-Status ist, ist sie jedoch noch nicht im ER. Die würde dir eine Menge arbeit abnehmen.

Beste Grüße...
...Dirk

***Nina*** · 21.03.2013, 08:11

Hallo Dirk,

kannst du mir bitte sagen, wie ich im Falle der Thumbnails das Template anpassen muss, damit dort dann statt der üblichen Rahmenklasse .caroufredsel_pagi die Klasse .caroufredsel_pagi_thumb kommt?

Ich setze zwei verschiedene js_caroufredsel ein (einmal das Original, einmal mit den Thumbnails) und möchte, dass nur bei der Variante mit den Thumbnails die alternative Klasse kommt, da ich dann daran unterschiedlich stylen kann. Die fixe #ID für die Paginations bringt mir in dem Fall nichts, da das Caroufredsel auf der Website x-mal eingesetzt wird und ich nicht jedes Mal im Nachhinein die ID rauskramen kann, sobald die Redakteure mal ein neues Caroufredsel eingebaut haben

Danke,
Nina

**Dirch** · 21.03.2013, 10:27

Zitat von Nina

kannst du mir bitte sagen, wie ich im Falle der Thumbnails das Template anpassen muss, damit dort dann statt der üblichen Rahmenklasse .caroufredsel_pagi die Klasse .caroufredsel_pagi_thumb kommt?

Hallo Nina,

diese Daten kannst du im ce_caroufredsel-Template anpassen. Dort ist die ganze Ausgabe-Struktur hinterlegt und kann nach belieben angepaßt werden.

Ich kann mir zwar gerade nicht so ganz vorstellen wie du das gebastelt hast, aber das ist glaube ich auch unerheblich.

Vielleicht sollte ich das neue CE, an dem ich arbeite doch zu Geld machen. ;D

Liebe Grüße...
...Dirk

***Nina*** · 26.03.2013, 14:44

Ich glaube, du hast mich missverstanden.

Ich habe folgenden Aufbau:
Im Templates-Ordner liegen zwei Templates:

js_caroufredsel.html5

Code:

<script>
(function($) {
<?php if ($this->triggerMode == 'onWindowLoad'): ?>
	$(document).ready(function() {
		$("#caroufredsel_skin_<?php echo $this->id; ?>").css('visibility', 'hidden');
	});
	$(window).load(function() {
		$("#caroufredsel_skin_<?php echo $this->id; ?>").css('visibility', 'visible');
	});
	$(window).load(function() {
<?php elseif ($this->triggerMode == 'readyLoad'): ?>
	$.readyLoad(function() {
<?php else: ?>
	$(document).ready(function() {
<?php endif; ?>
	    $("#caroufredsel_<?php echo $this->id; ?>").carouFredSel({
<?php
	$oComma = $iComma = false; // o(uter)/i(nner) comma after option needed?

	// global options
	if ($this->carouselType) {		
		echo ($oComma == true ? ', ' : '') . $this->carouselType;
		$oComma = true;
	}
	if ($this->responsive) {
		echo ($oComma == true ? ', ' : '') . $this->responsive;
		$oComma = true;
	}
	if ($this->direction) {
		echo ($oComma == true ? ', ' : '') . $this->direction;
		$oComma = true;
	}
	if ($this->width) {
		echo ($oComma == true ? ', ' : '') . $this->width;
		$oComma = true;
	}
	if ($this->height) {
		echo ($oComma == true ? ', ' : '') . $this->height;
		$oComma = true;
	}
	if ($this->align) {
		echo ($oComma == true ? ', ' : '') . $this->align;
		$oComma = true;
	}
	if ($this->padding) {
		echo ($oComma == true ? ', ' : '') . $this->padding;
		$oComma = true;
	}
	if ($this->cookie) {
		echo ($oComma == true ? ', ' : '') . $this->cookie;
		$oComma = true;
	}
	// function called once at creation of carousel
	echo ($oComma == true ? ', ' : '') . 'onCreate: function(data) { data.items.addClass("visible");';
	// --> your code here <--
	echo ' }'; // end of 'onCreate'
	$oComma = true;

	// subobject 'items' options
	if ($this->itemsVisible || $this->itemsStart || $this->itemsWidth || $this->itemsHeight) {
		echo ($oComma == true ? ', ' : '') . 'items: { ';
		if ($this->itemsVisible) {
			echo ($iComma == true ? ', ' : '') . $this->itemsVisible;
			$iComma = true;
		}
		if ($this->itemsStart) {
			echo ($iComma == true ? ', ' : '') . $this->itemsStart;
			$iComma = true;
		}
		if ($this->itemsWidth) {
			echo ($iComma == true ? ', ' : '') . $this->itemsWidth;
			$iComma = true;
		}
		if ($this->itemsHeight) {
			echo ($iComma == true ? ', ' : '') . $this->itemsHeight;
			$iComma = true;
		}
		echo ' }'; // end of subobject 'items' options
		$iComma = false; // reset inside subobject comma flag
		$oComma = true;
	}

	// subobject 'scroll' options
	echo ($oComma == true ? ', ' : '') . 'scroll: { ';
	if ($this->scrollItems) {
		echo ($iComma == true ? ', ' : '') . $this->scrollItems;
		$iComma = true;
	}
	if ($this->scrollFx) {
		echo ($iComma == true ? ', ' : '') . $this->scrollFx;
		$iComma = true;
	}
	if ($this->scrollEasing) {
		echo ($iComma == true ? ', ' : '') . $this->scrollEasing;
		$iComma = true;
	}
	if ($this->scrollDuration) {
		echo ($iComma == true ? ', ' : '') . $this->scrollDuration;
		$iComma = true;
	}
	if ($this->scrollPauseOnHover) {
		echo ($iComma == true ? ', ' : '') . $this->scrollPauseOnHover;
		$iComma = true;
	}
//	echo ($iComma == true ? ', ' : '') . 'conditions: function(direction) { }';
	// function called every time before scrolling occurs
	echo ($iComma == true ? ', ' : '') . 'onBefore: function(data) { data.items.old.removeClass("visible");';
	if (!$this->autoPlay && $this->autoProgress == 'pie') {
		echo ' $().hideProgressBar("caroufredsel_bar_wrapper_' . $this->id . '");';
	}
	// --> your code here <--
	echo ' }'; // end of 'onBefore'
	$iComma = true;
	// function called every time after scrolling occurred
	echo ($iComma == true ? ', ' : '') . 'onAfter: function(data) { data.items.visible.addClass("visible");';
	if (!$this->autoPlay && $this->autoProgress == 'pie') {
		echo ' $().initProgressBar("caroufredsel_bar_' . $this->id . '", { barBackgroundColor: progressBarBackgroundColor_' . $this->id . ' });';
	}
	// --> your code here <--
	echo ' }'; // end of 'onAfter'
	$iComma = true;
	echo ' }'; // end of subobject 'scroll' options
	$iComma = false; // reset inside subobject comma flag
	$oComma = true;

	// subobject 'auto' options
	if (!$this->autoPlay) {
		if ($this->autoButton || $this->autoTimeoutDuration || $this->autoDelay || $this->autoProgress) {
			echo ($oComma == true ? ', ' : '') . 'auto: { ';
			if ($this->autoButton) {
				echo ($iComma == true ? ', ' : '') . 'button: "#caroufredsel_button_' . $this->id . '"';
				$iComma = true;
			}
			if ($this->autoTimeoutDuration) {
				echo ($iComma == true ? ', ' : '') . $this->autoTimeoutDuration;
				$iComma = true;
			}
			if ($this->autoDelay) {
				echo ($iComma == true ? ', ' : '') . $this->autoDelay;
				$iComma = true;
			}
			if ($this->autoProgress) {
				echo ($iComma == true ? ', ' : '') . 'progress: { ';
				echo 'bar: "#caroufredsel_bar_' . $this->id . '"';
				if ($this->autoProgress == 'pie') {
					echo ', updater: function(percentage) { $().updateProgressBar("caroufredsel_bar_' . $this->id . '", { barColor: progressBarColor_' . $this->id . ' }, percentage); }';
				}
				if ($this->autoProgressInterval) {
					echo ', ' . $this->autoProgressInterval;
				}
				echo ' }';
				$iComma = true;
			}
//			echo ($iComma == true ? ', ' : '') . 'conditions: function(direction) { }';
//			echo ($iComma == true ? ', ' : '') . 'onBefore: function(data) { }';
//			echo ($iComma == true ? ', ' : '') . 'onAfter: function(data) { }';
//			echo ($iComma == true ? ', ' : '') . 'onEnd: function(direction) { }';
//			echo ($iComma == true ? ', ' : '') . 'onTimeoutStart: function(percentage, duration) { }';
			if ($this->autoProgress == 'pie') {
				echo ($iComma == true ? ', ' : '') . 'onTimeoutStart: function(percentage, duration) { $().initProgressBar("caroufredsel_bar_' . $this->id . '", { barBackgroundColor: progressBarBackgroundColor_' . $this->id . ' }); $().showProgressBar("caroufredsel_bar_wrapper_' . $this->id . '"); }';
			}
//			echo ($iComma == true ? ', ' : '') . 'onTimeoutEnd: function(percentage, duration) { }';
//			echo ($iComma == true ? ', ' : '') . 'onTimeoutPause: function(percentage, duration) { }';
			if ($this->autoProgress == 'pie') {
				echo ($iComma == true ? ', ' : '') . 'onTimeoutPause: function(percentage, duration) { $().hideProgressBar("caroufredsel_bar_wrapper_' . $this->id . '"); }';
			}
			echo ' }'; // end of subobject 'auto' options
			$iComma = false; // reset inside subobject comma flag
			$oComma = true;
		}
	} else {
		echo ($oComma == true ? ', ' : '') . $this->autoPlay;
		$oComma = true;
	}

	// subobject 'prev' options
	if ($this->navigation || $this->prevKey) {
		echo ($oComma == true ? ', ' : '') . 'prev: { ';
		if ($this->navigation) {
			echo 'button: "#caroufredsel_prev_' . $this->id . '"';
			$iComma = true;
		}
		if ($this->prevKey) {
			echo ($iComma == true ? ', ' : '') . $this->prevKey;
			$iComma = true;
		}
//		echo ($iComma == true ? ', ' : '') . 'conditions: function(direction) { }';
//		echo ($iComma == true ? ', ' : '') . 'onBefore: function(data) { }';
//		echo ($iComma == true ? ', ' : '') . 'onAfter: function(data) { }';
//		echo ($iComma == true ? ', ' : '') . 'onEnd: function(direction) { }';
		echo ' }';
		$iComma = false; // reset inside subobject comma flag
		$oComma = true;
	}

	// subobject 'next' options
	if ($this->navigation || $this->nextKey) {
		echo ($oComma == true ? ', ' : '') . 'next: { ';
		if ($this->navigation) {
			echo 'button: "#caroufredsel_next_' . $this->id . '"';
			$iComma = true;
		}
		if ($this->nextKey) {
			echo ($iComma == true ? ', ' : '') . $this->nextKey;
			$iComma = true;
		}
		echo ' }';
//		echo ($iComma == true ? ', ' : '') . 'conditions: function(direction) { }';
//		echo ($iComma == true ? ', ' : '') . 'onBefore: function(data) { }';
//		echo ($iComma == true ? ', ' : '') . 'onAfter: function(data) { }';
//		echo ($iComma == true ? ', ' : '') . 'onEnd: function(direction) { }';
		$iComma = false; // reset inside subobject comma flag
		$oComma = true;
	}

	// subobject 'pagination' options
	if ($this->pagination) {
		echo ($oComma == true ? ', ' : '') . 'pagination: { ';
		echo 'container: "#caroufredsel_pagi_' . $this->id . '"';
		$iComma = true;
		if ($this->paginationKeys) {
			echo ($iComma == true ? ', ' : '') . $this->paginationKeys;
			$iComma = true;
		}
//		echo ($iComma == true ? ', ' : '') . 'anchorBuilder: function(nr) { }';
//		echo ($iComma == true ? ', ' : '') . 'conditions: function(direction) { }';
//		echo ($iComma == true ? ', ' : '') . 'onBefore: function(data) { }';
//		echo ($iComma == true ? ', ' : '') . 'onAfter: function(data) { }';
//		echo ($iComma == true ? ', ' : '') . 'onEnd: function(direction) { }';
		echo ' }';
		$iComma = false; // reset inside subobject comma flag
		$oComma = true;
	}

	// subobject 'swipe' options
	if ($this->swipeOnTouch || $this->swipeOnMouse) {
		echo ($oComma == true ? ', ' : '') . 'swipe: { ';
		if ($this->swipeOnTouch) {
			echo ($iComma == true ? ', ' : '') . $this->swipeOnTouch;
			$iComma = true;
		}
		if ($this->swipeOnMouse) {
			echo ($iComma == true ? ', ' : '') . $this->swipeOnMouse;
			$iComma = true;
		}
//		echo ($iComma == true ? ', ' : '') . 'conditions: function(direction) { }';
//		echo ($iComma == true ? ', ' : '') . 'onBefore: function(data) { }';
//		echo ($iComma == true ? ', ' : '') . 'onAfter: function(data) { }';
//		echo ($iComma == true ? ', ' : '') . 'onEnd: function(direction) { }';
		echo ' }';
		$iComma = false; // reset inside subobject comma flag
		$oComma = true;
	}

	// subobject 'mousewheel' options
	if ($this->mousewheel) {
		echo ($oComma == true ? ', ' : '') . $this->mousewheel;
		$oComma = true;
	}

	echo ' }, { ';
	$oComma = $iComma = false; // o(uter)/i(nner) comma after option needed?

	if ($this->debug) {		
		echo ($oComma == true ? ', ' : '') . $this->debug;
		$oComma = true;
	}

	echo ($oComma == true ? ', ' : '') . 'wrapper: { classname: "caroufedsel_wrapper caroufredsel_wrapper_' . $this->id . '" }';
	$oComma = true;

	echo ' }';
?>
		);
	});
})(jQuery);
</script>

js_caroufredsel_thumbnail.html5

Code:

<script>
(function($) {
<?php if ($this->triggerMode == 'onWindowLoad'): ?>
	$(document).ready(function() {
		$("#caroufredsel_skin_<?php echo $this->id; ?>").css('visibility', 'hidden');
	});
	$(window).load(function() {
		$("#caroufredsel_skin_<?php echo $this->id; ?>").css('visibility', 'visible');
	});
	$(window).load(function() {
<?php elseif ($this->triggerMode == 'readyLoad'): ?>
	$.readyLoad(function() {
<?php else: ?>
	$(document).ready(function() {
<?php endif; ?>
	    $("#caroufredsel_<?php echo $this->id; ?>").carouFredSel({
<?php
	$oComma = $iComma = false; // o(uter)/i(nner) comma after option needed?

	// global options
	if ($this->carouselType) {		
		echo ($oComma == true ? ', ' : '') . $this->carouselType;
		$oComma = true;
	}
	if ($this->responsive) {
		echo ($oComma == true ? ', ' : '') . $this->responsive;
		$oComma = true;
	}
	if ($this->direction) {
		echo ($oComma == true ? ', ' : '') . $this->direction;
		$oComma = true;
	}
	if ($this->width) {
		echo ($oComma == true ? ', ' : '') . $this->width;
		$oComma = true;
	}
	if ($this->height) {
		echo ($oComma == true ? ', ' : '') . $this->height;
		$oComma = true;
	}
	if ($this->align) {
		echo ($oComma == true ? ', ' : '') . $this->align;
		$oComma = true;
	}
	if ($this->padding) {
		echo ($oComma == true ? ', ' : '') . $this->padding;
		$oComma = true;
	}
	if ($this->cookie) {
		echo ($oComma == true ? ', ' : '') . $this->cookie;
		$oComma = true;
	}
	// function called once at creation of carousel
	echo ($oComma == true ? ', ' : '') . 'onCreate: function(data) { data.items.addClass("visible");';
	// --> your code here <--
	echo ' }'; // end of 'onCreate'
	$oComma = true;

	// subobject 'items' options
	if ($this->itemsVisible || $this->itemsStart || $this->itemsWidth || $this->itemsHeight) {
		echo ($oComma == true ? ', ' : '') . 'items: { ';
		if ($this->itemsVisible) {
			echo ($iComma == true ? ', ' : '') . $this->itemsVisible;
			$iComma = true;
		}
		if ($this->itemsStart) {
			echo ($iComma == true ? ', ' : '') . $this->itemsStart;
			$iComma = true;
		}
		if ($this->itemsWidth) {
			echo ($iComma == true ? ', ' : '') . $this->itemsWidth;
			$iComma = true;
		}
		if ($this->itemsHeight) {
			echo ($iComma == true ? ', ' : '') . $this->itemsHeight;
			$iComma = true;
		}
		echo ' }'; // end of subobject 'items' options
		$iComma = false; // reset inside subobject comma flag
		$oComma = true;
	}

	// subobject 'scroll' options
	echo ($oComma == true ? ', ' : '') . 'scroll: { ';
	if ($this->scrollItems) {
		echo ($iComma == true ? ', ' : '') . $this->scrollItems;
		$iComma = true;
	}
	if ($this->scrollFx) {
		echo ($iComma == true ? ', ' : '') . $this->scrollFx;
		$iComma = true;
	}
	if ($this->scrollEasing) {
		echo ($iComma == true ? ', ' : '') . $this->scrollEasing;
		$iComma = true;
	}
	if ($this->scrollDuration) {
		echo ($iComma == true ? ', ' : '') . $this->scrollDuration;
		$iComma = true;
	}
	if ($this->scrollPauseOnHover) {
		echo ($iComma == true ? ', ' : '') . $this->scrollPauseOnHover;
		$iComma = true;
	}
//	echo ($iComma == true ? ', ' : '') . 'conditions: function(direction) { }';
	// function called every time before scrolling occurs
	echo ($iComma == true ? ', ' : '') . 'onBefore: function(data) { data.items.old.removeClass("visible");';
	if (!$this->autoPlay && $this->autoProgress == 'pie') {
		echo ' $().hideProgressBar("caroufredsel_bar_wrapper_' . $this->id . '");';
	}
	// --> your code here <--
	echo ' }'; // end of 'onBefore'
	$iComma = true;
	// function called every time after scrolling occurred
	echo ($iComma == true ? ', ' : '') . 'onAfter: function(data) { data.items.visible.addClass("visible");';
	if (!$this->autoPlay && $this->autoProgress == 'pie') {
		echo ' $().initProgressBar("caroufredsel_bar_' . $this->id . '", { barBackgroundColor: progressBarBackgroundColor_' . $this->id . ' 

});';
	}
	// --> your code here <--
	echo ' }'; // end of 'onAfter'
	$iComma = true;
	echo ' }'; // end of subobject 'scroll' options
	$iComma = false; // reset inside subobject comma flag
	$oComma = true;

	// subobject 'auto' options
	if (!$this->autoPlay) {
		if ($this->autoButton || $this->autoTimeoutDuration || $this->autoDelay || $this->autoProgress) {
			echo ($oComma == true ? ', ' : '') . 'auto: { ';
			if ($this->autoButton) {
				echo ($iComma == true ? ', ' : '') . 'button: "#caroufredsel_button_' . $this->id . '"';
				$iComma = true;
			}
			if ($this->autoTimeoutDuration) {
				echo ($iComma == true ? ', ' : '') . $this->autoTimeoutDuration;
				$iComma = true;
			}
			if ($this->autoDelay) {
				echo ($iComma == true ? ', ' : '') . $this->autoDelay;
				$iComma = true;
			}
			if ($this->autoProgress) {
				echo ($iComma == true ? ', ' : '') . 'progress: { ';
				echo 'bar: "#caroufredsel_bar_' . $this->id . '"';
				if ($this->autoProgress == 'pie') {
					echo ', updater: function(percentage) { $().updateProgressBar("caroufredsel_bar_' . $this->id . '", { 

barColor: progressBarColor_' . $this->id . ' }, percentage); }';
				}
				if ($this->autoProgressInterval) {
					echo ', ' . $this->autoProgressInterval;
				}
				echo ' }';
				$iComma = true;
			}
//			echo ($iComma == true ? ', ' : '') . 'conditions: function(direction) { }';
//			echo ($iComma == true ? ', ' : '') . 'onBefore: function(data) { }';
//			echo ($iComma == true ? ', ' : '') . 'onAfter: function(data) { }';
//			echo ($iComma == true ? ', ' : '') . 'onEnd: function(direction) { }';
//			echo ($iComma == true ? ', ' : '') . 'onTimeoutStart: function(percentage, duration) { }';
			if ($this->autoProgress == 'pie') {
				echo ($iComma == true ? ', ' : '') . 'onTimeoutStart: function(percentage, duration) { $().initProgressBar

("caroufredsel_bar_' . $this->id . '", { barBackgroundColor: progressBarBackgroundColor_' . $this->id . ' }); $().showProgressBar

("caroufredsel_bar_wrapper_' . $this->id . '"); }';
			}
//			echo ($iComma == true ? ', ' : '') . 'onTimeoutEnd: function(percentage, duration) { }';
//			echo ($iComma == true ? ', ' : '') . 'onTimeoutPause: function(percentage, duration) { }';
			if ($this->autoProgress == 'pie') {
				echo ($iComma == true ? ', ' : '') . 'onTimeoutPause: function(percentage, duration) { $().hideProgressBar

("caroufredsel_bar_wrapper_' . $this->id . '"); }';
			}
			echo ' }'; // end of subobject 'auto' options
			$iComma = false; // reset inside subobject comma flag
			$oComma = true;
		}
	} else {
		echo ($oComma == true ? ', ' : '') . $this->autoPlay;
		$oComma = true;
	}

	// subobject 'prev' options
	if ($this->navigation || $this->prevKey) {
		echo ($oComma == true ? ', ' : '') . 'prev: { ';
		if ($this->navigation) {
			echo 'button: "#caroufredsel_prev_' . $this->id . '"';
			$iComma = true;
		}
		if ($this->prevKey) {
			echo ($iComma == true ? ', ' : '') . $this->prevKey;
			$iComma = true;
		}
//		echo ($iComma == true ? ', ' : '') . 'conditions: function(direction) { }';
//		echo ($iComma == true ? ', ' : '') . 'onBefore: function(data) { }';
//		echo ($iComma == true ? ', ' : '') . 'onAfter: function(data) { }';
//		echo ($iComma == true ? ', ' : '') . 'onEnd: function(direction) { }';
		echo ' }';
		$iComma = false; // reset inside subobject comma flag
		$oComma = true;
	}

	// subobject 'next' options
	if ($this->navigation || $this->nextKey) {
		echo ($oComma == true ? ', ' : '') . 'next: { ';
		if ($this->navigation) {
			echo 'button: "#caroufredsel_next_' . $this->id . '"';
			$iComma = true;
		}
		if ($this->nextKey) {
			echo ($iComma == true ? ', ' : '') . $this->nextKey;
			$iComma = true;
		}
		echo ' }';
//		echo ($iComma == true ? ', ' : '') . 'conditions: function(direction) { }';
//		echo ($iComma == true ? ', ' : '') . 'onBefore: function(data) { }';
//		echo ($iComma == true ? ', ' : '') . 'onAfter: function(data) { }';
//		echo ($iComma == true ? ', ' : '') . 'onEnd: function(direction) { }';
		$iComma = false; // reset inside subobject comma flag
		$oComma = true;
	}

	// subobject 'pagination' options
	if ($this->pagination) {
		echo ($oComma == true ? ', ' : '') . 'pagination: { ';
		echo 'container: "#caroufredsel_pagi_' . $this->id . '"';
		$iComma = true;
		if ($this->paginationKeys) {
			echo ($iComma == true ? ', ' : '') . $this->paginationKeys;
			$iComma = true;
		}
		// THUMBNAILS ANZEIGEN - START
    echo ($iComma == true ? ', ' : '') . 'anchorBuilder: function(nr) {';
?>
            var src = $("img", this).attr( "src" );
            src = src.replace( "/large/", "/small/");
            return '<div class="ce_image grid4 block"><img src="' + src + '" /><div>';
<?php
        echo '}';	
		// THUMBNAILS ANZEIGEN - ENDE	
		
		
//		echo ($iComma == true ? ', ' : '') . 'anchorBuilder: function(nr) { }';
//		echo ($iComma == true ? ', ' : '') . 'conditions: function(direction) { }';
//		echo ($iComma == true ? ', ' : '') . 'onBefore: function(data) { }';
//		echo ($iComma == true ? ', ' : '') . 'onAfter: function(data) { }';
//		echo ($iComma == true ? ', ' : '') . 'onEnd: function(direction) { }';
		echo ' }';
		$iComma = false; // reset inside subobject comma flag
		$oComma = true;
	}

	// subobject 'swipe' options
	if ($this->swipeOnTouch || $this->swipeOnMouse) {
		echo ($oComma == true ? ', ' : '') . 'swipe: { ';
		if ($this->swipeOnTouch) {
			echo ($iComma == true ? ', ' : '') . $this->swipeOnTouch;
			$iComma = true;
		}
		if ($this->swipeOnMouse) {
			echo ($iComma == true ? ', ' : '') . $this->swipeOnMouse;
			$iComma = true;
		}
//		echo ($iComma == true ? ', ' : '') . 'conditions: function(direction) { }';
//		echo ($iComma == true ? ', ' : '') . 'onBefore: function(data) { }';
//		echo ($iComma == true ? ', ' : '') . 'onAfter: function(data) { }';
//		echo ($iComma == true ? ', ' : '') . 'onEnd: function(direction) { }';
		echo ' }';
		$iComma = false; // reset inside subobject comma flag
		$oComma = true;
	}

	// subobject 'mousewheel' options
	if ($this->mousewheel) {
		echo ($oComma == true ? ', ' : '') . $this->mousewheel;
		$oComma = true;
	}

	echo ' }, { ';
	$oComma = $iComma = false; // o(uter)/i(nner) comma after option needed?

	if ($this->debug) {		
		echo ($oComma == true ? ', ' : '') . $this->debug;
		$oComma = true;
	}

	echo ($oComma == true ? ', ' : '') . 'wrapper: { classname: "caroufedsel_wrapper caroufredsel_wrapper_' . $this->id . '" }';
	$oComma = true;

	echo ' }';
?>
		);
	});
})(jQuery);
</script>

Wenn man nun das Start-Inhaltselement für ein Accordion anlegt, hat man die Möglichkeit zur Auswahl zwischen diesen beiden Templates. Bei der ersten Variante kommt die nummerierte Pagination, bei der zweiten Variante kommen stattdessen die Bilder als Thumbnails.

Das Problem: In beiden Varianten hat die Pagination dieselbe CSS-Klasse.

Ich brauche eine Lösung, wie ich den beiden Varianten unterschiedliche Klassen geben kann, je nachdem welches der beiden Templates gewählt wurde.

**Dirch** · 26.03.2013, 15:09

Zitat von Nina

Das Problem: In beiden Varianten hat die Pagination dieselbe CSS-Klasse.

Ich brauche eine Lösung, wie ich den beiden Varianten unterschiedliche Klassen geben kann, je nachdem welches der beiden Templates gewählt wurde.

ach so. Das ist ganz einfach:

PHP-Code:


// subobject 'pagination' options

    if ($this->pagination) {

        echo ($oComma == true ? ', ' : '') . 'pagination: { ';

        echo 'container: "#caroufredsel_pagi_' . $this->id . '"';

Siehst du die letzte Zeile? Dort sagt man dem Slider-Script welches der Container für die Pagination sein soll. Du änderst also hier in dem Template das ab und legst für das ce_caroufredsel ebenfalls 2 Templates an. Wobei du in dem Template für die Pagination dann diese Zeile

PHP-Code:


<div class="caroufredsel_pagi" id="caroufredsel_pagi_<?php echo $this->id; ?>"></div>

identisch anpaßt. Wichtig ist nur, daß man die zueinander gehörigen Templates gemeinsam auswählt.

Darf ich mal schauen was du da fabrizierst?

Hoffe es klappt so. Liebe Grüße...
...Dirk

***Nina*** · 26.03.2013, 15:47

Ah, danke. Wie doof, dass mir das nicht selbst aufgefallen ist

Zur Seite: Ist das Schweizer Projekt, das du schon ein paar Mal gesehen hast.

**laoshu** · 29.03.2013, 03:45

Hallo Dirk

Bei der Suche nach einer Galerie, welche dieselben Funktionen hat, wie diejenige, welche sich Nina wünscht (sliding thumbnails unter der Galerie), bin ich über Deine Antwort bezüglich einer caroufredsel_galerie gestossen. Da ich nun seit mehr als einer Woche vergeblich eine Lösung suche, möchte ich Dich fragen, ob Du bereits ein Datum für die Freigabe der neuen Erweiterung hast.

Patrik

**Dirch** · 29.03.2013, 18:46

Hallo Patrik,

dauert noch so 1-2 Wochen. Vielleicht auch kürzer. Könnte dir aber die Beta-Version schicken...

Grüße...
...Dirk

**laoshu** · 29.03.2013, 22:37

Dirk

Das wäre enorm hilfreich, vielen Dank!

Patrik

**Dirch** · 30.03.2013, 19:20

Zitat von laoshu

Dirk

Das wäre enorm hilfreich, vielen Dank!

Patrik

...dann solltest du mir deine Mail-Adresse per PM mitteilen...

**Doro** · 17.04.2013, 10:25

Hallo Dirk,
wenn ich das richtig erinnere, konnte man bei der ersten caroufredzel-version (Galerieversion) die grossen Bilder auch noch mal als lightbox version in einer weiteren Größe anklicken, das scheint nun nicht mehr der Fall zu sein, das würde ich für einen Kunden aber gerne so haben, deshalb hatte ich die Galerie ursprünglich getestet und nun gibts das nicht mehr.

Hab ich eine Möglichkeit über das Template das wieder einzusetzen?
Gruß Doro

**Dirch** · 17.04.2013, 12:21

Zitat von Doro

Hallo Dirk,
wenn ich das richtig erinnere, konnte man bei der ersten caroufredzel-version (Galerieversion) die grossen Bilder auch noch mal als lightbox version in einer weiteren Größe anklicken, das scheint nun nicht mehr der Fall zu sein, das würde ich für einen Kunden aber gerne so haben, deshalb hatte ich die Galerie ursprünglich getestet und nun gibts das nicht mehr.

Hab ich eine Möglichkeit über das Template das wieder einzusetzen?
Gruß Doro

Hallo Doro,

ich hatte die "Bild-Einstellungen" ausgeblendet, weil ihr das doch so verwirrend fandet. Ist aber alles noch drin und braucht nur wieder sichtbar gemacht zu werden. Bis wann bräuchtest du das? Sonst sag ich dir welche Stelle du in der Erweiterung anpassen mußt, damit du es zu gesicht bekommst.

Viele Grüße...
...Dirk

**Doro** · 17.04.2013, 13:47

ja, sag mir einfach die Stelle, ich kann aber auch bis übermorgen warten, Danke Dir.
Doro

**Dirch** · 17.04.2013, 14:20

Zitat von Doro

ja, sag mir einfach die Stelle, ich kann aber auch bis übermorgen warten, Danke Dir.
Doro

ersetze in system/modules/dk_caroufredsel/dca/tl_content.php die vorhandene Zeile mit dieser hier:

PHP-Code:


$GLOBALS['TL_DCA']['tl_content']['palettes']['caroufredsel_gallery']    = '{type_legend},type,headline;{source_legend},dk_cfsMultiSRC,dk_cfsSortBy;{image_legend}dk_cfsFullsize;{caroufredsel_thumbnails_legend},dk_cfsUseThumbnails;{caroufredsel_legend},dk_cfsCarouFredSel,dk_cfsSynchronise,dk_cfsHtmlTpl,dk_cfsCssTpl,dk_cfsJsTpl;{protected_legend:hide},protected;{expert_legend:hide},guests,cssID,space;{invisible_legend:hide},invisible,start,stop';

Danach siehst du zumindest diesen einen Punkt. Es sollte sofort gehen, wenn nicht zieh ich eine neue Version in den kommenden Tagen vor.

Liebe Grüße...
...Dirk

**Doro** · 17.04.2013, 14:58

Danke Dir, ich probiers sobald ich hier dazu komme, lieben Dank Doro

**Doro** · 18.04.2013, 06:28

Hallo Dirk,
ich habe das so eingesetzt, wie Du gesagt hast, aber es tut sich nix, auch nicht nachdem ich Daten bereinigt hab, in der systemwartung?
nicht schlimm, ich wart dann einfachmal ab
lieben Gruß Doro

**Doro** · 22.04.2013, 09:15

Hallo Dirk,

um die Thumbs vertikal anzordnen müsste es doch reichen diese standard css

.caroufredsel > div,
.caroufredsel > section,
.caroufredsel_thumbnails > div {
float: left;
}

mit float:none; zu überschreiben, oder ist das quatsch?
irgendwie funkioniert das so jedenfalls nicht.
und was passiert mit der Slidefunktion, wenn ich die Thumbs vertikal setze?
das geht so garnciht oder?
gruß Doro

**Dirch** · 22.04.2013, 10:50

Hallo Doro,

dieses float dort muss IMMER gesetzt sein, sonst funktioniert der Slider nicht richtig. Das float hat auch nichts mit der Laufrichtung zu tun. Vertikale Thumbs hab ich so noch nicht vorgesehen. Du kannst die dir aber auch selbst einstellen. Dazu mußt du das js-Template anpassen. Die Thumbs sind ein 2. Slider (ziemlich weit unten in der Datei) und du mußt dann hier die Parameter händisch setzen. Bei vertikal ist es analog zu horizontal nur, daß du eben höhen- statt breitenbasiert die Einstellungen vornimmst.

Die Parameter findest du hier: http://caroufredsel.dev7studios.com/configuration.php

Leichter ist es sicher, wenn du dir einen vertikalen Slider konfigurierst und dann die Einstellungen aus dem FireBug für den Thumbsnail-Slider übernimmst. Den kannst du dann mit absoluter Positionierung hinschieben wo du magst, denn das ist dann nur noch CSS.

Viele Grüße...
...Dirk

**Doro** · 22.04.2013, 14:18

Danke Dir, aber das übersteigt meine Kompetenz, Schuster bleibt bei seinen Leisten:-)

**jenda** · 20.06.2013, 00:40

Hallo,

ist es möglich die Funktion für die Vergrößerung der Bilder in der Bildergalerie anzuschalten, die sich dann in einer Lightbox öffnen?

Liebe Grüße,

Jan

**jenda** · 20.06.2013, 01:29

Hallo,

ich würde gerne die Vorschaubilder auch durch Navigation scrollen lassen. Wie kann ich es umsetzen?

Danke.

Liebe Grüße,

Jan

**Dirch** · 20.06.2013, 09:34

Zitat von jenda

Hallo,

ist es möglich die Funktion für die Vergrößerung der Bilder in der Bildergalerie anzuschalten, die sich dann in einer Lightbox öffnen?

Liebe Grüße,

Jan

Noch nicht, aber ich stelle bald eine neue Versions ins ER wo das dann möglich ist.

**Dirch** · 20.06.2013, 09:35

Zitat von jenda

ich würde gerne die Vorschaubilder auch durch Navigation scrollen lassen. Wie kann ich es umsetzen?

Die Frage verstehe ich nicht, denn sobald genügend Thumbnails vorhanden sind, kann doch durch diese gescrollt werden?!

Viele Grüße...
...Dirk

**jenda** · 20.06.2013, 09:38

Dann habe ich anscheinend etwas falsch eingestellt.

Siehe http://www.britzka.com/neu/filmdetai...-der-erde.html.

Auf jeden Fall habe ich statt "divs" eine Liste benutzt, um die Vorschaubilder besser platzieren zu können. Kann es sein, dass ich irgendwo noch einstellen muss, dass die Listen statt der divs jetzt gescrollt werden sollte, oder?

**Dirch** · 20.06.2013, 10:17

ahh macht das einen Unterschied ob es DIVs oder LIs sind?

Hmm wenn ich mir deine Seite anschaue, dann frage ich mich was, wo und wann da bei den Thumbs gescrollt werden soll. Es gibt 5 Thumbnails und selbst bei der mittleren Sprungmarke haben alle 5 Platz. Erst wenn weniger Platz zur Verfügung steht als Bilder vorhanden sind werden die Thumbnails scrollbar. Mach einfach mal ein paar Bilder dazu, dann siehst du den Unterschied. Allerdings wird ein

PHP-Code:


.caroufredsel_thumbnails > div {float: left;}

auf die Kinderlein gesetzt. Das mußt du dann bei deiner Struktur nachbilden/setzen.

2 Tipps noch zu den Einstellungen. Nimm statt onWindowLoad lieber das readyLoad und bei den Bildhöhen lieber "variabel" statt "automatisch". Dann rutschen die Thumbs auch bei den kleineren Sprungmarken nach oben. "Automatisch" nimmt man an sich nur, wenn man respsonsive nicht benutzt, da so wie ich das verstanden habe von der Originalgröße ausgehend gerechnet wird und nicht von der respsonsive-Größe...

**jenda** · 20.06.2013, 11:33

Danke, für mich ist es ein großer Unterschied, ob ich div oder li nehme - divs kann man nämlich schlecht zentrieren.

Danke auch für den Tipp zu den Einstellungen. Die variable Größe meinst du unter "Größe der Elemente" oder unter "Größe des Karussells"?

Bei dem zweiten Karussell sind schon mehrere Vorschaubilder, die nicht mehr sichtbar sind. Aber scrollen kann ich die nicht.

Zu Lightbox: Wäre es für dich möglich, mir zu schreiben, wie ich es mit der Lightbox hinkriegen kann? Ich muss es leider so schnell wie möglich umsetzen. Oder wann planst du das Veröffentlichen der nächsten Version, die es beinhalten wird? Danke.

**Dirch** · 20.06.2013, 14:23

Zitat von jenda

Danke, für mich ist es ein großer Unterschied, ob ich div oder li nehme - divs kann man nämlich schlecht zentrieren.

Danke auch für den Tipp zu den Einstellungen. Die variable Größe meinst du unter "Größe der Elemente" oder unter "Größe des Karussells"?

Bei dem zweiten Karussell sind schon mehrere Vorschaubilder, die nicht mehr sichtbar sind. Aber scrollen kann ich die nicht.

Zu Lightbox: Wäre es für dich möglich, mir zu schreiben, wie ich es mit der Lightbox hinkriegen kann? Ich muss es leider so schnell wie möglich umsetzen. Oder wann planst du das Veröffentlichen der nächsten Version, die es beinhalten wird? Danke.

Da nur ein Bild gleichzeitig sichtbar ist, ist das an der Stelle egal. Stell's bei Höhe des Karussells ein. Hast Du auch den float:left auf deine Elemente gesetzt? Der ist ganz wichtig, da sonst gar nichts geht. Eigentlich sind die Thumbnails zentriert, wenn man die Breite des Thumbnails-Karussells auf die Breite des Sliders setzt.

Mit der Lightbox das würde nur mit Code-Änderung gehen. Davon rate ich ab. Die neue Version spiele ich heute oder morgen ein. Spätestens über das WE.

**jenda** · 20.06.2013, 21:17

Vielen lieben Dank. Das ist ein toller Service! Das schätze ich sehr. Noch eine neugierige Frage. Hast du vor, das man auch ein Video sliden könnte, das man nach klicken vergrößert abspielen könnte. Ich würde toll finden, wenn man es auch mit dem Galerie-Modul umsetzen könnte. Danke.

Liebe Grüße,

Jan

**Dirch** · 20.06.2013, 21:35

Zitat von jenda

Vielen lieben Dank. Das ist ein toller Service! Das schätze ich sehr. Noch eine neugierige Frage. Hast du vor, das man auch ein Video sliden könnte, das man nach klicken vergrößert abspielen könnte. Ich würde toll finden, wenn man es auch mit dem Galerie-Modul umsetzen könnte. Danke

Das ist ohne sehr viel Aufwand nicht möglich. Die caroufredsel-Galerie basiert auf der Contao-Galerie und ist wie diese nur für Bilder gedacht. Wenn du ein Video darin brauchst mußt du den Umweg mit den Wrapper-Elementen gehen und das Contao-Video-Element benutzen, auch wenn du dann die angenehme Funktionalität mit den Bildern verlierst und diese dort ebenfalls einzeln hinterlegen mußt.

**jenda** · 20.06.2013, 22:51

Lieber Dirk, nach dem Update geht es bei mir gar nicht.... Muss ich wieder etwas einstellen?

Liebe Grüße,

Jan

**Dirch** · 21.06.2013, 09:01

Zitat von jenda

Lieber Dirk, nach dem Update geht es bei mir gar nicht.... Muss ich wieder etwas einstellen?

Hi Jan,

wie meistens bei größeren Updates ändern sich auch die Templates dabei. Ist auch in den Update-Notizen angegeben. =) Wenn du die neuen Templates mit deinen Änderungen fütterst sollte alles gehen. Für die Lightbox-Funktionalität mußt du noch in den Contao-Einstellungen auf Experten-Modus umschalten, damit dieses Feld sichtbar wird.

Liebe Grüße...
...Dirk

**jenda** · 21.06.2013, 14:05

Danke, Dirk. Es funkt wieder. :-) Ich muss nur die Vorschaubilder irgendwie wieder richtig anordnen. Aber das ist eine Kleinigkeit. :-) Danke noch einmal für deine tolle Arbeit.

**Dirch** · 21.06.2013, 18:45

Zitat von jenda

Danke, Dirk. Es funkt wieder. :-) Ich muss nur die Vorschaubilder irgendwie wieder richtig anordnen. Aber das ist eine Kleinigkeit. :-) Danke noch einmal für deine tolle Arbeit.

Was mir eben eingefallen ist: so ohne weiteres kannst du die innere Struktur nicht auf ul+li umbauen ohne das dem Slider als konfiguration mitzugeben. Du mußt dann noch das js-Template anpassen dort im Bereich "wrapper" ganz unten.

Aber ich empfehle dir, daß du en fredsel so läßt wie er von hause aus kam. Die Thumbnails sind eigentlich standardmäßig schon zentriert, sonst kannst du das bei deren Ausrichtung einstellen.