eZ Community » Forums » General » Help Horizontal Accordion
expandshrink

Help Horizontal Accordion

Help Horizontal Accordion

Wednesday 22 June 2011 6:36:19 pm - 4 replies

Regards
I'm working on a "extension Horizontal Accordion" (http://nicolahibbert.com/horizontal-accordion-jquery-plugin/)for ez publish the template ezwebin. My idea is to create
two classes, for example:
Accordion gallery
Accordion Image
Use the Pluing "nikki-liteAccordion-08a68f0" but I failed to make funsion please
If you would like to help.
Sorry, could create a tutorial and send it, I'm new ez publish.
This is the code:

_______________

 

<h1>liteAccordion - a horizontal accordion plugin for jQuery</h1>
        <div style="height: 320px; width: 960px;" id="one" class="accordion dark rounded">
            <ol>
                <li>
                    <h2 class="selected" style="width: 320px; height: 48px; left: 0px;"><span>Slide One</span><b>1</b></h2>
                    <div style="width: 720px; left: 0px; padding-left: 48px;">
                        <figure>
                            <img src="liteAccordion%20-%20a%20horizontal%20accordion%20plugin%20for%20jQuery_files/1.jpg" alt="image">
                            <figcaption style="display: block;">I can haz big caek?</figcaption>
                        </figure>
                    </div>
                </li>
                <li>
                    <h2 class="" style="width: 320px; height: 48px; left: 768px;"><span>Slide Two</span><b>2</b></h2>
                    <div style="width: 720px; left: 768px; padding-left: 48px;">
                        <figure>
                            <img src="liteAccordion%20-%20a%20horizontal%20accordion%20plugin%20for%20jQuery_files/3.jpg" alt="image">
                            <figcaption style="display: block;">Whoops.</figcaption>
                        </figure>
                    </div>
                </li>
                <li>
                    <h2 class="" style="width: 320px; height: 48px; left: 816px;"><span>Slide Three</span><b>3</b></h2>
                    <div style="width: 720px; left: 816px; padding-left: 48px;">
                        <figure>
                            <img src="liteAccordion%20-%20a%20horizontal%20accordion%20plugin%20for%20jQuery_files/2a.jpg" alt="image">
                            <figcaption style="display: block;">Some caption text goes in here...</figcaption>
                        </figure>
                    </div>
                </li>
                <li>
                    <h2 class="" style="width: 320px; height: 48px; left: 864px;"><span>Slide Four</span><b>4</b></h2>
                    <div style="width: 720px; left: 864px; padding-left: 48px;">
                        <figure>
                            <img src="liteAccordion%20-%20a%20horizontal%20accordion%20plugin%20for%20jQuery_files/5.jpg" alt="image" width="768">
                            <figcaption style="display: block;">Pew pew pew!</figcaption>
                        </figure>
                    </div>
                </li>
                <li>
                    <h2 class="" style="width: 320px; height: 48px; left: 912px;"><span>Slide Five</span><b>5</b></h2>
                    <div style="width: 720px; left: 912px; padding-left: 48px;">
                        <figure>
                            <img src="liteAccordion%20-%20a%20horizontal%20accordion%20plugin%20for%20jQuery_files/2.jpg" alt="image">
                            <figcaption style="display: block;">More caption text here!</figcaption>
                        </figure>
                    </div>
                </li>
            </ol>
            <noscript>
                <p>Please enable JavaScript to get the full experience.</p>
            </noscript>
        </div>
<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>

Thursday 23 June 2011 12:19:23 pm

Hi Javier. 

First thing i could say it's about your javascript code. your javascript (as all javascript) use brackets, but brackets in templates denote ez publish code. so, the first thing i would is to use literal for enclose your javascript code. something like 

 <script type="text/javascript">
{literal}
// your code here
{/literal}
</script> 

Thursday 23 June 2011 1:18:24 pm

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(""blunk.gif Emoticon}alt="image{$i}"{/if}
                         src="{$child.data_map.image.content[accordion].url|ezurl('no','full')}" />
                    {if $child.data_map.url.content|ne(""blunk.gif Emoticon}</a>{/if}
                       
                    {if $child.data_map.image.content.alternative_text|ne(""blunk.gif Emoticon}
                        <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>          

Thursday 02 February 2012 9:24:29 pm

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:
           
<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>          

Thursday 02 February 2012 9:27:13 pm

Regards
I'm working on a "extension Horizontal Accordion" (http://nicolahibbert.com/horizontal-accordion-jquery-plugin/)for ez publish the template ezwebin. My idea is to create
two classes, for example:
Accordion gallery
Accordion Image
Use the Pluing "nikki-liteAccordion-08a68f0" but I failed to make funsion please
If you would like to help.
Sorry, could create a tutorial and send it, I'm new ez publish.
This is the code:

 <li>
                    <h2><span>Slide Three</span></h2>
                    <div>
                        <div class="figure">
                            <img src="img-demo/3.jpg" alt="image" />
                            <div class="figcaption">I can haz big caek?</div>
                        </div>
                    </div>
                </li>
expandshrink

You must be logged in to post messages in this topic!

36 542 Users on board!

Forums menu

Proudly Developed with from