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//-->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 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
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.
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!
