Anpassen des slider.tmpl

[oekmed]

Moin,
schöne Sache der Slider. Momentan immer das slider.tmpl aus /template/inc_cntpart/imagespecial
Nur drei Fragen kann ich seit Samstag nicht knacken.

1. Wie ordne ich eine eigene css zu?
Wenn ich $GLOBALS['block']['css']['slider'] = 'specific/slider.css'; entsprechend ändere bleibt das ohne Auswirkungen.
2. Die Bildunterzeile wird in den Thumbs nicht angezeigt. Aber im vergrößerten Bild.
3. Es gelingt mir nicht [INFOTEXT]{INFOTEXT}[/INFOTEXT] oder [INFOHTML]{INFOHTML}[/INFOHTML] so einzubinden, dass der Infotext unter dem vergrößertem Bild erscheint.

Lösungsansatz wäre nett.

Burkhard

[Jensensen]

weitere infos: http://forum.phpwcms.org/viewtopic.php?p=104626#p104626

[oekmed]

Danke für die Links. Hatte ich auch schon gelesen.
Hilft mir bei 2 und 3 allerdings nicht wirklich weiter.

Ich denke nach fast 4 Jahren phpwcms werde ich mich nun doch umorientieren.
Die Begeisterung, damals hervorgerufen durch die Arbeit von Pepe, hat sich schleichend in immer größeren Frust gewandelt.
Und das ist ja anscheinend nicht nur bei mir so. Die Gründe dafür sind ja hier im Forum schon hinreichend diskutiert worden.
Vielleicht bin ich aber auch nur zu faul oder zu dämlich mich mit phpwcms über Standardlayouts hinausgehend zu beschäftigen.

Allen, die mir in den letzten Jahren bisweilen geholfen haben nochmals ein "Danke".

Tschüß phpwcms

[flip-flop]

Dann viel Spaß in anderen Gefilden. (Aber nicht traurig sein wenn du dort noch eher an die Grenzen stößt, denn flexibler ist kaum ein anderes).
Nur im Standardbereich ist die Auswahl dann logischerweise größer, wobei die Grenze dann nicht mehr überwindbar ist).
Mittlerweile werden ja vorzugsweise Funktionen aus phpwcms in andere CMS-System übernommen ...... ohne den Ursprung zu nennen.

Knut

[juergen]

mod_klau

Die einzigen von denen ich mich jemals derart theatralisch verabschiedet habe, war die Telekom. Und da war ich wirklich froh. Aber so ein CMS ? Ich denke ich bin noch nicht richtig verwurzelt und muss noch einige Dekaden bleiben, gerade jetzt wo wir am 21.03 eine Userverwaltung sehen werden ... Geheimis ausgeplaudert. Setzen 6.

[update]

Geheimis aus Plaudern

wo ist das Geheimnis her? Aus Plaudern?
ROFLMAO
Mal im Ernst: tatsächlich gibt es kaum ein anderes System mit solch' einer Flexibilität und einem so hohen Forscheranteil

[flip-flop]

Zu deinem eigentlichen Problem:

hier ein bebildertes Beispiel eines einfachen Sliderskripts: http://forum.phpwcms.org/viewtopic.php?p=114557#p114557

Knut

[Jensensen]

ich wollte nix schreiben, nur wem was pmsen. wieso bin ich jetzt hier?
[ver{w}irrt, sorry, oops]

@mod = lösch, mach weg!

[oekmed]

Moin,

Is ja richtig. Ich hab ja auch recht lange nach genau so einem flexiblen System gesucht. Also, wie Claus sagt, wieder den Fokus auf's Forschen.
Danke Knut für den Waschzettel. Das war aber eigentlich auch alles klar.
Punkt 1. Es fehlte bei mir ein "/" im Pfad zur css.
Punkt 2. Erledigt.
Aber zun Punkt 3 nochmal das Problem. Vielleicht habe ich ja die englischen Texte nicht verstanden und es ist nicht lösbar.
In den Thumbs möchte ich eine Bildunterschrift "Kater". Diese Bildunterschrift soll aber in der Vorschau nicht erscheinen, sondern nur fett, quasi als Titel, im vergrößerten Bild. Das klappt alles wunderbar!!!
Zusätzlich soll aber nur im vergrößertem Bild auch ein Infotext auftauchen:

Kater = Bildunterschrift als Titel der Lightbox
Das ist Kater Mikesch bla bla = Kurzer Infotext

Geht das? Ich schnalle im Moment einfach nicht wie ich den Text in die Lightbox kriege (Brett).

Burkhard

[flip-flop]

INFOTEXT in die LightBox:

OG hat mit {LIGHTBOX_CAPTION} einen Tag eingeführt der auch gleichzeitig die Textübergaberegel für die LightBox beinhaltet, die lautet:
title="mein Text für die LightBox" (Allerdings in einer speziellen Formatierung (HTML-Entities)-> aus <br /> wird z.B. <br />). (Wenn es trotzdem funktioniert ist das eher Zufall - meine Meinung.)


Also wenn z.B. der InfoText in die Lightbox soll dann würde

[ZOOM]<a href="{IMAGE_ABS}" {LIGHTBOX_CAPTION}target="_blank"{LIGHTBOX}>

getauscht gegen

[ZOOM]<a href="{IMAGE_ABS}" title="{INFOTEXT}" target="_blank"{LIGHTBOX}>


---------------------- technisches:
Die absolut korrekte Form wäre (INFOTEXT geht nicht, daher INFOHTML):

[ZOOM]<a href="{IMAGE_ABS}" title="<p>[PHP] echo html_entities(nl2br('{INFOHTML}'));[/PHP]</p>" target="_blank"{LIGHTBOX}> ----------------------
Verwende ruhig die erste Variante, das klappt schon.


Wichtig!!!: Das nun hinzugekommene Leerzeichen zwischen ......title="{INFOTEXT}"[LEERZEICHEN]target="........
beachten.

Knut

[oekmed]

Danke Knut, funktioniert.
Aber wie das nun mal so ist, kaum ist eine Baugrube zu geht die nächste auf.
In EINEM Artikel zwei Slider untereinander. Unabhängig voneinander steuerbar.
Momentan fliegt einer immer wahlweise weg. Einzeln ist alles ok.
Liegt wohl an den Variablen im Script. Ma sehn. Forschen sozusagen.

[update]

Ma sehn. Forschen sozusagen.

genau!!

[oekmed]

Aha Aha - but some example would be nice as always

[flip-flop]

Du musst das JS Script verdoppeln, mit unterschiedlichen Variablen. Die jeweilige trigger-id muss auch entsprechend angepasst werden.

<div class="slider" id="slider_container_{ID}">
<div id="slider_{ID}" class="inner">

$GLOBALS['block']['css']['slider'] = 'specific/img_slider.css';
$GLOBALS['block']['custom_htmlhead']['slider'] = ' <script type="text/javascript">


window.addEvent(\'domready\', function(){

var slider_width = 0;
var step = 128;
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 + 5;

});

usw.

-------------------------------------------------------------


<div class="slider2" id="slider2_container_{ID}">
<div id="slider2_{ID}" class="inner2">

$GLOBALS['block']['css']['slider2'] = 'specific/img_slider2.css';
$GLOBALS['block']['custom_htmlhead']['slider2'] = ' <script type="text/javascript">

window.addEvent(\'domready\', function(){

var slider2_width = 0;
var step2 = 107;
var scroll_x2 = 0;
var slider2_parent = $(\'slider2_container_{ID}\').getSize().size.x;

$$(\'div.slider2 a\').each( function(e) {

slider2_width += e.getSize().size.x + 5;

});

usw.

[oekmed]

Genauso habe ich es versucht.
1. slider_oben.tmpl - siehe hier:

Code: Select all

<!--IMAGES_HEADER_START//-->

[TITLE]<h1>{TITLE}</h1>[/TITLE]
[SUBTITLE]<h2>{SUBTITLE}</h2>[/SUBTITLE]
[TEXT]{TEXT}[/TEXT]
<!--
[EFFECT_1][Ich bin der Effekt 1] : [/EFFECT_1]
[EFFECT_2][Ich bin der Effekt 2] : [/EFFECT_2]
[EFFECT_3][Ich bin der Effekt 3]<br />[/EFFECT_3]
-->
<div class="slider_o" id="slider_container_o_{ID}">
	<div id="slider_o_{ID}" class="inner_o">  
<!--IMAGES_HEADER_END//-->


<!--IMAGES_ENTRY_START//-->
		[ZOOM]<a href="{IMAGE_ABS}" {LIGHTBOX_CAPTION}target="_blank"{LIGHTBOX}><img src="{THUMB_ABS}" alt="{THUMB_NAME}" border="0"/><br />
<span class="thumb_capture">{CAPTION}</span></a>		
[/ZOOM][ZOOM_ELSE]
		[IMAGE_URL]<a href="{IMAGE_URL}"{IMAGE_TARGET}>[/IMAGE_URL]<img src="{THUMB_ABS}" alt="{THUMB_NAME}" border="0" />[IMAGE_URL]</a>[/IMAGE_URL]
[/ZOOM_ELSE]
<!--IMAGES_ENTRY_END//-->


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


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


<!--IMAGES_FOOTER_START//-->
	</div>
</div>
<div style="text-align:center">
<a href="#" id="move_left_o">Nach links</a> | <a href="#" id="move_right_o">Nach rechts</a>
</div>

[PHP]

	$GLOBALS['block']['css']['slider'] = 'specific/slider_oben.css';
	
	$GLOBALS['block']['custom_htmlhead']['slider'] = '  <script type="text/javascript">
  <!--

	window.addEvent(\'domready\', function(){
	
		var slider_width	= 0;
		var step			= 161;
		var scroll_x		= 0;
		var slider_parent	= $(\'slider_container_o_{ID}\').getSize().size.x;
		
		$$(\'div.slider_o a\').each( function(e) {
			
			slider_width += e.getSize().size.x + 5;
			
		});
				
		var scroll = new Fx.Scroll(\'slider_container_o_{ID}\', {
			wait: false,
			duration: 550,
			offset: {\'x\': 0, \'y\': 0},
			transition: Fx.Transitions.Quad.easeOut
		});
		
		scroll.scrollTo(0, 0);
		
		$(\'move_right_o\').addEvent(\'click\', function(event) {
			event = new Event(event).stop();
			if(slider_width-slider_parent <= scroll_x) {
				scroll_x = scroll_x - 161;
			}
			scroll_x = scroll_x + 161;
			scroll.scrollTo(scroll_x, 0);
		});
		
		$(\'move_left_o\').addEvent(\'click\', function(event) {
			event = new Event(event).stop();
			scroll_x = scroll_x - 161;
			if(scroll_x < 0) {
				scroll_x = 0;
			}
			scroll.scrollTo(scroll_x, 0);
		});
		

	});
	
  //-->
  </script>';

[/PHP]
<!--IMAGES_FOOTER_END//-->

2. slider_unten.tmpl - hier.

Code: Select all

<!--IMAGES_HEADER_START//-->

[TITLE]<h1>{TITLE}</h1>[/TITLE]
[SUBTITLE]<h2>{SUBTITLE}</h2>[/SUBTITLE]
[TEXT]{TEXT}[/TEXT]
<!--
[EFFECT_1][Ich bin der Effekt 1] : [/EFFECT_1]
[EFFECT_2][Ich bin der Effekt 2] : [/EFFECT_2]
[EFFECT_3][Ich bin der Effekt 3]<br />[/EFFECT_3]
-->
<div class="slider_u" id="slider_container_u_{ID}">
	<div id="slider_u_{ID}" class="inner_u">  
<!--IMAGES_HEADER_END//-->


<!--IMAGES_ENTRY_START//-->
		[ZOOM]<a href="{IMAGE_ABS}" {LIGHTBOX_CAPTION}target="_blank"{LIGHTBOX}><img src="{THUMB_ABS}" alt="{THUMB_NAME}" border="0"/><br />
<span class="thumb_capture">{CAPTION}</span></a>		
[/ZOOM][ZOOM_ELSE]
		[IMAGE_URL]<a href="{IMAGE_URL}"{IMAGE_TARGET}>[/IMAGE_URL]<img src="{THUMB_ABS}" alt="{THUMB_NAME}" border="0" />[IMAGE_URL]</a>[/IMAGE_URL]
[/ZOOM_ELSE]
<!--IMAGES_ENTRY_END//-->


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


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


<!--IMAGES_FOOTER_START//-->
	</div>
</div>
<div style="text-align:center">
<a href="#" id="move_left_u">links</a> | <a href="#" id="move_right_u">rechts</a>
</div>

[PHP]

	$GLOBALS['block']['css']['slider'] = 'specific/slider_unten.css';
	
	$GLOBALS['block']['custom_htmlhead']['slider'] = '  <script type="text/javascript">
  <!--

	window.addEvent(\'domready\', function(){
	
		var slider_width	= 0;
		var step			= 161;
		var scroll_x		= 0;
		var slider_parent	= $(\'slider_container_u_{ID}\').getSize().size.x;
		
		$$(\'div.slider_u a\').each( function(e) {
			
			slider_width += e.getSize().size.x + 5;
			
		});
				
		var scroll = new Fx.Scroll(\'slider_container_u_{ID}\', {
			wait: false,
			duration: 550,
			offset: {\'x\': 0, \'y\': 0},
			transition: Fx.Transitions.Quad.easeOut
		});
		
		scroll.scrollTo(0, 0);
		
		$(\'move_right_u\').addEvent(\'click\', function(event) {
			event = new Event(event).stop();
			if(slider_width-slider_parent <= scroll_x) {
				scroll_x = scroll_x - 161;
			}
			scroll_x = scroll_x + 161;
			scroll.scrollTo(scroll_x, 0);
		});
		
		$(\'move_left_u\').addEvent(\'click\', function(event) {
			event = new Event(event).stop();
			scroll_x = scroll_x - 161;
			if(scroll_x < 0) {
				scroll_x = 0;
			}
			scroll.scrollTo(scroll_x, 0);
		});
		

	});
	
  //-->
  </script>';

[/PHP]
<!--IMAGES_FOOTER_END//-->

Zwei verschiedene css angelegt.

Komischerweise, egal wie ich die beiden CP im Artikel anordne, es knallt immer nur im oberen. Der untere Slider wird komplett IMMER richtig dargestellt.
[ID:44] Bilder spezial {CONTENT} sichtbar
[ID:37] Bilder spezial {CONTENT} hidden = alles ok
-
[ID:44] Bilder spezial {CONTENT} hidden
[ID:37] Bilder spezial {CONTENT} sichtbar = alles ok
-
[ID:44] Bilder spezial {CONTENT} sichtbar
[ID:37] Bilder spezial {CONTENT} sichtbar = [ID:44] zerschossen. Der Obere kennt anscheinend eine Klasse nicht.

Dabei ist es vollkommen egal in welcher Reihenfolge die CP's angeordnet sind.