MiniHero Slider
Ik krijg vaak de vraag of ik geen slider functionaliteit in de MiniHero module kan maken.
Nu is het best lastig om het beheer simpel te houden voor een slider die alle miniHero functionaliteit in zich heeft, dus heb ik het idee omgedraaid.
Wat als we meerdere miniHero secties kunnen combineren in een slider.
Het resultaat is een javascript en een beetje creatief template werk wat dit regelt.
Voorbereiding:
- Zorg dat alle miniHero secties in hetzelfde content block wordt geplaatst. (uitleg WBCE of WebsiteBaker)
- Gebruik in de template een aparte variabele voor deze blokken (zie het php voorbeeld "Template code" hieronder)
en plaats die binnen een <div class="slides"></div> - Voeg de javascript toe aan de <head></head> template. Let op dat jQuery eerst geladen moet zijn!
- Verander de timing functies (startDelay, slideInterval en slideFading) naar je eigen smaak.
Maak vervolgens een aantal miniHero secties in het speciale blok.
Belangrijk:
- Zorg dat alle miniHero secties dezelfde hoogte instelling hebben.
- De slider werkt NIET met de parallax functie. Schakel die dus uit!
$block[1] = 'Default content'; // Any other blocks defined $block[10] = 'MiniHero output';
<?php
ob_start();
page_content(10); // assuming $block[10] was used for minihero
$heroslides=ob_get_contents();
ob_end_clean();
if($heroslides) {
echo '<div class="slides">';
echo $heroslides;
echo '</div>';
}
?>
<script>
$(window).load(function(){
var startDelay = 3000;
var slideInterval = 7000;
var slideFading = 800;
var internalSlideHeight = 0;
var internalTimer = null;
$('.slides > .minihero').each(function() { $(this).wrap('<div></div>'); });
if($('.slides > div > .minihero').length) {
var divs = $('.slides > div');
$('.slides > div').css({'position':'absolute','top':'0','left':'0','width':'100%','display':'none'});
$('.slides > div:last').addClass('current');
$('.slides .minihero').each(function( index ) { // PreLoad background images
if($(this).height() > internalSlideHeight){internalSlideHeight = $(this).height(); }
var bg = $(this).css('background-image');
bg = bg.replace('url(','').replace(')','').replace(/\"/gi,"");
(new Image()).src = bg;
});
$('.slides').css({'position':'relative'}).height(internalSlideHeight);
$('.slides > div:first').show();
$( window ).resize(function() {
var tmpHeight = 0;
$('.slides .minihero').each(function() {
if($(this).height() > tmpHeight){ tmpHeight = $(this).height(); }
});
$('.slides').height(tmpHeight);
});
setTimeout(heroSlider,startDelay);
}
function heroSlider() {
var current = $('.slides .current');
var currentIndex = divs.index(current), nextIndex = currentIndex + 1;
if (nextIndex >= divs.length) { nextIndex = 0; }
var next = divs.eq(nextIndex);
next.stop().fadeIn(slideFading,function() {
$(this).addClass('current '+nextIndex);
current.stop().fadeOut(slideFading,function() {
$(this).removeClass('current');
internalTimer = setTimeout(heroSlider,slideInterval);
});
});
}
})
</script>
