Transforming jQuery plugins into eZ publish extensions

New Content Class to finalize our block

We will create a content class called Slide with the following attributes (name and datatype are described):

• Title: Text line,
• Message: Text line,
• Image: Image,
• Object: Related Objects.

Assuming we will only associate “Slide” objects to our block, here is how our contentslider.tpl file looks so far:

{def $valid_nodes = $block.valid_nodes}

<!-- BLOCK: START -->

<div class="pikachoose">
Basic example
    <ul id="pikame" class="jcarousel-skin-pika">
        {foreach $valid_nodes as $vnode}

        <li><a href={fetch( 'content', 'node', hash( 'node_id', $vnode.data_map.object.content.relation_list[0].node_id ) ).url_alias|ezurl}>{attribute_view_gui image_class=large attribute=$vnode.data_map.image}</a><span>{$vnode.object.data_map.message.data_text}</span></li>

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

<script language="javascript">
    <!--
    $(document).ready(
        function (){ldelim}
            $("#pikame").PikaChoose();

            $("#pikame").jcarousel({ldelim}scroll:4,                    
                initCallback: function(carousel)
                {ldelim}
                    $(carousel.list).find('img').click(function() {ldelim}
                        //console.log($(this).parents('.jcarousel-item').attr('jcarouselindex'));
                        carousel.scroll(parseInt($(this).parents('.jcarousel-item').attr('jcarouselindex')));
                    {rdelim});
                {rdelim}
            {rdelim});

        {rdelim});
        
    -->
</script>

We forgot a key aspect : including the required external elements : javascript and css files, required by the Jquery plug-in. Here is how, relying on eZJSCore's template operators, we can easily include these external elements :

{ezcss_require( 'contentslider.css' )}
{ezscript_require( array('ezjsc::jquery','jquery.jcarousel.min.js', 'jquery.pikachoose.js') )}

Here is how our updated template code looks :

{def $valid_nodes = $block.valid_nodes}

<!-- BLOCK: START -->

<div class="pikachoose">
Basic example
    <ul id="pikame" class="jcarousel-skin-pika">
        {foreach $valid_nodes as $vnode}

        <li><a href={fetch( 'content', 'node', hash( 'node_id', $vnode.data_map.object.content.relation_list[0].node_id ) ).url_alias|ezurl}>{attribute_view_gui image_class=large attribute=$vnode.data_map.image}</a><span>{$vnode.object.data_map.message.data_text}</span></li>

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

{ezcss_require( 'contentslider.css' )}

{ezscript_require( array('ezjsc::jquery','jquery.jcarousel.min.js', 'jquery.pikachoose.js') )}

<script language="javascript">
    <!--
    $(document).ready(
        function (){ldelim}
            $("#pikame").PikaChoose();

            $("#pikame").jcarousel({ldelim}scroll:4,                    
                initCallback: function(carousel)
                {ldelim}
                    $(carousel.list).find('img').click(function() {ldelim}
                        //console.log($(this).parents('.jcarousel-item').attr('jcarouselindex'));
                        carousel.scroll(parseInt($(this).parents('.jcarousel-item').attr('jcarouselindex')));
                    {rdelim});
                {rdelim}
            {rdelim});

        {rdelim});
        
    -->
</script>