How to add a jQuery Plugin to Contao

Question

I have a Contao(CMS) based website and would like to add a new jQuery plugin to the site. But since I'm new to Contao, I have no clue how to do that. The plugin inside a .zip archive called codecanyon-2390758-jquery-social-timeline.zip. The plugin is called "jQuery Social Timeline".

I downloaded it from this site: http://codecanyon.net/item/jquery-social-timeline/2390758?ref=infuse01

Please Help!!!

score 0 · Accepted Answer · answered May 24 '14 at 21:36

Finally I solved it. I found a demo folder in .zip Archive with demo .html files. I just copied the entire section from the demo .html file into the Additional -Tags section of my Contao site layout. That was:

    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>jQuery Social Timeline plugin - Demo</title>

<link type="text/css" rel="stylesheet" href="dpSocialTimeline/css/styles.css">

<link type="text/css" rel="stylesheet" href="dpSocialTimeline/css/magnific-popup.css">

<link type="text/css" rel="stylesheet" href="dpSocialTimeline/css/dpSocialTimeline.css">


<script type="text/javascript" src="dpSocialTimeline/js/jquery-1.7.1.min.js"></script>

<script type="text/javascript" src="dpSocialTimeline/js/jquery.magnific-popup.min.js"></script>

<script type="text/javascript" src="dpSocialTimeline/js/jquery.isotope.min.js"></script>

<script type="text/javascript" src="dpSocialTimeline/js/jquery.dpSocialTimeline.js"></script>

<script type="text/javascript">
    $(document).ready(function(){

        $('#socialTimeline').dpSocialTimeline({
            feeds: 
            {
                'facebook_page': {data: '5550296508', limit: 2},
                'youtube': {data: 'youtube'},
                'flickr': {data: '52617155@N08'},
                'tumblr': {data: 'drinkyourjuice'}
            },
            layoutMode: 'timeline',
            addLightbox: true,
            itemWidth: 200,
            total: 10
        });
    });
</script>

Then I added a new module to my site and edited the HTML code and inserted the following code:

<div id="socialTimeline" style="width:650px;" class="light"> </div>

How to add a jQuery Plugin to Contao

1 Answers1