(Bild) Slider funktioniert nicht

Bitte alle templatebezogenen Beiträge in diesem Forum veröffentlichen.
rbstuttgart
Posts: 45
Joined: Sun 13. Jul 2008, 10:45

(Bild) Slider funktioniert nicht

Post by 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
User avatar
flip-flop
Moderator
Posts: 8178
Joined: Sat 21. May 2005, 21:25
Location: HAMM (Germany)
Contact:

Re: (Bild) Slider funktioniert nicht

Post by 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
>> HowTo | DOCU | FAQ | TEMPLATES/DOCS << ( SITE )
rbstuttgart
Posts: 45
Joined: Sun 13. Jul 2008, 10:45

Re: (Bild) Slider funktioniert nicht

Post by 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
User avatar
flip-flop
Moderator
Posts: 8178
Joined: Sat 21. May 2005, 21:25
Location: HAMM (Germany)
Contact:

Re: (Bild) Slider funktioniert nicht

Post by 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
>> HowTo | DOCU | FAQ | TEMPLATES/DOCS << ( SITE )
Adeuq
Posts: 26
Joined: Tue 19. May 2009, 21:13
Location: Wismar

Re: (Bild) Slider funktioniert nicht

Post by Adeuq »

rbstuttgart wrote: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
User avatar
flip-flop
Moderator
Posts: 8178
Joined: Sat 21. May 2005, 21:25
Location: HAMM (Germany)
Contact:

Re: (Bild) Slider funktioniert nicht

Post by 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 :D
Last edited by flip-flop on Mon 1. Mar 2010, 15:41, edited 1 time in total.
>> HowTo | DOCU | FAQ | TEMPLATES/DOCS << ( SITE )
rbstuttgart
Posts: 45
Joined: Sun 13. Jul 2008, 10:45

Re: (Bild) Slider funktioniert nicht

Post by rbstuttgart »

SUUUUPer es funktioniert. Vielen, vielen Dank.
Adeuq
Posts: 26
Joined: Tue 19. May 2009, 21:13
Location: Wismar

Re: (Bild) Slider funktioniert nicht

Post by 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.
User avatar
flip-flop
Moderator
Posts: 8178
Joined: Sat 21. May 2005, 21:25
Location: HAMM (Germany)
Contact:

Re: (Bild) Slider funktioniert nicht

Post by 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
>> HowTo | DOCU | FAQ | TEMPLATES/DOCS << ( SITE )
Adeuq
Posts: 26
Joined: Tue 19. May 2009, 21:13
Location: Wismar

Re: (Bild) Slider funktioniert nicht

Post by 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
User avatar
swisscheese
Posts: 138
Joined: Mon 19. Feb 2007, 16:37
Location: Solothurn, Schweiz

Re: (Bild) Slider funktioniert nicht

Post by 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
Posts: 26
Joined: Tue 19. May 2009, 21:13
Location: Wismar

Re: (Bild) Slider funktioniert nicht

Post by Adeuq »

Kann ich in die neue Version für motools 1.2 auch wieder 'autoscroll' integrieren?
Rudi
User avatar
swisscheese
Posts: 138
Joined: Mon 19. Feb 2007, 16:37
Location: Solothurn, Schweiz

Re: (Bild) Slider funktioniert nicht

Post by swisscheese »

Hier ist die autoscroll-Version: 8)

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
Posts: 26
Joined: Tue 19. May 2009, 21:13
Location: Wismar

Re: (Bild) Slider funktioniert nicht

Post by 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
User avatar
kukki
Posts: 1685
Joined: Mon 7. Feb 2005, 20:02
Location: Berlin Köpenick
Contact:

Re: (Bild) Slider funktioniert nicht

Post by kukki »

Ja, stimmt - habe auch gerade gegrübelt und nicht im Board gesucht! :oops: Dann fand ich im aktuellen Teil diesen Thread - fein gemacht - bei mir läuft das Teil auch wieder . :D
Lieber arm dran als Arm ab!

meine historische Website: Jagdgeschwader 300 1.9.20-dev
kukki's SpIeLwIeSe V.1.9.12 R550 responsive
Post Reply