mooTools noobSlide for eZ Publish

This article shows how to use noobSlide (http://www.efectorelativo.net/laboratory/noobSlide/index.html) script with eZ Publish.

For this example lets use Sample 4, slideshow data will be taken from folder, (68 in this case), every slide will be represented by Article object.

First, we'll need the template code to fetch the articles and create the html structure:

{let frontpages=fetch('content','list',hash('parent_node_id',68))}

<div class="sample">
<div class="mask1">
<div id="box8">
{foreach $frontpages as $child}
<div>
<h1>{$child.name}</h1>

{if $child.data_map.intro.content.is_empty|not}
<div class="attribute-short">
{attribute_view_gui attribute=$child.data_map.intro}
</div>
{/if}

{if $child.data_map.body.content.is_empty|not}
<div class="attribute-long">
{attribute_view_gui attribute=$child.data_map.body}
</div>
{/if}

{if $child.data_map.image.has_content}
<div class="attribute-image" >
{attribute_view_gui attribute=$child.data_map.image image_class=medium}

{if $child.data_map.caption.has_content}
<div class="caption">
{attribute_view_gui attribute=$child.data_map.caption}
</div>
{/if}
</div>
{/if}

</div>
{/foreach}
</div>
</div>

<div class="buttons" id="handles8_more" style="width:{count($frontpages)|mul(30)}px;">
{foreach $frontpages as $index => child}
<span><img src={"images/greencircle.png"|ezdesign} alt="{$index}" /></span>
{/foreach}
</div>

</div>

{/let}

We could easily use this code for the first part as well:

{foreach $frontpages as $child}
<div>
{node_view_gui content_node=$child view="full"}
</div>
{/foreach}

Then, there's some javascript scripting, we'll put this in the same template as the html code

<script type="text/javascript">
{literal}
window.addEvent('domready',function(){
var handles8_more = $$('#handles8_more span');
var hs8 = new noobSlide({
box: $('box8'),
startItem: 1,
autoPlay: true,
items: $$('#box8 h1'),
size: 435,
handles: $$('handles8 span'),
onWalk: function(currentItem,currentHandle){
$$(this.handles,handles8_more).removeClass('active');
$$(currentHandle,handles8_more[this.currentIndex]).addClass('active');
}
});
//more handle buttons
hs8.addHandleButtons(handles8_more);

hs8.walk(0)
});
{/literal}
</script>

And finally, here's the eZ Publish extension.
This includes both the javascript files (mootools as well) and required stylesheets.

Download: http://www.badongo.com/file/11670076


Compatibility note: Tested with eZ Publish 4.01 with ezwebin, but should work on basically every version of eZ Publish