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

Step 1: Downloading and testing the plug-in

In this tutorial we'll use the Pikachoose jQuery plugin as a base, which is a slideshow with autoplay options, navigation buttons and carousel. The first step is to download the archive ( zip ), uncompress and test the plugin. If you like the plugin, please consider donating to the developer to eat some pizza and continue with the project.

Pickachoose, jQuery plug-in for carousels

 

After performing the tests it is time to analyze the important plug-in files. Inside the plug-in folder there are the root assets folder, which in turn contains the images and js folders. We will need all the files from the images folder and only two js from the scripts folder, jquery.jcarousel.min.js and jquery.pikachoose.js.

Moreover, we must use some example, or more than one to create our eZ publish extension, so, you'll need to analyze the example we will use, in this case the “bottom with carousel " (root folder -> bottom -> with-carousel.html).
The first part is the code to import the necessary external files:

<link type="text/css" href="css/styles.css" rel="stylesheet" />
<script type="text/javascript" src="../assets/js/jquery.js"></script>
<script type="text/javascript" src="../assets/js/jquery.pikachoose.js"></script>
<script type="text/javascript" src="../assets/js/jquery.jcarousel.min.js"></script>
 

eZ Publish comes with the jquery.js script (shipped through the ezjscore extension ), and we have marked the jquery.pikachoose.js and the jquery.jcarousel.min.js as necessary, but we need to mark the sample style sheet file as important : root folder / bottom / css / styles.css. We will have to modify this file in our extension.

The second code snippet is the Javascript example:

<script language="javascript">
    <!--
    $(document).ready(
        function (){
            $("#pikame").PikaChoose();
 
            $("#pikame").jcarousel({scroll:4,                    
                initCallback: function(carousel)
                {
                    $(carousel.list).find('img').click(function() {
                        //console.log($(this).parents('.jcarousel-item').attr('jcarouselindex'));
                        carousel.scroll(parseInt($(this).parents('.jcarousel-item').attr('jcarouselindex')));
                    });
                }
            });
 
        });
 
    -->
</script>
 

This is the code block that will be used and adapted in our extension. The third section of the html code is important for our extension:

<div class="pikachoose">
Basic example
    <ul id="pikame" class="jcarousel-skin-pika">
        <li><a href="http://www.pikachoose.com"><img src="../1.jpg"/></a><span>Thanks to <a href="http://web.cara-jo.net">Cara Jo</a> for the awesome new themes!</span></li>
        <li><a href="http://www.pikachoose.com"><img src="../2.jpg"/></a><span>jCarousel is supported and integrated with PikaChoose!</span></li>
 
        <li><a href="http://www.pikachoose.com"><img src="../3.jpg"/></a><span>Let me know at jeremy.m.fry@gmail.com if you find any bugs!</span></li>
        <li><a href="http://www.pikachoose.com"><img src="../4.jpg"/></a><span>Caption</span></li>
        <li><a href="http://www.pikachoose.com"><img src="../5.jpg"/></a><span>Caption</span></li>
        <li><a href="http://www.pikachoose.com"><img src="../1.jpg"/></a><span>Caption</span></li>
        <li><a href="http://www.pikachoose.com"><img src="../2.jpg"/></a><span>Caption</span></li>
        <li><a href="http://www.pikachoose.com"><img src="../3.jpg"/></a><span>Caption</span></li>
 
        <li><a href="http://www.pikachoose.com"><img src="../4.jpg"/></a><span>Caption</span></li>
        <li><a href="http://www.pikachoose.com"><img src="../5.jpg"/></a><span>Caption</span></li>
 
    </ul>
</div>
 

This is the part of the html that will be examined and put in our extension.
So we have an initial basic procedure for adapting a Jquery plug-in to eZ Publish :

  • find the important extension files,
  • look at an example and find some other imported files, in this case a css, a javascript and the main example html.

With all of these, it is time to move on and create our extension.

 
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