Help Horizontal Accordion

Wednesday 22 June 2011 6:27:06 am

Regards
I'm working on a "extension Horizontal Accordion" 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" (http://nicolahibbert.com/horizontal-accordion-jquery-plugin/) 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>