I use ditto to show the last entries of a specific parent. For this I am using the following call:
[!Ditto? &parents=`5` &orderBy=`createdon DESC` &display=`3`
&total=`4` &extenders=`summary` &tpl=`tpl_news` &truncLen=`160` &truncOffset=`20` !]
I now want my website to continuously loop through a specific range of parent ids and change the parents parameter every other second.
The result should be a "slideshow" of the content called by the ditto calls.
No special effects, no design (except the one provided by the template).
Is there an easy way to manage this?
Solution:
Got it to work!
I created this resource:
<div id="newsticker_vn">[!Ditto? &parents=`6` &orderBy=`createdon DESC` &display=`1`<br />&total=`4` &extenders=`summary` &tpl=`tpl_news` &truncLen=`160` &truncOffset=`20` !]</div>
<div id="newsticker_hp">[!Ditto? &parents=`5` &orderBy=`createdon DESC` &display=`1`<br />&total=`4` &extenders=`summary` &tpl=`tpl_news` &truncLen=`160` &truncOffset=`20` !]</div>
<div id="newsticker_ks">[!Ditto? &parents=`7` &orderBy=`createdon DESC` &display=`1`<br />&total=`4` &extenders=`summary` &tpl=`tpl_news` &truncLen=`160` &truncOffset=`20` !]</div>
and use this script to get the desired ditto calls and loop them:
<div id="newsticker"></div>
<script type="text/javascript">
function execute() {
$( "#newsticker" ).load("[~348~] #newsticker_vn").delay( 300 ).fadeIn( "slow" ).delay( 6000 ).fadeOut( "slow",execute2 );
}
function execute2() {
$( "#newsticker" ).load("[~348~] #newsticker_ks").delay( 300 ).fadeIn( "slow" ).delay( 6000 ).fadeOut( "slow",execute3 );
}
function execute3() {
$( "#newsticker" ).load("[~348~] #newsticker_hp").delay( 300 ).fadeIn( "slow" ).delay( 6000 ).fadeOut( "slow",execute );
}
execute();
</script>
I tried doing all steps in one function but for some reason it was showing every ditto call three times before rotating, no idea why.
Thank you for your help!