Un block ezflow 'accordeon'

la configuration ezflow ( dans block.ini.append.php )

[BannerMediaCenter]
Name=Bannier Media Center
NumberOfValidItems=10
NumberOfArchivedItems=5
ManualAddingOfItems=enabled
ViewList[]=accordeon
ViewName[accordeon]=accordeon

la configuration du template ( dans override.ini dans votre design )

[block_banner_accordeon]
Source=block/view/view.tpl
MatchFile=block/banner/accordeon.tpl
Subdir=templates
Match[type]=BannerMediaCenter
Match[view]=accordeon

le template lui meme :

il faut mettre dans le header les ressources suivantes : <link rel="stylesheet" href="{"stylesheets/accordeon/liteaccordion.css"|ezdesign(no)}" > <script src="{"javascript/accordeon/liteaccordion.jquery.js"|ezdesign(no)}"></script>

disponibleressources_accordeon.zip ici

voici le code du template /// <div id="container_flash"> <center>

   <div id="one" class="accordion">
       <ol>
       {foreach $block.valid_nodes as $index => $valid_node}

<li> <h2><span>{$valid_node.name}</span></h2> <div> <div class="figure">

                          {if and (is_set($valid_node.data_map.image),$valid_node.data_map.image.has_content) }
                               <img src="{$valid_node.data_map.image.content.original.url|ezroot(no,full)}" alt="image" height="330px"  width="100%" />
                           {else}
                               <img src="{"banner/default.jpg"|ezimage(no,full)}" alt="" height="330px"  width="100%" />
                           {/if}
                           <div class="figcaption">{$valid_node.data_map.chapo.content.output.output_text|shorten(150)|strip_tags()} <br /> <a href="{$valid_node.url_alias|ezurl(no)}" >{"Show more"|i18n("accordeon/texte")} >>></a></div>

</div> </div> </li>

        {/foreach}
        </ol>

</div> <script> // liteAccordion demos $('#one').liteAccordion({ldelim}

                containerWidth : 999,           // width of accordion (px)
                containerHeight : 330,          // height of accordion (px)
                headerWidth : 48,               // width of tabs (px)
                autoPlay : true,
                theme : 'bpce',
                pauseOnHover : true, 
                slideSpeed : 600,

rounded : true, // whether to use rounded corners or not** (boolean)

                enumerateSlides : false,         // show slide number in tab
                firstSlide : 1 
       {rdelim});

</script> </center> </div>

reste a faire

integrer la version 2 du script. integrer css et js avec ezjscore gerer la possiblité d'en avoir plusieurs dans la meme page...( mettre en rambom sur l'id css...)

AST Blog