Forums / General / Accordion Horizontal extension for ezwebin

"Please Note:
  • At the specific request of Ibexa we are changing this projects name to "Exponential" or "Exponential (CMS)" effective as of August, 11th 2025.
  • This project is not associated with the original eZ Publish software or its original developer, eZ Systems or Ibexa".

Accordion Horizontal extension for ezwebin

Author Message

Javier Olara

Thursday 23 June 2011 4:08:07 pm

regards
Have any idea how to create an extension for ezwebin, like this:
http://www.quoc-huy.com/
Please if you have a tutorial and send it to me I'm new
with Exponential.

Thiago Campos Viana

Thursday 23 June 2011 5:19:03 pm

PS: This post is about your last forum topic with this same name.

Hi

I made a test here and could see the plugin you had post in your last forum topic has nothing special:

{ezcss_require( 'liteaccordion.css' )}

<div id="one" class="accordion">
            <ol>
                <li>
                    <h2><span>Slide One</span></h2>
                    <div>
                        <div class="figure">
                            <img src={"1.jpg"|ezimage} alt="image" />
                            <div class="figcaption">I can haz big caek?</div>
                        </div>
                    </div>
                </li>
                <li>
                    <h2><span>Slide Two</span></h2>
                    <div>
                        <div class="figure">
                            <img src={"2.jpg"|ezimage} alt="image" />
                            <div class="figcaption">I can haz big caek?</div>
                        </div>
                    </div>
                </li>
                <li>
                    <h2><span>Slide Three</span></h2>
                    <div>
                        <div class="figure">
                            <img src={"2a.jpg"|ezimage} alt="image" />
                            <div class="figcaption">I can haz big caek?</div>
                        </div>
                    </div>
                </li>
            </ol>
            <noscript>
                <p>Please enable JavaScript to get the full experience.</p>
            </noscript>
        </div>
        {ezscript_require( array('ezjsc::jquery', 'liteaccordion.jquery.js') )}
        
        <script>
            // liteAccordion demos
            $('#one').liteAccordion({ldelim}
                    onActivate : function() {ldelim}
                        this.find('.figcaption').fadeOut();
                    {rdelim},
                    slideCallback : function() {ldelim}    
                        this.find('.figcaption').fadeIn();
                    {rdelim},
                    autoPlay : true,
                    pauseOnHover : true,
                    theme : 'dark',
                    rounded : true,
                    enumerateSlides : true                    
            {rdelim}).find('.figcaption:first').show();
        </script>

Please, read carefully the jquery plugin tutorial.

eZ Publish Certified Developer: http://auth.ez.no/certification/verify/376924

Twitter: http://twitter.com/tcv_br