Overlay der Bild-Description bei Hover oder Fokus?

***Nina*** · 09.02.2013, 16:05

Auf der grundlegenden Example-Seite vom Caroufredsel gibt es beim Abschnitt "A carousel created from whatever HTML elements, with some custom configuration:" einen wichtigen Effekt:

Wenn man über das Bild hovert, wird Text als Overlay eingeblendet und entfernt sich danach wieder.

Wie kann man das in Contao so hinbauen, dass genau dieser Effekt auftritt (idealerweise auch bei Fokus) und als Text z.B. der Bild-Alternativtext oder die Bild-Description ausgegeben wird?

**Dirch** · 09.02.2013, 17:26

Prinzipiell genauso wie das dort auch ist. Du müßtest nur den JS-Part im Template ergänzen und an deine Anforderungen anpassen. Also statt nach dem DIV innerhalb von .slide zu suchen würdest du nach dem IMG suchen und von dort das ALT-Attribut auslesen.

Dieses slideDown/slideUp sind jQuery-Funktionen, die das animieren. Ist eben immer etwas custom-code, den man da erstellen muß. Einfacher wäre es wohl, wenn die Erweiterung das von Haus aus mitbringen täte.

***Nina*** · 09.02.2013, 18:35

Zitat von Dirch

Einfacher wäre es wohl, wenn die Erweiterung das von Haus aus mitbringen täte.

In der Tat

***Nina*** · 09.02.2013, 19:01

Ich hab die Ergänzung versucht, aber irgendwas mach ich noch falsch bei der Einbindung.

Ich hab das Template js_caroufredsel.html5 im Templates-Ordner kopiert und darin am Ende (siehe Kommentare // START Ergaenzung Nina ... // ENDE Ergaenzung Nina) den Code angepasst.

HTML-Code:

<script>
(function($) {
<?php if ($this->triggerMode == 'onWindowLoad'): ?>
	$(window).load(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;
	}
//	echo ($oComma == true ? ', ' : '') . 'onCreate: function(data) { }';

	// 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 ' }';
		$iComma = false; // reset inside subobject comma flag
		$oComma = true;
	}

	// subobject 'scroll' options
	if ($this->scrollItems || $this->scrollFx || $this->scrollEasing || $this->scrollDuration || $this->scrollPauseOnHover) {
		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) { }';
//		echo ($iComma == true ? ', ' : '') . 'onBefore: function(data) { }';
		if (!$this->autoPlay && $this->autoProgress == 'pie') {
			echo ($iComma == true ? ', ' : '') . 'onBefore: function(data) { $().hideProgressBar("caroufredsel_bar_wrapper_' . $this->id . '"); }';
		}
//		echo ($iComma == true ? ', ' : '') . 'onAfter: function(data) { }';
		if (!$this->autoPlay && $this->autoProgress == 'pie') {
			echo ($iComma == true ? ', ' : '') . 'onAfter: function(data) { $().initProgressBar("caroufredsel_bar_' . $this->id . '", { barBackgroundColor: progressBarBackgroundColor_' . $this->id . ' }); }';
		}
//		echo ($iComma == true ? ', ' : '') . 'onEnd: function(direction) { }';

		echo ' }';
		$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 ' }';
			$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 ' }';
?>  
		);
      

      // START Ergaenzung Nina
      // }); vom Original an der Stelle gegen }).find ... ausgetauscht 

	}).find(".ce_image").hover(
	function() { $(this).find("figcaption").slideDown(); },
	function() { $(this).find("figcaption").slideUp();	}
       );       
      // ENDE Ergaenzung Nina
      
})(jQuery);
</script>

Im Slider habe ich bei den Inhaltselementen jeweils das Feld für die Bildbeschreibung (figcaption) gefüllt.

Im CSS habe ich testweise das hier ergänzt:

Code:

.caroufredsel .ce_image{position:relative}
.caroufredsel .ce_image figcaption{width:100%;bottom:0;position:absolute;display:none;color:#fff;background-color: rgba(0,0,0,.6);}

Theoretisch müsste doch nun jQuery dafür sorgen, dass beim Hover über das Bild via JS die display none-Anweisung aufgehoben und geslidet wird, oder?

Leider passiert gar nichts :/

**Dirch** · 09.02.2013, 19:37

Zitat von Nina

Theoretisch müsste doch nun jQuery dafür sorgen, dass beim Hover über das Bild via JS die display none-Anweisung aufgehoben und geslidet wird, oder?

Leider passiert gar nichts :/

Japs so sollte es gehen. Wenn mich meine Augen nicht täuschen hast du deinen Code allerdings an den

PHP-Code:


$(document).ready(function() {

Part gehängt. Hänge es mal an

PHP-Code:

);

direkt über deinem Kommentar. Das ist die bessere Stelle.

***Nina*** · 12.02.2013, 12:06

Danke, so funktioniert es:

Code:

<script>
(function($) {
<?php if ($this->triggerMode == 'onWindowLoad'): ?>
	$(window).load(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;
	}
//	echo ($oComma == true ? ', ' : '') . 'onCreate: function(data) { }';

	// 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 ' }';
		$iComma = false; // reset inside subobject comma flag
		$oComma = true;
	}

	// subobject 'scroll' options
	if ($this->scrollItems || $this->scrollFx || $this->scrollEasing || $this->scrollDuration || $this->scrollPauseOnHover) {
		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) { }';
//		echo ($iComma == true ? ', ' : '') . 'onBefore: function(data) { }';
		if (!$this->autoPlay && $this->autoProgress == 'pie') {
			echo ($iComma == true ? ', ' : '') . 'onBefore: function(data) { $().hideProgressBar("caroufredsel_bar_wrapper_' . $this->id . '"); }';
		}
//		echo ($iComma == true ? ', ' : '') . 'onAfter: function(data) { }';
		if (!$this->autoPlay && $this->autoProgress == 'pie') {
			echo ($iComma == true ? ', ' : '') . 'onAfter: function(data) { $().initProgressBar("caroufredsel_bar_' . $this->id . '", { barBackgroundColor: progressBarBackgroundColor_' . $this->id . ' }); }';
		}
//		echo ($iComma == true ? ', ' : '') . 'onEnd: function(direction) { }';

		echo ' }';
		$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 ' }';
			$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 ' }';
?>  

      // START Ergaenzung Nina
	).find(".ce_image").hover(
	  function() { $(this).find("figcaption").slideDown(); },
	  function() { $(this).find("figcaption").slideUp();	}
	);       
      // ENDE Ergaenzung Nina
      

	});
})(jQuery);
</script>

***Nina*** · 12.02.2013, 12:31

Wie kann ich die Stelle noch modifizieren, damit diese Einblendung auch auf Fokus reagiert (für Mobilgeräte / Barrierefreiheit).

**Dirch** · 12.02.2013, 13:55

Zitat von Nina

Wie kann ich die Stelle noch modifizieren, damit diese Einblendung auch auf Fokus reagiert (für Mobilgeräte / Barrierefreiheit).

Wie man gutes jQuery schreibt weiß ich noch nicht genau, aber hänge noch mal das komplette hinten dran (ab .find) und statt .hover benutzt du .focus. Das sollte es sein. Jedenfalls ist .focus der richtige Trigger dafür. Ob das syntaktisch so ok ist mußt du probieren.

***Nina*** · 12.02.2013, 14:16

Leider nicht

**Dirch** · 12.02.2013, 14:37

und wenn du direkt .focus(...) dran hängst?

Ich werde mal meine Bücherbestellung abschicken...

***Nina*** · 12.02.2013, 15:35

Zitat von Dirch

und wenn du direkt .focus(...) dran hängst?

Wie/wo dran hängen? Kannst du den Abschnitt bitte entsprechend angepasst hier posten, damit ich es testen kann?

**Dirch** · 12.02.2013, 15:54

na so halt:

PHP-Code:


.find(".ce_image").hover(

      function() { $(this).find("figcaption").slideDown(); },

      function() { $(this).find("figcaption").slideUp();    }

    ).focus(

      function() { $(this).find("figcaption").slideDown(); },

      function() { $(this).find("figcaption").slideUp();    }

    );

***Nina*** · 12.02.2013, 17:06

Ne, das klappt leider nicht. Dann wird der Slider gar nicht mehr ausgelöst, sondern die Bilder stehen einfach nur noch untereinander.

**Dirch** · 20.02.2013, 18:34

Zitat von Nina

Ne, das klappt leider nicht. Dann wird der Slider gar nicht mehr ausgelöst, sondern die Bilder stehen einfach nur noch untereinander.

Mir sind noch 2 Ideen gekommen. Zum Einen könntest du das mit dem Fokus so machen

PHP-Code:


$("#caroufredsel_<?php echo $this->id; ?>").find(".ce_image").focus( ... );

und zum Anderen war mein Gedanke warum du das ganze über jQuery machst. Es müßte doch genauso gehen, wenn du es über CSS darstellst? Dann wäre focus/hover vielleicht leichter für dich einzubinden ohne Template-Anpassung.

Grüße...
...Dirk