|
Javier Olara
|
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>
|
|
scrieler _
|
Wednesday 06 July 2011 1:20:26 am
Welcome to eZ, please use code Tags for the code
(insert literal text, u find it in the editor menu bar) There are a few possibilities to create this jQuery Accordion, I would create a container class 'accordion_container' and the child class 'accordion_part'. If an accordion_container class exist, load the jQuery and fetch his childs and loop his content (name and image) in the needed li.
|