Thursday 23 June 2011 4:18:24 am

Thanks Carlos for the reply.
But what I want to do is the template tpl,  for example: accordion.tlp.
 
Using LOOP OBJECTS to create the class identifiers.
This is to simplify the original code:
<div id="one" class="accordion">
            <ol>
                <li>
                    <h2 class="selected" style="width: 320px; height: 48px; left: 0px;"><span>Slide One</span></h2>
                    <div style="width: 720px; left: 0px; padding-left: 48px;">
                        <h3>This is Slide One.</h3>
                    <div>
                        <figure>
                            <img src="img-demo/1.jpg" alt="image" />
                            <figcaption>I can haz big caek?</figcaption>
                        </figure>
                    </div>
                </li>
</ol>

<script>$('#one').liteAccordion({    onActivate : function() {        this.find('figcaption').fadeOut();    },    slideCallback : function() {           this.find('figcaption').fadeIn();    },    autoPlay : true,    pauseOnHover : true,    theme : 'dark',    rounded : true,    enumerateSlides : true             }).find('figcaption:first').show();</script>

to make it something like this:

{def $classes = array( 'accordion_image' )}
        {def $children_count=fetch_alias( 'children_count', hash( 'parent_node_id',$object.main_node_id,
                                                                'class_filter_type', 'include',
                                                                'class_filter_array', $classes ) )}
        {if gt($children_count,0)}
            {def $whs=fetch_alias( 'children', hash( 'parent_node_id',$object.main_node_id,
                                                              'sort_by', $object.sort_array,
                                                              'class_filter_type', 'include',
                                                              'class_filter_array', $classes,
                                                              'limit', 1) ) }
             {foreach $whs as $wh }
            <style type="text/css">
                #one{ldelim}                 
                    width:{$wh.data_map.image.content[accordion].width}px;
                    height:{$wh.data_map.image.content[accordion].height}px;
                {rdelim}
            </style>
            {/foreach}    
                <div id="one" class="accordion">         
                {def $children=fetch_alias( 'children', hash( 'parent_node_id',$object.main_node_id,
                                                              'sort_by', $object.sort_array,
                                                              'class_filter_type', 'include',
                                                              'class_filter_array', $classes ) ) }
              
                {def $i=0}
                {foreach $children as $child }
                         <img width="{$child.data_map.image.content[accordion].width}"
                         height="{$child.data_map.image.content[accordion].height}"
                         alt=""
                         {if $child.data_map.image.content.alternative_text|ne("")}alt="image{$i}"{/if}
                         src="{$child.data_map.image.content[accordion].url|ezurl('no','full')}" />
                    {if $child.data_map.url.content|ne("")}</a>{/if}
                       
                    {if $child.data_map.image.content.alternative_text|ne("")}
                        <figcaption style="display: block;{$i}"></figcaption>
                            {$child.data_map.image.content.alternative_text}   
                        </div>
                        {set $i=inc( $i )}
                    {/if}      
                {/foreach}
             </div>
        {/if}  
   
 
           
<script type="text/javascript">
$('#one').liteAccordion({ldelim}
   
    theme : '{attribute_view_gui attribute=$object.data_map.dark}',
    slideSpeed : {attribute_view_gui attribute=$object.data_map.slideSpeed},
    firstSlide : {attribute_view_gui attribute=$object.data_map.firstSlide},
    autoPlay : {if $object.data_map.autoPlay.content}true{else}false{/if},   
    pauseOnHover : {if $object.data_map.pauseonhover.content}true{else}false{/if},
    rounded : {if $object.data_map.rounded.content}true{else}false{/if},
    enumerateSlides : {if $object.data_map.enumerateSlides.content}true{else}false{/if} 
   
   
{rdelim});
                               
        </script>
    </div>
</div>