eZ Community » Learn » eZ Publish » Transforming jQuery plugins into eZ...

Transforming jQuery plugins into eZ publish extensions

Friday 11 February 2011 1:06:54 pm

  • Currently 5 out of 5 Stars.
  • 1
  • 2
  • 3
  • 4
  • 5

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>
 
36 542 Users on board!

Tutorial menu

Printable

Printer Friendly version of the full article on one page with plain styles

Author(s)

Proudly Developed with from