J Content Carousel shows article from a category or from the entire category in a slide show. Detail link open article in a new slider window. Facebook, Twitter and Linked share is also available for this module.

Module source code for Joomla 1.6, 1.7, 2.5 and 3.x are as follows:

Create a folder called “mod_jcontentcarousel _j1.6_j1.7_j2.5_and_J3.0” now in that folder place the below files and folder:

 

J Content Carousel

That is the all files and folder we need to create this module. Now let’s start with mod_jcontentcarousel.xml files.

a) mod_jcontentcarousel.xml:

mod_jcontentcarousel.xml is the primary file of this module in where all the definition is given including parameter too. So let's open this xml file and see what is inside of that file.

<?xml version="1.0" encoding="utf-8"?>
<extension type="module" version="1.6.0" client="site" method="upgrade">
    <name>J Content Carousel</name>
    <author>Md. Shaon Bahadur</author>
    <creationDate>July 2013</creationDate>
    <copyright>Copyright (C) 2013 j-download.com, All rights reserved.</copyright>
    <license>http://www.gnu.org/licenses/gpl-2.0.html GNU/GPL</license>
    <authorEmail>you@ yourdomain.com</authorEmail>
    <authorUrl>www.j-download.com</authorUrl>
    <version>1.0.2</version>
    <description>
        <![CDATA[
            <table width="80%" cellpadding="0" cellspacing="0" border="0" align="center"><tr><td>
              <table width="100%" cellpadding="5" cellspacing="5" border="0"><tr><td valign="top"><img src="/../modules/mod_jcontentcarousel/tmpl/images/jcontentcarousel.png" border="0" /></td>
              <td valign="top" style="padding-left:60px;">
                <p style="text-align: left;">J Content Carousel shows article from a category or from all the category in a slide show. Detail link open article in a new slider window. Facebook, Twitter and Linked share is also available for this module.</p>
                <p style="text-align: left;">Major Module Parameter:</p>
                <p style="text-align: left;">
                    <ul style="text-align: left;">
                        <li>Category Selection</li>
                        <li>Width</li>
                        <li>Height</li>
                        <li>Background Color</li>
                        <li>Font Color</li>
                        <li>Auto Scroll with Time</li>
                        <li>Title, Read more, Navigation and Social icon display with Yes, No Feature.</li>
                    </ul>
                </p>
              </td></tr></table>
            </td></tr>
            </table>
            ]]>
    </description>
    <files>
        <filename module= "mod_jcontentcarousel"> mod_jcontentcarousel.php </filename>
        <folder>tmpl</folder>
        <filename>helper.php</filename>
        <filename>index.html</filename>
        <filename> mod_jcontentcarousel.xml </filename>
    </files>
    <help key=" JHELP_EXTENSIONS_MODULE_ MANAGER_LOGIN" />
    <config>
        <fields name="params">
            <fieldset name="basic">
            <field name="catid" type="category" extension="com_content" multiple="false" size="1" default="0" label="JCATEGORY" description=" MOD_LATEST_NEWS_ FIELD_CATEGORY_DESC " >
                <option value=""> JOPTION_ALL_CATEGORIES </option>
            </field>
            <field name="width" type="text" default="660" filter="safehtml" label="Wrapper Width" description="Please Enter Width" class="inputbox" />
            <field name="height" type="text" default="400" filter="safehtml" label="Wrapper Height" description="Please Enter Height" class="inputbox" />
            <field name="titlecolor" type="text" default="#000000" filter="safehtml" label="Wrapper Title Color" description="Please Enter Title Color" class="inputbox" />
            <field name="textcolor" type="text" default="#FFFFFF" filter="safehtml" label="Wrapper Text Color" description="Please Enter Text Color" class="inputbox" />
            <field name="backgroundcolor" type="text" default="#FFFFFF" filter="safehtml" label="Wrapper Background" description="Please Enter Background Color" class="inputbox" />
            <field name="textlength" type="text" default="200" filter="safehtml" label="Intro Text Length" description="Please Enter Intro Text Length" class="inputbox" />
            <field name="autoscroll" type="radio" default="1" label="Auto Scroll" description="Please Select Yes or No For Auto Scroll." class="btn-group">
                <option value="0">JNo</option>
                <option value="1">JYes</option>
            </field>
            <field name="scrollspeed" type="text" default="6000" filter="safehtml" label="Scroll Speed" description="Please Enter Scroll Speed" class="inputbox" />
            <field name="showtitle" type="radio" default="1" label="Show Title" description="Please Select Yes or No For Show Title." class="btn-group">
                <option value="0">JNo</option>
                <option value="1">JYes</option>
            </field>
            <field name="showreadmore" type="radio" default="1" label="Show Read More" description="Please Select Yes or No For Show Read More." class="btn-group">
                <option value="0">JNo</option>
                <option value="1">JYes</option>
            </field>
            <field name="navigation" type="radio" default="1" label="Show Navigation" description="Please Select Yes or No For Navigation." class="btn-group">
                <option value="0">JNo</option>
                <option value="1">JYes</option>
            </field>
            <field name="socialicon" type="radio" default="1" label="Show Social Icon" description="Please Select Yes or No For Social Icon." class="btn-group">
                <option value="0">JNo</option>
                <option value="1">JYes</option>
            </field>
            <field name="customcss" type="textarea" rows="10" cols="35" default="#j_content_wrapper .ca-item h3{ color: #000000 !important; }" filter="safehtml" label="Custom Css" description="Please Enter Custom Css" />

            </fieldset>
            <fieldset
                name="advanced">
                <field
                    name="layout"
                    type="modulelayout"
                    label="JFIELD_ALT_LAYOUT_LABEL"
                    description=" JFIELD_ALT_MODULE_ LAYOUT_DESC " />
                <field
                    name="moduleclass_sfx"
                    type="text"
                    label=" COM_MODULES_FIELD_ MODULECLASS_SFX_ LABEL"
                    description=" COM_MODULES_ FIELD_MODULECLASS_SFX_ DESC" />
                <field
                    name="cache"
                    type="list"
                    default="0"
                    label="COM_ MODULES_FIELD_ CACHING_LABEL"
                    description="COM _MODULES_FIELD_ CACHING_DESC">
                    <option
                        value="0">COM _MODULES_FIELD_ VALUE_NOCACHING </option>
                </field>
            </fieldset>
        </fields>
    </config>
</extension>

 

Here you will see some basic information like name, author, creation date, copyright, license, author email, author url, version and description. Then you will see Files name, which will be copied during installation of this module. Lastly there are module parameters. Which can be differ according to your need? You can edit this xml file according to your need and save it.

b) mod_jcontentcarousel.php

Now let’s open mod_jcontentcarousel.php file, which is the primary file of this module.

<?php

/*---------------------------
# J Content Carousel
# ---------------------------
# author                Md. Shaon Bahadur
# copyright             Copyright (C) 2013 j-download.com. All Rights Reserved.
# @license -            http://www.gnu.org/licenses/gpl-2.0.html GNU/GPL
# Websites:             http://www.j-download.com
# Technical Support:    http://www.j-download.com/request-for-quotation.html
------------------------------*/

defined('_JEXEC') or die;
require_once dirname(__FILE__).'/helper.php';

    $catid   = $params->get( 'catid', 0 );

    $layout = JModuleHelper:: getLayoutPath(' mod_jcontentcarousel');
    $options = modJcontent CarouselHelper: :getJcontent CarouselOptions($catid);

    require($layout);

?>

Here we called require_once dirname(__FILE__).'/helper.php'; , which is a helper file we need during working in this module. Then we get catid into a variable called $catid. Then module layout has been called. Lastly we called a function name getJcontentCarouselOptions which is in the helper file. So let’s open helper file and see what is inside of that file.

c) index.html

This is mainly a blank html file . This file used in joomla component, module and plug-in to hide folder structure to viewer. If you open the file then you will see a code like <html><body></body></html>

d) helper.php

Helper file called the main function in this module , which we used to get the data from a category. Let’s see what is inside of helper.php file.

<?php
/*---------------------------
# J Content Carousel
# ---------------------------
# author                Md. Shaon Bahadur
# copyright             Copyright (C) 2013 j-download.com. All Rights Reserved.
# @license -            http://www.gnu.org/licenses/gpl-2.0.html GNU/GPL
# Websites:             http://www.j-download.com
# Technical Support:    http://www.j-download.com/request-for-quotation.html
------------------------------*/

defined('_JEXEC') or die;

class modJcontentCarouselHelper
{
    static function getJcontentCarouselOptions($id)
    {
        $db        =   & JFactory::getDBO();
        $where  =   "";
        if($id!=0){
          $where    =   "AND a.catid = ".(int)$id."";
        }

        $query = 'SELECT a.id, a.title, a.introtext, a.fulltext, a.images' .
            ' FROM #__content AS a' .
            ' WHERE a.state="1" '.$where.'  ORDER BY a.id';
        $db->setQuery($query);

        if (!($options = $db->loadObjectList())) {
            echo "MD ".$db->stderr();
            return;
        }

        return $options;
    }
}
?>

Helper file has a class called modJcontentCarouselHelper and a function called getJcontentCarouselOptions. Function executes a query to get the data from database based on category id.

Then we have tmpl folder. This is basically our view part. This folder content all the files we need to keep for view. Let’s see each of the files one by one.

e) index.html

We have 4 index.html files in different folder like css, images, js and tmpl. This index.html file is just blank file with few code like <html><body></body></html> to protect user not being see folder and file structure. Then we have couple of css, js and images file. Css files are used to organize the view of the module. We have 4 css files in css folder. Then we have js folder and inside that folder there are 3 js files. These js files are used to make the animation. Then we have a php file called default.php, which is the view file of our module. Let’s see what is inside of that file.

f) default.php

Default php file load all the info and show at front-end of the module. Source code of the file are as follows:

<?php

/*---------------------------
# J Content Carousel
# ---------------------------
# author                Md. Shaon Bahadur
# copyright             Copyright (C) 2013 j-download.com. All Rights Reserved.
# @license -            http://www.gnu.org/licenses/gpl-2.0.html GNU/GPL
# Websites:             http://www.j-download.com
# Technical Support:    http://www.j-download.com/request-for-quotation.html
------------------------------*/

    defined('_JEXEC') or die('Restricted access');
    $title              =       $params->get( 'showtitle', 0 );
    $width              =       $params->get( 'width', 0 );
    $height             =       $params->get( 'height', 0 );
    $backgroundcolor    =       $params->get( 'backgroundcolor', 0 );
    $titlecolor         =       $params->get( 'titlecolor', 0 );
    $textcolor          =       $params->get( 'textcolor', 0 );
    $textlength         =       $params->get( 'textlength', 100 );
    $showreadmore       =       $params->get( 'showreadmore', 0 );
    $navigation         =       $params->get( 'navigation', 0 );
    $socialicon         =       $params->get( 'socialicon', 0 );
    $customcss          =       $params->get( 'customcss', 0 );
    $autoscroll         =       $params->get( 'autoscroll', 1 );
    $scrollspeed        =       $params->get( 'scrollspeed', 6000 );
    $detailwidth        =       $width-330;
?>
    <link rel="stylesheet" type="text/css" href="/modules/mod_jcontentcarousel/tmpl/css/jcontentcarousel_site.css" />
    <link rel="stylesheet" type="text/css" href="/modules/mod_jcontentcarousel/tmpl/css/jcontentcarousel_style.css" />
    <link rel="stylesheet" type="text/css" href="/modules/mod_jcontentcarousel/tmpl/css/jcontentcarousel_jquery.jscrollpane.css" media="all" />
    <style>
        <?php echo $customcss; ?>
        #j_content_wrapper{
          color: <?php echo $textcolor; ?>;
        }
        #j_content_wrapper .ca-container{
            width: <?php echo $width; ?>px;
            height: <?php echo $height; ?>px;
        }
        #j_content_wrapper .ca-content{
            width: <?php echo $detailwidth; ?>px;
        }
        #j_content_wrapper .ca-item h3{
            color: <?php echo $titlecolor; ?>;
        }
        #j_content_wrapper .ca-item-main{
            background: <?php echo $backgroundcolor; ?>;
        }
        #j_content_wrapper .ca-nav{
            <?php if($navigation==0){ echo 'display:none;'; }?>
        }


    </style>

    <div id="j_content_wrapper">
        <div id="ca-container" class="ca-container">
            <div class="ca-wrapper">
                <?php for ($i = 0, $n = count($options); $i < $n; $i ++) : ?>
                    <div class="ca-item ca-item-<?php echo $i; ?>">
                        <div class="ca-item-main">
                            <?php
                                $images = json_decode($options[$i]->images);
                                if($images->image_intro){
                            ?>                       
                            <div class="ca-icon">
                                <img src="/<?php echo $images->image_intro; ?>" border="0" alt="<?php echo $images->image_intro_alt; ?>" />
                            </div>
                            <?php } ?>
                            <h3><?php echo $options[$i]->title; ?></h3>
                            <h4>
                                <span class="ca-quote">&ldquo;</span>
                                <span>
                                  <?php
                                        if($options[$i]->introtext){
                                            if (strlen($options[$i]->introtext) >= 14){
                                                echo (substr($options[$i]->introtext, 0, $textlength). "...");
                                            }
                                              else
                                            {
                                                echo($options[$i]->introtext);
                                            }
                                        }
                                        else{
                                            if (strlen($options[$i]->fulltext) >= 14){
                                                echo (substr($options[$i]->fulltext, 0, $textlength). "...");
                                            }
                                              else
                                            {
                                                echo($options[$i]->fulltext);
                                            }
                                        }
                                    ?>
                                </span>
                            </h4>
                                <a href="javascript:void" class="ca-more">more...</a>
                        </div>
                        <div class="ca-content-wrapper">
                            <div class="ca-content">
                                <?php if($title==1){ ?>
                                    <h6><?php echo $options[$i]->title; ?></h6>
                                <?php } ?>
                                <a href="javascript:void" class="ca-close">close</a>
                                <div class="ca-content-text">
                                    <?php
                                          if($options[$i]->introtext){
                                            echo $options[$i]->introtext;
                                          }
                                          else{
                                            echo $options[$i]->fulltext;
                                          }
                                      ?>
                                </div>
                                <ul>
                                    <?php if($showreadmore==1){ ?>
                                    <li><a href="/component/content/article?id=&lt;?php_echo_$options[$i]=&gt;id;_?=&gt;=&Itemid=&lt;?php_echo_$_REQUEST['Itemid']=">Read more</a></li>
                                    <?php } ?>
                                    <?php if($socialicon==1){ ?>
                                    <li><a href="http://www.facebook.com/sharer.php?u=<?php echo JURI::base(); ?>index.php?option=com_content&view=article&id=<?php echo $options[$i]->id; ?>&Itemid=<?php echo $_REQUEST['Itemid']; ?>">Facebook</a></li>
                                    <li><a href="https://twitter.com/intent/tweet?url=<?php echo JURI::base(); ?>index.php?option=com_content&view=article&id=<?php echo $options[$i]->id; ?>&Itemid=<?php echo $_REQUEST['Itemid']; ?>">Tweet</a></li>
                                    <li><a href="http://www.linkedin.com/shareArticle?mini=true&url=<?php echo JURI::base(); ?>index.php?option=com_content&view=article&id=<?php echo $options[$i]->id; ?>&Itemid=<?php echo $_REQUEST['Itemid']; ?>&source=LinkedIn">Linkedin</a></li>
                                    <?php } ?>
                                </ul>
                            </div>
                        </div>
                    </div>
                   <?php endfor; ?>
            </div>
        </div>
    </div>
    <script type="text/javascript" src="/modules/mod_jcontentcarousel/tmpl/js/jquery.min.js"></script>
    <script type="text/javascript" src="/modules/mod_jcontentcarousel/tmpl/js/jquery.easing.1.3.js"></script>
    <script type="text/javascript" src="/modules/mod_jcontentcarousel/tmpl/js/jquery.mousewheel.js"></script>
    <script language="JavaScript">
    (function($) {
        var aux     = {
        navigate    : function( dir, $el, $wrapper, opts, cache ) {

            var scroll      = opts.scroll,
                factor      = 1,
                idxClicked  = 0;

            if( cache.expanded ) {
                scroll      = 1;
                factor      = 3;
                idxClicked  = cache.idxClicked;
            }

            if( dir === 1 ) {
                $wrapper.find('div.ca-item:lt(' + scroll + ')').each(function(i) {
                    $(this).clone(true).css( 'left', ( cache.totalItems - idxClicked + i ) * cache.itemW * factor + 'px' ).appendTo( $wrapper );
                });
            }
            else {
                var $first  = $wrapper.children().eq(0);

                $wrapper.find('div.ca-item:gt(' + ( cache.totalItems  - 1 - scroll ) + ')').each(function(i) {
                    $(this).clone(true).css( 'left', - ( scroll - i + idxClicked ) * cache.itemW * factor + 'px' ).insertBefore( $first );
                });
            }

            $wrapper.find('div.ca-item').each(function(i) {
                var $item   = $(this);
                $item.stop().animate({
                    left    :  ( dir === 1 ) ? '-=' + ( cache.itemW * factor * scroll ) + 'px' : '+=' + ( cache.itemW * factor * scroll ) + 'px'
                }, opts.sliderSpeed, opts.sliderEasing, function() {
                    if( ( dir === 1 && $item.position().left < - idxClicked * cache.itemW * factor ) || ( dir === -1 && $item.position().left > ( ( cache.totalItems - 1 - idxClicked ) * cache.itemW * factor ) ) ) {
                        $item.remove();
                    }
                    cache.isAnimating   = false;
                });
            });

        },

        openItem    : function( $wrapper, $item, opts, cache ) {
            cache.idxClicked    = $item.index();
            cache.winpos        = aux.getWinPos( $item.position().left, cache );
            $wrapper.find('div.ca-item').not( $item ).hide();
            $item.find('div.ca-content-wrapper').css( 'left', cache.itemW + 'px' ).stop().animate({
                width   : '<?php echo $detailwidth; ?>px',
                left    : cache.itemW + 'px'
            }, opts.itemSpeed, opts.itemEasing)
            .end()
            .stop()
            .animate({
                left    : '0px'
            }, opts.itemSpeed, opts.itemEasing, function() {
                cache.isAnimating   = false;
                cache.expanded      = true;

                aux.openItems( $wrapper, $item, opts, cache );
            });

        },

        openItems   : function( $wrapper, $openedItem, opts, cache ) {
            var openedIdx   = $openedItem.index();

            $wrapper.find('div.ca-item').each(function(i) {
                var $item   = $(this),
                    idx     = $item.index();

                if( idx !== openedIdx ) {
                    $item.css( 'left', - ( openedIdx - idx ) * ( cache.itemW * 3 ) + 'px' ).show().find('div.ca-content-wrapper').css({
                        left    : cache.itemW + 'px',
                        width   : '<?php echo $detailwidth; ?>px'
                    });

                    aux.toggleMore( $item, false );
                }
            });
        },
        toggleMore  : function( $item, show ) {
            ( show ) ? $item.find('a.ca-more').show() : $item.find('a.ca-more').hide();
        },
        closeItems  : function( $wrapper, $openedItem, opts, cache ) {
            var openedIdx   = $openedItem.index();

            $openedItem.find('div.ca-content-wrapper').stop().animate({
                width   : '0px'
            }, opts.itemSpeed, opts.itemEasing)
            .end()
            .stop()
            .animate({
                left    : cache.itemW * ( cache.winpos - 1 ) + 'px'
            }, opts.itemSpeed, opts.itemEasing, function() {
                cache.isAnimating   = false;
                cache.expanded      = false;
            });

            aux.toggleMore( $openedItem, true );

            $wrapper.find('div.ca-item').each(function(i) {
                var $item   = $(this),
                    idx     = $item.index();

                if( idx !== openedIdx ) {
                    $item.find('div.ca-content-wrapper').css({
                        width   : '0px'
                    })
                    .end()
                    .css( 'left', ( ( cache.winpos - 1 ) - ( openedIdx - idx ) ) * cache.itemW + 'px' )
                    .show();

                    aux.toggleMore( $item, true );
                }
            });
        },

        getWinPos   : function( val, cache ) {
            switch( val ) {
                case 0                  : return 1; break;
                case cache.itemW        : return 2; break;
                case cache.itemW * 2    : return 3; break;
            }
        }
    },
    methods = {
        init        : function( options ) {

            if( this.length ) {

                var settings = {
                    sliderSpeed     : 500,
                    sliderEasing    : 'easeOutExpo',
                    itemSpeed       : 500,
                    itemEasing      : 'easeOutExpo',
                    scroll          : 1
                };

                return this.each(function() {

                    if ( options ) {
                        $.extend( settings, options );
                    }

                    var $el             = $(this),
                        $wrapper        = $el.find('div.ca-wrapper'),
                        $maincontainer  = $el.find('div.container'),
                        $isopen         = 0,
                        $autoscroll     = <?php echo $autoscroll; ?>,
                        $asspeed        = <?php echo $scrollspeed; ?>,
                        $items          = $wrapper.children('div.ca-item'),
                        cache           = {};

                    cache.itemW         = $items.width();
                    cache.totalItems    = $items.length;

                    if( cache.totalItems > 3 )
                        $el.prepend('<div class="ca-nav"><span class="ca-nav-prev">Previous</span><span class="ca-nav-next">Next</span></div>')

                    if( settings.scroll < 1 )
                        settings.scroll = 1;
                    else if( settings.scroll > 3 )
                        settings.scroll = 3;

                    var $navPrev        = $el.find('span.ca-nav-prev'),
                        $navNext        = $el.find('span.ca-nav-next');

                    $wrapper.css( 'overflow', 'hidden' );

                    $items.each(function(i) {
                        $(this).css({
                            position    : 'absolute',
                            left        : i * cache.itemW + 'px'
                        });
                    });

                    $el.find('a.ca-more').live('click.contentcarousel', function( event ) {
                        if( cache.isAnimating ) return false;
                        cache.isAnimating   = true;
                        $isopen = 1;
                        $(this).hide();
                        var $item   = $(this).closest('div.ca-item');
                        aux.openItem( $wrapper, $item, settings, cache );
                        clearTimeout(tid);
                        return false;
                    });

                    $el.find('a.ca-close').live('click.contentcarousel', function( event ) {
                        if( cache.isAnimating ) return false;
                        cache.isAnimating   = true;
                        var $item   = $(this).closest('div.ca-item');
                        aux.closeItems( $wrapper, $item, settings, cache );
                        $isopen = 0;
                        return false;
                    });

                    if ($autoscroll == 1){
                        var tid = setTimeout(ascroll, $asspeed);

                        $wrapper.bind('mouseover.contentcarousel', function( event ) {
                            clearTimeout(tid);
                        });

                        $wrapper.bind('mouseout.contentcarousel', function( event ) {
                            if ($isopen == 0){
                            tid = setTimeout(ascroll, $asspeed);
                            };
                        });

                    };

                    function ascroll() {
                        if( cache.isAnimating ) return false;
                        cache.isAnimating   = true;
                        aux.navigate( 1, $el, $wrapper, settings, cache );
                        tid = setTimeout(ascroll, $asspeed);
                    };

                    $navPrev.bind('click.contentcarousel', function( event ) {
                        if( cache.isAnimating ) return false;
                        cache.isAnimating   = true;
                        aux.navigate( -1, $el, $wrapper, settings, cache );
                    });

                    $navNext.bind('click.contentcarousel', function( event ) {
                        if( cache.isAnimating ) return false;
                        cache.isAnimating   = true;
                        aux.navigate( 1, $el, $wrapper, settings, cache );
                    });

                    $el.bind('mousewheel.contentcarousel', function(e, delta) {
                        if(delta > 0) {
                            if( cache.isAnimating ) return false;
                            cache.isAnimating   = true;
                            aux.navigate( -1, $el, $wrapper, settings, cache );
                        }
                        else {
                            if( cache.isAnimating ) return false;
                            cache.isAnimating   = true;
                            aux.navigate( 1, $el, $wrapper, settings, cache );
                        }
                        return false;
                    });

                });
            }
        }
    };

    $.fn.contentcarousel = function(method) {
        if ( methods[method] ) {
            return methods[method].apply( this, Array.prototype.slice.call( arguments, 1 ));
        } else if ( typeof method === 'object' || ! method ) {
            return methods.init.apply( this, arguments );
        } else {
            $.error( 'Method ' +  method + ' does not exist on jQuery.contentcarousel' );
        }
    };

})(jQuery);
    </script>
    <script type="text/javascript">
        $('#ca-container').contentcarousel();
    </script>

At the beginning we get the module parameter like showtitle, width, height, backgroundcolor, titlecolor, textcolor, textlength, showreadmore, navigation, customcss, autoscroll and scrollspeed. This will be used to make the view. Then we called css file in external and inline. Inline css used that parameter to make the view. Then the main part comes up. HTML part, we have used a loop to get the data and show html on the base of that loop. This will load all the data we have in that selected category.

We have also called facebook, twitter and linkedin social sharing page. Where links are dynamically changing to share in those social site.

Lastly we used js file to make the animation. These are the pretty much about J Content Carouse Module. You can add or edit css, js or php file according to your need.

Download Source Code

Add comment


Security code
Refresh