Flexible Bild-Slider mit R340

Bitte alle templatebezogenen Beiträge in diesem Forum veröffentlichen.
User avatar
swisscheese
Posts: 138
Joined: Mon 19. Feb 2007, 16:37
Location: Solothurn, Schweiz

Flexible Bild-Slider mit R340

Post by swisscheese »

Grüezi

Mit Hilfe der drei neuen Replacement Tags in den image- und imagespecial-Templates ({THUMB_WIDTH_MAX}, {THUMB_HEIGHT_MAX} und {THUMB_COLUMNS}) lassen sich wunderbar Slider-Templates erstellen, deren Grösse usw. sich nach den Einstellungen für Vorschaugrösse, Bildabstand und Spalten richtet.

Ein Beispiel dazu: hier und hier

Das Template dazu:

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>

  <script type="text/javascript">
  <!--

	window.addEvent('domready', function(){
	
		var slider_width	= 0;
		var step			= {THUMB_WIDTH_MAX} + {SPACE};
		var scroll_x		= 0;
		var slider_parent	= $('slider_container_{ID}').getSize().size.x;
		
		$$('div.slider a').each( function(e) {
			
			slider_width += e.getSize().size.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>
<!--IMAGES_FOOTER_END//-->
ein bisschen 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 */
und noch zwei kleine Bildchen zum Blättern Image Image, und fertig ist's.

Für den Enduser super-simpel: Bilder hochladen, Template wählen, Grösse/Spalten/Abstand einstellen, fertig ist die Gallerie.
Habt Spass damit.

Und ein ganz grosses Danke an Oliver!

Gruss, Gerd
User avatar
G-Punkt
Posts: 166
Joined: Wed 28. Nov 2007, 16:31
Location: Stadt Creußen
Contact:

Re: Flexible Bild-Slider mit R340

Post by G-Punkt »

Funzt astrein...
Vielen Dank auch

Ich werde mal schauen, ob ich das mit meinem Liebling "enlargeIt" zum Laufen kriege.

Grüße
Michael
--------------------------------------------------
Tschuldigung, wo finde ich die Suchfunktion?
User avatar
kukki
Posts: 1685
Joined: Mon 7. Feb 2005, 20:02
Location: Berlin Köpenick
Contact:

Re: Flexible Bild-Slider mit R340

Post by kukki »

:idea: Feine Idee, die Du da umgesetzt hast. Ich hab's natürlich gleich ausprobiert, meine Seite Strausberg (Siehe im Fuß: meine Stadt ...) auf die aktuelleste Version gebracht und eingebaut.
Aber eine "Macke" sollte noch beachtet und verbessert werden. Sowie man kein Lightbox einstellt, funktioniert die gnaze Sache nicht mehr. :?
Man ist ja nicht gezwunden, unbedingt Ligthbos zu benutzen! :mrgreen:
Vielleicht läßt sich das noch ändern :?:
Lieber arm dran als Arm ab!

meine historische Website: Jagdgeschwader 300 1.9.20-dev
kukki's SpIeLwIeSe V.1.9.12 R550 responsive
User avatar
Oliver Georgi
Site Admin
Posts: 9720
Joined: Fri 3. Oct 2003, 22:22
Location: Moscow, Russia
Contact:

Re: Flexible Bild-Slider mit R340

Post by Oliver Georgi »

Code: Select all

<?php
initMootools();
?>
Oliver Georgi | phpwcms Developer | GitHub | LinkedIn | Систрон
User avatar
swisscheese
Posts: 138
Joined: Mon 19. Feb 2007, 16:37
Location: Solothurn, Schweiz

Re: Flexible Bild-Slider mit R340

Post by swisscheese »

Hey kukki! Hast vollkommen recht. Ohne Lightbox lädt mootools nicht, und ohne mootools kein Scrollen.

Hier das aktualisierte 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>

[PHP]initMootools();[/PHP]

  <script type="text/javascript">
  <!--
	window.addEvent('domready', function(){
	
		var slider_width	= 0;
		var step			= {THUMB_WIDTH_MAX} + {SPACE};
		var scroll_x		= 0;
		var slider_parent	= $('slider_container_{ID}').getSize().size.x;
		
		$$('div.slider img').each( function(e) {
			
			slider_width += e.getSize().size.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>
<!--IMAGES_FOOTER_END//-->
Und wer's gerne möchte, das es von selbst losläuft: hier ein auto-scroll-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>

[PHP]initMootools();[/PHP]

  <script type="text/javascript">
  <!--
	window.addEvent('domready', function(){
	
		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().size.x;
		var myTimer = false;
	 	var direction = 1;
		
		$$('div.slider img').each( function(e) {
			
			slider_width += e.getSize().size.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.stop();
		 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.stop();
         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>
<!--IMAGES_FOOTER_END//-->
Gruss, Gerd
User avatar
kukki
Posts: 1685
Joined: Mon 7. Feb 2005, 20:02
Location: Berlin Köpenick
Contact:

Re: Flexible Bild-Slider mit R340

Post by kukki »

Jaaaaaaaaaaaaaaaaaaaaaa, genauuuuuuuuuuuuuuuuuuuuuuuuuuuuuu :mrgreen:
So gefällt mir die Sache. An solche "schönen" Lösungen kann man sich richtig erfreuen :D
Und ich sehe, dass Du von JavaScript Ahnung hast ... 8) Ich beneide alle die, die solche Sprache gelernt haben. Ich alter Sa.... werde mich damit nicht mehr abgeben wollen und können, bleibt sowieso nicht in meinem Kopf!
Lieber arm dran als Arm ab!

meine historische Website: Jagdgeschwader 300 1.9.20-dev
kukki's SpIeLwIeSe V.1.9.12 R550 responsive
User avatar
swisscheese
Posts: 138
Joined: Mon 19. Feb 2007, 16:37
Location: Solothurn, Schweiz

Re: Flexible Bild-Slider mit R340

Post by swisscheese »

Sieht gut aus auf Deiner Site. Wenn du nun noch alle Vorschaubilder gleich gross machst (auf Grösse schneiden) und die Bildunterzeile in der Vorschau ausschaltest, dann ist es perfekt.
kukki wrote:Und ich sehe, dass Du von JavaScript Ahnung hast ... 8) Ich beneide alle die, die solche Sprache gelernt haben.
:lol: :lol: Schon lange nicht mehr so gelacht. Kopieren, probieren und meistens auf die Nase fallen; ich habe höchstens eine leise Ahnung...
User avatar
kukki
Posts: 1685
Joined: Mon 7. Feb 2005, 20:02
Location: Berlin Köpenick
Contact:

Re: Flexible Bild-Slider mit R340

Post by kukki »

Na da freu ich mich ebenso einen Fachmann gefunden zu haben. Zu mehr als nur "paste & copy" und "learning by doing" reichst es bei mir auch nicht. Manchmal kommt sogar was gutes bei raus, wenn ich verstanden habe, was derjenige sich dabei gedacht hat! :mrgreen: Klar lache ich da mit. :lol: :lol: :lol:

Eh, wie meinst Du das ... Vorschau auf Größe schneiden .... die Bilder sind doch alle gleich hoch und breit, so dass ich nur eine gemeinsame Breite angebe und das war's auch schon. Da kann man sowieso keine Beschneidung mehr angeben, wenn einer der Werte leer bleibt. :wink:

Und Bildunterschriften ... werden beim Klick in keinem Browser wie IE6, FF, OP oder SF angezeigt :?: Was hast Du da auf Deinem Bildschirm? Das macht mich ganz kirre :shock:
Lieber arm dran als Arm ab!

meine historische Website: Jagdgeschwader 300 1.9.20-dev
kukki's SpIeLwIeSe V.1.9.12 R550 responsive
User avatar
swisscheese
Posts: 138
Joined: Mon 19. Feb 2007, 16:37
Location: Solothurn, Schweiz

Re: Flexible Bild-Slider mit R340

Post by swisscheese »

Schau mal hier:
Image
Firefox 3 auf Mac. Da lugt doch noch eine Bildunterzeile hervor. Und zwei Bilder sind 1px weniger hoch. Wenn du im Backend das Häckchen "Vorschau auf Grösse schneiden" aktivierst, sind alle Vorschauen genau gleich gross. Dann noch das Häckchen "Vorschaubilder ohne Bildunterzeile" und die komischen Text-Artefakte sind auch weg.
Wir Schweizer sind halt "Tüpfli-Schiisser" :wink:
Gruss, Gerd
pepe
Posts: 3954
Joined: Mon 19. Jan 2004, 13:46

Re: Flexible Bild-Slider mit R340

Post by pepe »

Manno kukki,
was haste denn da wieder mit den Pfeilen gemacht! Steinzeitmäßige Sägezahnkanten und KNALLIGES Horror GRÜN :evil:

Du mußt dir mal ein Buch über Farbkomposition besorgen... oder deine Frau fragen.

Oder mal hier rein sehen: http://kuler.adobe.com/

Und was die Sägezähne angeht... da sollte doch dein Grafikprogramm ein paar Schalterchen besitzen? Versuch die doch auch mal! Schmeiss einfach die VEKTOR-Darstellung an :idea: :lol:

Und die volle Breite des Contentfeldest könntest du doch auch ausnutzen... Einfach die Bildbreite vergrößern, das wäre beruhigender für die Besucher der Site, so bekommen die ja kein Auge mehr zu... NACHTS :D
User avatar
kukki
Posts: 1685
Joined: Mon 7. Feb 2005, 20:02
Location: Berlin Köpenick
Contact:

Re: Flexible Bild-Slider mit R340

Post by kukki »

Maaaaaaaaannoooooo, peeeepeeee
Wie Du vielleicht gesehen hast ... am 28 Juli "copy & paste" ... ob's geht und funtioniert ... jetzt, wo man noch Kleinigkeiten bereinigt hat, gehts ans Eingemachte. Klar sieht das Grün Ka..... aus, aber es funktionierte trotz Deines Augenkatharrs :lol:
Dir ist ja noch gar nicht aufgefallen, dass das "MouseOver" auf den Pfeilen einen Rahmen erzeugt ... :mrgreen: - Ich hab Dich schon verstanden... :wink:

@swisscheese:
Firefox 3 auf Mac
da habe ich mich noch nie drum gekümmert, sollte man aber vielleicht doch tun. Das eine Pixel ist 'ne Rundungsdifferenz, denn alle Bilder haben eine Größe von 805 bzw 808 pixel Breite - runtergerechnet auf 125 Breite bleibt ein Rest von 0.44 - ergo müßte abgerundet werden ... was sollst, an der Stelle könnte man sich jetzt hochreizen. Ich stelle es noch um.
Lieber arm dran als Arm ab!

meine historische Website: Jagdgeschwader 300 1.9.20-dev
kukki's SpIeLwIeSe V.1.9.12 R550 responsive
User avatar
santscho
Posts: 1442
Joined: Mon 2. Apr 2007, 08:56
Location: Schweiz

Re: Flexible Bild-Slider mit R340

Post by santscho »

Hallo Swisscheese. Das sieht ja prima aus. Per Zufall habe ich dieses Wochenende auch damit verbracht, ein Template für "Images Special" zu coden. Allerdings ist meiner nur für 5 Bilder gedacht....

www.society(dot)asiangeo(dot)com

Die Bilder sliden automatisch, können jedoch angehalten werden, indem man mit der Maus über das Bild fährt. Oder man kann direkt rechts ein Thumbnail anklicken, um ein Bild uszuwählen. Die Bildnummern werden mit dem GT-Mod dynamisch erzeugt. Jetzt fehlt nur noch das Dupferl auf dem i... Text über dem Slide. Eine Knacknuss, die ich gleich im Forum posten werde.

Dein Slider: toll gemacht!

Grüsse in die Heimat

Ralph
Schon Konfuzius sagte: "Sei kein YAML-Lappen". YAML-phpwcms-Integration auf http://www.yaml.phpwcms.org
User avatar
Oliver Georgi
Site Admin
Posts: 9720
Joined: Fri 3. Oct 2003, 22:22
Location: Moscow, Russia
Contact:

Re: Flexible Bild-Slider mit R340

Post by Oliver Georgi »

jGeQueriet - hehe - Schande! Nee, kommt bald Wahlmöglichkeit, ob MooTools oder jQuery im Frontend seitens phpwcms genutzt werden soll. Der eine mag dies, der andere das.

Aber fein gemacht santscho.
Oliver Georgi | phpwcms Developer | GitHub | LinkedIn | Систрон
User avatar
Jensensen
Posts: 2996
Joined: Tue 17. Oct 2006, 21:11
Location: auf der mlauer

Re: Flexible Bild-Slider mit R340

Post by Jensensen »

offtopic@pepe: viele [internet]jahre vor kuler gab es auch mindestens noch:
http://www.colormatch.dk/ (leider zur zeit unservicable)
http://www.colourlovers.com/
{so_much} | Knick-Knack. | GitHub
Umlaute im URL sind meistens immer Kacke.
User avatar
kukki
Posts: 1685
Joined: Mon 7. Feb 2005, 20:02
Location: Berlin Köpenick
Contact:

Re: Flexible Bild-Slider mit R340 / r400

Post by kukki »

:mrgreen:
Last edited by kukki on Wed 17. Mar 2010, 16:17, edited 1 time in total.
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