Transforming jQuery plugins into eZ publish extensions

Step 3: Polishing your extension

Our extension now is functional, but needs some polishing. First realize that images can appear in different sizes, while our slider only accepts one specific size of image. We need to fix that.

The way is to create an image class to generate images of a fixed size. Create the contentslider/settings/image.ini.append.php file:

<?php /* #?ini charset="utf-8"?

[AliasSettings]
AliasList[]=slider

[slider]
Filters[]
Filters[]=geometry/scaleexact=445;300

*/ ?>

In our block's template, change the following code snippet:

<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>

To :

<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=slider attribute=$vnode.data_map.image}
</a>
<span>{$vnode.object.data_map.message.data_text}</span>
</li>

To use multiple blocks in one page, you must change the id pikaname to a single value, so that we can use the variable {$block.id}, our final template code looks like this:

{def $valid_nodes = $block.valid_nodes}

<!-- BLOCK: START -->

<div class="pikachoose">
        <ul id="container{$block.id}" 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=slider 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 type="text/javascript">
<!--  

            $(document).ready(
                function (){ldelim}
                    $("#container{$block.id}").PikaChoose({ldelim}transition:[-1]{rdelim});

                    $("#container{$block.id}").jcarousel({ldelim}scroll:5, wrap: 'circular',                    
                            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>

<!-- BLOCK: END -->

{undef $valid_nodes}

This code uses ezjscore functions, there’s already a good tutorial about this extension, so, I’ll not explain here how it works, you just need to know that it is including the css and js files.

You will also need to make some changes to the file contentslider / design / ezflow / stylesheets / contentslider.css, so it will look a little better in your site:

.pika-wrap {width: 520px; margin: 0 auto;}

.pika-image {position: relative; height: 300px; width: 445px; background: #fafafa; border: 1px solid #e5e5e5; padding: 10px;}
    /*position image holders */
    .pika-image .animation, .pika-image .main-image {position: absolute; top: 10px; left: 10px;}
    .pika-image .animation {display: none;z-index:2;}
    .pika-image img {border:0;}

.pika-image .caption {position: absolute; background: url(../images/75-black.png);  border: 1px solid #141414; font-size: 11px; color: #fafafa; padding: 10px; text-align: right; bottom: 10px; right: 10px;}
    .pika-image .caption p {padding: 0; margin: 0; line-height: 14px;}

.pika-imgnav a {position: absolute; text-indent: -5000px; display: block;z-index:3;}
    .pika-imgnav a.previous {background: url(../images/prev.png) no-repeat left 50%; height: 300px; width: 50px; top: 10px; left: 10px;cursor:pointer;}
    .pika-imgnav a.next {background: url(../images/next.png) no-repeat right 50%; height: 300px; width: 50px; top: 10px; right: 10px;cursor:pointer;}
    .pika-imgnav a.play {background: url(../images/play.png) no-repeat 50% 50%; height: 100px; width: 40px;top:0;left:50%;display: none;cursor:pointer;}
    .pika-imgnav a.pause {background: url(../images/pause.png) no-repeat 50% 50%; height: 100px; width: 40px;top:0;left:50%;display:none;cursor:pointer;}

.pika-textnav {overflow: hidden; margin: 10px 0 0 0;}
.pika-textnav a {font-size: 12px; text-decoration: none; font-family:  helvetica, arial, sans-serif; color: #333; padding: 4px;}
        .pika-textnav a:hover {background: #e5e5e5; color: #0065B2;}
    /*
    .pika-textnav a.previous {float: left; width: auto; display: block;}
    .pika-textnav a.next {float: right; width: auto; display: block;}
    */
    .pika-textnav a.previous, .pika-textnav a.next {display:none;}
    
.pika-thumbs {margin: 10px 0 0 0; padding: 0; overflow: hidden; }
    .pika-thumbs li {float: left; list-style-type: none; width: 74px; padding: 3px; margin: 0 2px; background: #fafafa; border: 1px solid #e5e5e5; cursor: pointer;}
        .pika-thumbs li:last {margin: 0;}
        .pika-thumbs li .clip {position:relative;width: 74px; height: 74px; text-align: center; vertical-align: center; overflow: hidden;}

.clip span{background-color:black;position:absolute;top:5px;left:5px;display:block;}
ul#pikame{width:570px;}
        
        
/* jCarousel Styles */
/*if you're not using the carousel you can delete everything below this */
.jcarousel-skin-pika .jcarousel-container-horizontal { padding: 15px 0px;}
.jcarousel-skin-pika .jcarousel-container-vertical { width: 90px; height: 350px; padding: 20px 20px;}
.jcarousel-skin-pika .jcarousel-clip-horizontal {height: 90px; width: 465px;}
.jcarousel-skin-pika .jcarousel-clip-vertical { width:  90px; height: 350px;}
.jcarousel-skin-pika .jcarousel-item-horizontal { margin-right: 10px;}
.jcarousel-skin-pika .jcarousel-item-vertical {margin-bottom: 10px;}
.jcarousel-skin-pika .jcarousel-item-placeholder {background: #fff; color: #000;}