Witam,
Ostatnio dla znajomego robiłem ruchomy header przy pomocy mootools. Nie jest to co prawda taki sam efekt jak w podanym przykładzie ale może komuś się przyda.
Przykład wykorzystania na stronie: http://fotograf.kepno.pl
W pliku templatki (/templates/twoja-templatka/index.php) należy stworzyć funkcję ładującą moduły. Najlepiej stworzyć zewnętrzną klasę.
Funkcję ładowania modułów nazwę tutaj modules_switcher($type), gdzie type oznacza pozycję modułu. Kod funkcji:
function modules_switcher($type){
$db = &JFactory::getDBO();
$sql = "SELECT * FROM #__modules WHERE position='".$type."' AND published='1' ORDER BY ordering";
$db->setQuery($sql);
$results = $db->LoadObjectList();
$html = '';
if (count($results)>0){
$html.='<script type="text/javascript">
var banner_images='.count($results).';
var actual_banner=1;
</script>';
$html.='<div id="banner_images_container">
<div id="banner_scroller">';
$i=1;
foreach ($results as $row){
$html.='<div id="image'.$i.'" class="top_banner_module">'.$row->content.'</div>';
$i++;
}
$html.='</div>
</div>';
$html.='<div id="gallery_changer">';
for($j=$i;$j>1;$j--){
$class="";
if($j==2){
$class=" active_banner";
}
$html.='<div id="banner_'.($j-1).'" class="banner_number'.$class.'"> '.($j-1).' </div>';
}
$html.='</div>';
}
echo $html;
}
Zastosuj funkcję w miejscu, w którym chcesz dać zmieniający się header.
Następnie w sekcji head szablonu, umieszczamy następujący skrypt:
<script type="text/javascript">
window.addEvent('domready',function(){
var goon = 1;
var scroller = $('banner_scroller');
var gallery_changer = $$('.banner_number');
var slider = new Fx.Styles(scroller, {duration:800, wait:false, transition:Fx.Transitions.Quart.easeOut});
slider.start({
'left': 0
});
(function(){
if(scroller.getStyle('left').toInt() >= 0) {
goon=1;
}
if(scroller.getStyle('left').toInt() > 0 - (608*(banner_images-1))) {
var offset = scroller.getStyle('left').toInt()-(608*goon);
actual_banner+=goon;
gallery_changer.each(function(remove_class){
var banner_id = remove_class.getProperty('id');
banner_id = banner_id.split('_');
if(actual_banner== parseInt(banner_id[1])){
remove_class.addClass('active_banner');
}
else{
remove_class.removeClass('active_banner');
}
});
slider.start({
'left': offset
});
}else{
goon = -1;
var offset = scroller.getStyle('left').toInt()-(608*goon);
actual_banner+=goon;
gallery_changer.each(function(remove_class){
var banner_id = remove_class.getProperty('id');
banner_id = banner_id.split('_');
if(actual_banner== parseInt(banner_id[1])){
remove_class.addClass('active_banner');
}
else{
remove_class.removeClass('active_banner');
}
});
slider.start({
'left': offset
});
}
}).periodical(7000);
gallery_changer.each(function(element){
element.addEvent('mousedown', function() {
gallery_changer.each(function(remove_class){
remove_class.removeClass('active_banner');
});
element.addClass('active_banner');
var banner_id = element.getProperty('id');
banner_id = banner_id.split('_');
actual_banner = parseInt(banner_id[1]);
var offset = -(608*(actual_banner-1));
slider.start({
'left': offset
});
});
});
});
</script>
Kod CSS do switchera
#banner_images_container{
width: 608px;
height: 193px;
overflow: hidden;
position: relative;
}
#banner_scroller{
width: 10000px;
height: 193px;
position: relative;
left: 0px;
}
#banner_images_container img{
float: left;
}
#gallery_changer{
position: relative;
width: 608px;
top: -20px;
}
.banner_number{
padding: 2px 10px 2px 10px;
float: right;
margin-right: 7px;
background: #000877;
color: #ffffff;
cursor: pointer;
}
.active_banner{
background: #ffffff;
color: #3feb00;
}
Teraz wystarczy dodawać headery w postaci np obrazków jako "własny moduł HTML" w panelu admina, przypisując im odpowiednią pozycję ($type).
Informacja: Skrypt działa tylko w przypadku modułów "własny moduł HTML".
W razie wszelkich pytań proszę pisać. Chętnie odpowiem :)