phpwcms Support Forum

The phpwcms support forum will help to find answers to your questions. The small but strong community is here since more than 10 years.
https://forum.phpwcms.org/

(Bild) Slider funktioniert nicht

https://forum.phpwcms.org/viewtopic.php?t=19879

Page 1 of 2

(Bild) Slider funktioniert nicht

Posted: Mon 1. Mar 2010, 14:04
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

Re: (Bild) Slider funktioniert nicht

Posted: Mon 1. Mar 2010, 14:39
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

Re: (Bild) Slider funktioniert nicht

Posted: Mon 1. Mar 2010, 15:06
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

Re: (Bild) Slider funktioniert nicht

Posted: Mon 1. Mar 2010, 15:33
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

Re: (Bild) Slider funktioniert nicht

Posted: Mon 1. Mar 2010, 15:37
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

Re: (Bild) Slider funktioniert nicht

Posted: Mon 1. Mar 2010, 15:40
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

Re: (Bild) Slider funktioniert nicht

Posted: Mon 1. Mar 2010, 15:40
by rbstuttgart
SUUUUPer es funktioniert. Vielen, vielen Dank.

Re: (Bild) Slider funktioniert nicht

Posted: Mon 1. Mar 2010, 15:54
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.

Re: (Bild) Slider funktioniert nicht

Posted: Mon 1. Mar 2010, 16:11
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

Re: (Bild) Slider funktioniert nicht

Posted: Mon 1. Mar 2010, 16:34
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

Re: (Bild) Slider funktioniert nicht

Posted: Tue 9. Mar 2010, 09:59
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

Re: (Bild) Slider funktioniert nicht

Posted: Tue 9. Mar 2010, 10:43
by Adeuq
Kann ich in die neue Version für motools 1.2 auch wieder 'autoscroll' integrieren?
Rudi

Re: (Bild) Slider funktioniert nicht

Posted: Tue 9. Mar 2010, 11:12
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

Re: (Bild) Slider funktioniert nicht

Posted: Tue 9. Mar 2010, 11:40
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

Re: (Bild) Slider funktioniert nicht

Posted: Wed 17. Mar 2010, 17:09
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
All times are UTC+02:00
Page 1 of 2

Powered by phpBB® Forum Software © phpBB Limited