Tips and Tricks: carouFredSel - Versionsgeschichte

Tm: /* Positioning inside the Slideshow */

2014-03-14T01:58:56Z

Positioning inside the Slideshow

← Nächstältere Version		Version vom 14. März 2014, 01:58 Uhr
Zeile 264:		Zeile 264:
	<pre>		<pre>
	<div class="col-xs-8" id="slideshow_wrapper">		<div class="col-xs-8" id="slideshow_wrapper">

			OR

			<div class="container" id="slideshow_wrapper">
	</pre>		</pre>

Tm: /* Show the Buttons only on Mouse-Over */

2014-03-14T01:06:48Z

Show the Buttons only on Mouse-Over

← Nächstältere Version		Version vom 14. März 2014, 01:06 Uhr
Zeile 304:		Zeile 304:

	<pre>		<pre>
	~~#slideshow_next {cursor:pointer; position:absolute; top:230px; color:white; font-size:31px;}~~
	~~#slideshow_prev {cursor:pointer; position:absolute; top:230px; right:5px; color:white; font-size:31px;}~~
	#slideshow_wrapper:hover #slideshow_next,		#slideshow_wrapper:hover #slideshow_next,
	#slideshow_wrapper:hover #slideshow_prev {display: block !important;}		#slideshow_wrapper:hover #slideshow_prev {display: block !important;}
Zeile 337:		Zeile 335:
	==== Fade In and Out ====		==== Fade In and Out ====

	If you want fading the bvuttons, you do not have to add nothing to your css:		If you want fading the bvuttons, you do not have to add nothing more to your css. But add some more code into your JavaScript:

	~~<pre>~~
	~~#slideshow_next {cursor:pointer; position:absolute; top:230px; color:white; font-size:31px;}~~
	~~#slideshow_prev {cursor:pointer; position:absolute; top:230px; right:5px; color:white; font-size:31px;}~~
	~~</pre>~~

	But add some more code into your JavaScript:

	<pre>		<pre>

Tm: /* Positioning inside the Slideshow */

2014-03-14T01:05:45Z

Positioning inside the Slideshow

← Nächstältere Version		Version vom 14. März 2014, 01:05 Uhr
Zeile 269:		Zeile 269:

	<pre>		<pre>
	#slideshow_next {cursor:pointer; position:absolute; top:230px; color:~~white~~; font-size:31px;}		#slideshow_wrapper {position:relative;}
	#slideshow_prev {cursor:pointer; position:absolute; top:230px~~; right:5px~~; color:~~white~~; font-size:31px;}		#slideshow_next {cursor:pointer; position:absolute; top:230px; right:5px; color:black; font-size:31px;}
			#slideshow_prev {cursor:pointer; position:absolute; top:230px; color:black; font-size:31px;}
	</pre>		</pre>

Tm: /* Positioning inside the Slideshow */

2014-03-14T01:01:41Z

Positioning inside the Slideshow

← Nächstältere Version		Version vom 14. März 2014, 01:01 Uhr
Zeile 273:		Zeile 273:
	</pre>		</pre>

	~~Use~~ the ~~same JavaScript as above~~:		Tell carouFredSel to use the buttons and not to start automatically. Additionally we enable the use of the keyboard keys "right" and "left":

	<pre>		<pre>

Tm am 14. März 2014 um 00:58 Uhr

2014-03-14T00:58:40Z

← Nächstältere Version		Version vom 14. März 2014, 00:58 Uhr
Zeile 165:		Zeile 165:

	<pre>		<pre>
	$(function(){		$(window).load(function(){
	$('#slideshow').carouFredSel();		$('#slideshow').carouFredSel();
	})		})
Zeile 183:		Zeile 183:

	<pre>		<pre>
	$(function(){		$(window).load(function(){
	$('#slideshow').carouFredSel({		$('#slideshow').carouFredSel({
	swipe:{		swipe:{
Zeile 195:		Zeile 195:

	<pre>		<pre>
	$(function(){		$(window).load(function(){
	$('#slideshow').carouFredSel({		$('#slideshow').carouFredSel({
	swipe:{		swipe:{
Zeile 225:		Zeile 225:

	<pre>		<pre>
	$(function(){		$(window).load(function(){
	$('#slideshow').carouFredSel({		$('#slideshow').carouFredSel({
	auto: false,		auto: false,
Zeile 276:		Zeile 276:

	<pre>		<pre>
	$(function(){		$(window).load(function(){
	$('#slideshow').carouFredSel({		$('#slideshow').carouFredSel({
	auto: false,		auto: false,
Zeile 312:		Zeile 312:

	<pre>		<pre>
	$(function(){		$(window).load(function(){
	$('#slideshow').carouFredSel({		$('#slideshow').carouFredSel({
	auto: false,		auto: false,
Zeile 346:		Zeile 346:

	<pre>		<pre>
	$(function(){		$(window).load(function(){
	$('#slideshow').carouFredSel({		$('#slideshow').carouFredSel({
	auto: false,		auto: false,

Tm am 14. März 2014 um 00:57 Uhr

2014-03-14T00:57:58Z

← Nächstältere Version		Version vom 14. März 2014, 00:57 Uhr
Zeile 3:		Zeile 3:
	=== Init Carousel on Window Ready ===		=== Init Carousel on Window Ready ===

	The plugin might not be able to measure the correct size of the images onDocumentReady (mostly on Webkit browsers Chrome and Safari). Using ~~onWindowLoaded~~ eliminate this Problem:		The plugin might not be able to measure the correct size of the images onDocumentReady (mostly on Webkit browsers Chrome and Safari). Using $(window).load() eliminate this Problem:

	<pre>		<pre>
	$(window).load(function(){		$(window).load(function(){
			$('#slideshow').carouFredSel();
			})

			Instead of:

			$(function(){
	$('#slideshow').carouFredSel();		$('#slideshow').carouFredSel();
	})		})

Tm: /* Some Basics */

2014-03-14T00:56:39Z

Some Basics

@@ Zeile 1: / Zeile 1: @@
 == Some Basics ==
 === Using with Bootstrap Grids ===
@@ Zeile 47: / Zeile 59: @@
     </div>
 </div>
 </pre>

Tm: /* Using with Bootstrap Grids */

2014-03-13T23:36:52Z

Using with Bootstrap Grids

← Nächstältere Version		Version vom 13. März 2014, 23:36 Uhr
Zeile 3:		Zeile 3:
	=== Using with Bootstrap Grids ===		=== Using with Bootstrap Grids ===

	Do not convert a Bootstrap Grid-Div into a CarouFredSel-Slider:		Do not convert a Bootstrap Grid-Div or Container-Div into a CarouFredSel-Slider:

	<pre>		<pre>

	<!-- WILL NOT WORK ! -->		<!-- WILL NOT WORK ! -->
	<div class="col-xs-8" id="slideshow">		<div class="col-xs-8" id="slideshow">
Zeile 13:		Zeile 14:
	<img src="assets/img/4.jpg" width="663" height="491">		<img src="assets/img/4.jpg" width="663" height="491">
	</div>		</div>

			<!-- WILL NOT WORK ! -->
			<div class="container" id="slideshow">
			<img src="assets/img/1.jpg" width="663" height="491">
			<img src="assets/img/2.jpg" width="663" height="491">
			<img src="assets/img/3.jpg" width="663" height="491">
			<img src="assets/img/4.jpg" width="663" height="491">
			</div>

	</pre>		</pre>

	This will break the Grid Layout. Use instead an own Div for the Slideshow:		This will break the Grid Layout or the Container Behaviour. Use instead an own Div for the Slideshow:

	<pre>		<pre>
	<div class="col-xs-8">		<div class="col-xs-8">
			<div id="slideshow">
			<img src="assets/img/1.jpg" width="663" height="491">
			<img src="assets/img/2.jpg" width="663" height="491">
			<img src="assets/img/3.jpg" width="663" height="491">
			<img src="assets/img/4.jpg" width="663" height="491">
			</div>
			</div>
			</pre>

			<pre>
			<div class="container">
	<div id="slideshow">		<div id="slideshow">
	<img src="assets/img/1.jpg" width="663" height="491">		<img src="assets/img/1.jpg" width="663" height="491">

Tm: /* Simple Slider */

2014-03-13T22:41:36Z

Simple Slider

← Nächstältere Version		Version vom 13. März 2014, 22:41 Uhr
Zeile 29:		Zeile 29:

	== Simple Slider ==		== Simple Slider ==

			CONTROLLER:

			<pre>
			$this->master->enable_component('gui-libraries.sliders.carouFredSel');
			</pre>

	HTML:		HTML:

Tm am 2. März 2014 um 16:17 Uhr

2014-03-02T16:17:13Z

@@ Zeile 250: / Zeile 250: @@
      })
 })
 </pre>