(Bild) Slider funktioniert nicht

[rbstuttgart]

Liebes Forum,

meine zahlosen Versuche mit fast allen hier im Forum vertretenen Slider Arten sind leider gescheitert. Selbstz der Standard Slider tut nicht.

Siehe ganz unten: http://www.unterwwwegs.de/index.php?som ... nce-tour-1

Auch die Lösung von swisscheese läuft nicht: http://www.hykom.bluthard-online.de/index.php?test-3

Mootools laden ist angekreuzt. Ich vermute es liegt an einer Kleinigkeit - diese konnte ich aber trotz Vergleich HTML Dateien mit funktionierenden Seiten nicht finden.

Ich wäre um eine Lösung dankbar.

Gruß

Rainer

[flip-flop]

Hallo,

diese Slider brauchen teilweise irgendeine More-Komponente.
Außerdem funktionier ein Script für MooTools v1.1x nicht immer mit MooTools V1.2x.

Das hier funktioniert: Bitte beachten: MooTools V1.2x !
Einfacher Bilder-Slider mit Template- und CSS Dateien

Knut

[rbstuttgart]

Hallo flip flop,

danke für die schnelle Antwort. Das Script aus der Wiki hatte ich auch schon getestet - leider auch ohne Erfolg:

http://www.unterwwwegs.de/index.php?testseite#


Deshalb denke ich, das grundsätzlich was nicht stimmt.

Gruß

Rainer

[flip-flop]

Es fehlt die More Komponente FX.Scoll, sofort ersichtlich im Firebug.

Im Template vor dem Einleitenden [PHP] eintragen:

Code: Select all

<!-- JS: MORE:Fx/Fx.Scroll --> 

[PHP]
......
......
......

Knut

[Adeuq]

Hallo flip flop,

danke für die schnelle Antwort. Das Script aus der Wiki hatte ich auch schon getestet - leider auch ohne Erfolg:

http://www.unterwwwegs.de/index.php?testseite#


Deshalb denke ich, das grundsätzlich was nicht stimmt.

Gruß

Rainer

stell mal Mootools 1.1 ein und versuch es noch mal...

( ich hatte das gleiche Problem mit dem Script, kurioser weise läuft es bei mir mit der 1.1 )

viel Erfolg, Rudi

[flip-flop]

ich hatte das gleiche Problem mit dem Script, kurioser weise läuft es bei mir mit der 1.1

Weil du die 1.1 Scriptvariante verwendest. Hier hat das einen anderen Grund. - Warten wir es ab.

(Ich würde V1.1 nicht mehr verwenden wenn eben möglich).

Knut

[rbstuttgart]

SUUUUPer es funktioniert. Vielen, vielen Dank.

[Adeuq]

Freut mich...

Ich habe das Script für Mootools 1.2 auch ausprobiert, im Backend auf 1.2 eingestellt und eben dieses Problem gehabt.
Jetzt möchte ich ja nur noch wissen ob es an dem Script im Wikki liegt, oder an der Version? Ich habe die "r398" aufgespielt.

[flip-flop]

Genau der selbe Grund, für die neueren CMS-Versionen ab r381 fehlt das Hinzulinken des More FX.Scrollers.
(Ist nun behoben).

Knut

[Adeuq]

Danke für die schnelle Reaktion. Habs schon getestet und es funktioniert!!!
Dann werde ich gleich mal alles auf Mootools 1.2 umstellen.

Rudi

[swisscheese]

Um den Slider noch flexibler zu halten, habe ich mir mal die Mühe gemacht, das Skript etwas anzupassen (Siehe auch diesen alten Thread). Hier ist die angepasste Version für Mootools 1.2 (ab r381).
Vorteile:
- Breite, Höhe und Länge des Sliders richten sich nach den Einstellungen der Bildvorschaugrösse und Spaltenanzahl
- Bei mehreren Slidern auf einer Seite kann man nicht mehr über das Ende hinaus scrollen

Template:

Code: Select all

<!--IMAGES_HEADER_START//-->
<div>
[TITLE]<h3>{TITLE}</h3>[/TITLE]
[SUBTITLE]<h4>{SUBTITLE}</h4>[/SUBTITLE]
[TEXT]{TEXT}[/TEXT]

<div class="outer" style="height:{THUMB_HEIGHT_MAX}px;">
	<a href="#" id="move_left_{ID}" class="sliderArrowLft"><img src="picture/site/arrow_10x85_lft_grey.png" width="10" height="{THUMB_HEIGHT_MAX}" alt="" /></a>
		<div class="slider" id="slider_container_{ID}" style="height:{THUMB_HEIGHT_MAX}px; width:[PHP]echo ('{THUMB_COLUMNS}' * ('{THUMB_WIDTH_MAX}' + '{SPACE}'))[/PHP]px; left:[PHP]echo ('{SPACE}' + 10)[/PHP]px;">
			<div id="slider_{ID}" class="inner">  
<!--IMAGES_HEADER_END//-->


<!--IMAGES_ENTRY_START//-->
				<p style="width:{THUMB_WIDTH}px; margin-right:{SPACE}px;">
				{IMAGE}[CAPTION]<br />{CAPTION}
				[/CAPTION]</p>
<!--IMAGES_ENTRY_END//-->


<!--IMAGES_ENTRY_SPACER_START//--><!--IMAGES_ENTRY_SPACER_END//-->


<!--IMAGES_ROW_SPACER_START//--><!--IMAGES_ROW_SPACER_END//-->


<!--IMAGES_FOOTER_START//-->
			</div>
		</div>
	<a href="#" id="move_right_{ID}" class="sliderArrowRgt" style="left:[PHP]echo (10 + '{SPACE}' + '{THUMB_COLUMNS}' * ('{THUMB_WIDTH_MAX}' + '{SPACE}'))[/PHP]px"><img src="picture/site/arrow_10x85_rgt_grey.png" width="10" height="{THUMB_HEIGHT_MAX}" alt="" /></a>
</div>
</div>
<!-- JS: MORE:Fx/Fx.Scroll -->

[PHP]
  $GLOBALS['block']['custom_htmlhead']['slider_{ID}'] = '  <script type="text/javascript">

  <!--
  // 17.04.09 KH: enhanced and patched for mootools V1.2x
	window.addEvent(\'domready\', function(){
		Fx.Scroll.implement({
			scrollTo: function(y, x){
			return this.start(y, x);
			}
		});
	
		var slider_width	= 0;
		var step			= {THUMB_WIDTH_MAX} + {SPACE};
		var scroll_x		= 0;
		var slider_parent	= $(\'slider_container_{ID}\').getSize().x;
		
		$$(\'div#slider_container_{ID} img\').each( function(e) {
			
			slider_width += e.getSize().x + {SPACE};
			
		});
				
		var scroll = new Fx.Scroll(\'slider_container_{ID}\', {
			wait: false,
			duration: 550,
			offset: {\'x\': 0, \'y\': 0},
			transition: Fx.Transitions.Quad.easeOut
		});
		
		scroll.scrollTo(0, 0);
		
		$(\'move_right_{ID}\').addEvent(\'click\', function(event) {
			event = new Event(event).stop();
			if(slider_width-slider_parent <= scroll_x) {
				scroll_x = scroll_x - step;
			}
			scroll_x = scroll_x + step;
			scroll.scrollTo(scroll_x, 0);
		});
		
		$(\'move_left_{ID}\').addEvent(\'click\', function(event) {
			event = new Event(event).stop();
			scroll_x = scroll_x - step;
			if(scroll_x < 0) {
				scroll_x = 0;
			}
			scroll.scrollTo(scroll_x, 0);
		});
		

	});
	
  //-->
  </script>';
[/PHP]
<!--IMAGES_FOOTER_END//-->

CSS:

Code: Select all

/* SLIDER */
div.outer {
	position:relative;
}
div.slider {
	margin: 0 0 10px 0;
	padding: 0 0 5px 0;
	overflow: hidden;
	position: absolute;
	top:0;
}

.sliderArrowLft,
.sliderArrowRgt {
	width:10px;
	display:block;
	border:1px solid #fff;
	position: absolute;
	top:0;
}
.sliderArrowLft img,
.sliderArrowRgt img {
	border:none;
}
a.sliderArrowLft:hover,
a.sliderArrowRgt:hover {
	border:1px solid #c00;
}

div.slider div.inner {
	margin: 0;
	padding: 0;
	list-style: none;
	width: 8000px;
	position: absolute;
	left: 0;
	top: 0;
}

div.slider div.inner p {
	padding: 0;
	float: left;
}

div.slider div.inner a {
	float:left;
	border: 1px solid #FFFFFF;
	padding: 0;
	background-color: #000000;
}
div.slider div.inner a:hover {
	border: 1px solid #CC3300;
}
div.slider div.inner br {
	clear:left
}
div.slider div.inner img {
	border: 1px solid #ccc;
}
div.slider div.inner a img {
	border: none;
}
/* eof SLIDER */

Have fun
Gerd

[Adeuq]

Kann ich in die neue Version für motools 1.2 auch wieder 'autoscroll' integrieren?
Rudi

[swisscheese]

Hier ist die autoscroll-Version:

Code: Select all

<!--IMAGES_HEADER_START//-->
<div>
[TITLE]<h3>{TITLE}</h3>[/TITLE]
[SUBTITLE]<h4>{SUBTITLE}</h4>[/SUBTITLE]
[TEXT]{TEXT}[/TEXT]

<div class="outer" style="height:{THUMB_HEIGHT_MAX}px;">
	<a href="#" id="move_left_{ID}" class="sliderArrowLft"><img src="picture/site/arrow_10x85_lft_grey.png" width="10" height="{THUMB_HEIGHT_MAX}" alt="" /></a>
		<div class="slider" id="slider_container_{ID}" style="height:{THUMB_HEIGHT_MAX}px; width:[PHP]echo ('{THUMB_COLUMNS}' * ('{THUMB_WIDTH_MAX}' + '{SPACE}'))[/PHP]px; left:[PHP]echo ('{SPACE}' + 10)[/PHP]px;">
			<div id="slider_{ID}" class="inner">  
<!--IMAGES_HEADER_END//-->


<!--IMAGES_ENTRY_START//-->
				<p style="width:{THUMB_WIDTH}px; margin-right:{SPACE}px;">
				{IMAGE}[CAPTION]<br />{CAPTION}
				[/CAPTION]</p>
<!--IMAGES_ENTRY_END//-->


<!--IMAGES_ENTRY_SPACER_START//--><!--IMAGES_ENTRY_SPACER_END//-->


<!--IMAGES_ROW_SPACER_START//--><!--IMAGES_ROW_SPACER_END//-->


<!--IMAGES_FOOTER_START//-->
			</div>
		</div>
	<a href="#" id="move_right_{ID}" class="sliderArrowRgt" style="left:[PHP]echo (10 + '{SPACE}' + '{THUMB_COLUMNS}' * ('{THUMB_WIDTH_MAX}' + '{SPACE}'))[/PHP]px"><img src="picture/site/arrow_10x85_rgt_grey.png" width="10" height="{THUMB_HEIGHT_MAX}" alt="" /></a>
</div>
</div>

<!-- JS: MORE:Fx/Fx.Scroll -->

[PHP]
  $GLOBALS['block']['custom_htmlhead']['slider_{ID}'] = '  <script type="text/javascript">

  <!--
  // 17.04.09 KH: enhanced and patched for mootools V1.2x
	window.addEvent(\'domready\', function(){
		Fx.Scroll.implement({
			scrollTo: function(y, x){
			return this.start(y, x);
			}
		});
	
		var manualscroll_speed	= 500;
		var autoscroll_speed	= 4000;
		var slider_width		= 0;
		var step				= {THUMB_WIDTH_MAX} + {SPACE};
		var scroll_x			= 0;
		var slider_parent		= $(\'slider_container_{ID}\').getSize().x;
		var myTimer = false;
	 	var direction = 1;
		
		$$(\'div#slider_container_{ID} img\').each( function(e) {
			
			slider_width += e.getSize().x + {SPACE};
			
		});
				
      var scroll = new Fx.Scroll(\'slider_container_{ID}\', {
         link: \'chain\',
         duration: manualscroll_speed,
         offset: {\'x\': 0, \'y\': 0},
         transition: Fx.Transitions.Quad.easeInOut
      });
      
      var autoscroll = new Fx.Scroll(\'slider_container_{ID}\', {
         wait: false,
         duration: autoscroll_speed,
         offset: {\'x\': 0, \'y\': 0},
         transition: Fx.Transitions.linear
      });
		
		scroll.scrollTo(0, 0);
		
      $(\'move_right_{ID}\').addEvent(\'click\', function(event) {
         myTimer = $clear(myTimer);
		 autoscroll.stopTimer();
		 event = new Event(event).stop();
         scroll_x = scroll_x + step;
         if(slider_width-slider_parent <= scroll_x) {
            scroll_x = scroll_x - step;
         }
         scroll.scrollTo(scroll_x, 0);
         myTimer = automove_right_{ID}.periodical(autoscroll_speed);
      });
      
      $(\'move_left_{ID}\').addEvent(\'click\', function(event) {
         myTimer = $clear(myTimer);
		 autoscroll.stopTimer();
         event = new Event(event).stop();
         scroll_x = scroll_x - step;
         if(scroll_x < 0) {
            scroll_x = 0;
         }
         scroll.scrollTo(scroll_x, 0);
         myTimer = automove_right_{ID}.periodical(autoscroll_speed);
      });
	  
	  function automove_right_{ID}() {
         if(slider_width-slider_parent <= scroll_x + step) {
		    direction = -1;
		 }
		 if(scroll_x <= 0) {
		    direction = 1;
		 }
         scroll_x = scroll_x + step * direction;
         autoscroll.scrollTo(scroll_x, 0);
      }
	  myTimer = automove_right_{ID}.periodical(autoscroll_speed);
		

	});
	
  //-->
  </script>';
[/PHP]
<!--IMAGES_FOOTER_END//-->

Have fun
Gerd

[Adeuq]

dann sag ich mal schnell: danke habs schon mal eingebaut und es läuft...
war bei Dir ja auch nicht anders zu erwarten
Rudi

[kukki]

Ja, stimmt - habe auch gerade gegrübelt und nicht im Board gesucht! Dann fand ich im aktuellen Teil diesen Thread - fein gemacht - bei mir läuft das Teil auch wieder .