Frontend:
Backend:
Template: /template/inc_cntpart/imagespecial/slider_new.tmpl
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" id="slider_container_{ID}">
<div id="slider_{ID}" class="inner">
<!--IMAGES_HEADER_END//-->
<!--IMAGES_ENTRY_START//-->
[ZOOM]<a href="{IMAGE_ABS}" title="{INFOTEXT}" target="_blank"{LIGHTBOX}><img src="{THUMB_ABS}" alt="{CAPTION}" border="0" /><br />
<span class="thumb_capture">{INFOTEXT}</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>
<a href="#" id="move_left_{ID}">« Left «</a> | <a href="#" id="move_right_{ID}">» Right »</a>
[PHP]
$GLOBALS['block']['css']['slider_{ID}'] = 'specific/slider_new.css';
$GLOBALS['block']['custom_htmlhead']['slider_{ID}'] = ' <script type="text/javascript">
<!--
window.addEvent(\'domready\', function(){
var slider_width = 0;
var step = 106;
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;
});
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 - 106;
}
scroll_x = scroll_x + 106;
scroll.scrollTo(scroll_x, 0);
});
$(\'move_left_{ID}\').addEvent(\'click\', function(event) {
event = new Event(event).stop();
scroll_x = scroll_x - 106;
if(scroll_x < 0) {
scroll_x = 0;
}
scroll.scrollTo(scroll_x, 0);
});
});
//-->
</script>';
[/PHP]
<!--IMAGES_FOOTER_END//-->
Code: Select all
div.slider {
margin: 10px 0 10px 0;
padding: 5px 0 5px 0;
background-color: #888;
overflow: hidden;
width: 323px;
position: relative;
height: 146px;
}
div.slider .thumb_capture p {
font-size: 9px;
color: #444;
background: #ddd;
min-height: 25px;
}
div.slider div.inner {
margin: 0;
padding: 0;
list-style: none;
height: 146px;
width: 700px;
position: absolute;
left: 0;
top: 5px;
}
div.slider div.inner a {
border: 3px solid #FFFFFF;
padding: 0;
float: left;
background-color: #000000;
margin: 0 0 0 5px;
}
div.slider div.inner a:hover {
border: 3px solid #cfe9ff;
text-decoration: none;
}
div.slider div.inner a img {
width: 95px;
}