|
Javier Olara
|
Wednesday 22 June 2011 9:36:19 am
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>
|
|
Javier Olara
|
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>
|
