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 */
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