Saturday, 13 August 2016 16:05

How to add a "FlexSlider" script to the standard K2 Content Module (template override)

Written by 
How to add a "FlexSlider" script to the standard K2 Content Module (template override)

I was recently frustrated when trying to find a freely available, open source responsive slider / slideshow plugin for Joomla K2 items.  It seems there are plenty available if you are willing to pay, but for something this simple, I figured I would roll my own and share. 

Notes:

  • This particular example is for using the K2 Joomla component, but the same overall concept will apply to any type of module that supports the standard Joomla template override structure.
  • Since it's hand-coded, it will apply to all versions / platforms of Joomla: 1.5.x, 2.5.x, 3.x
  • See "attachments" area for downloads, including the flexslider library, readme, template override, and new CSS.
  • Click here for demo

Directions:

=============

1.  Add the following jQuery and FlexSlider script to your template’s index.php file:

<!-- jQuery -->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script>window.jQuery || document.write('<script src="/templates/YOUR_TEMPLATE/flexslider/js/libs/jquery-1.7.min.js">\x3C/script>')</script>

<!-- FlexSlider -->
<script defer src="/templates/YOUR_TEMPLATE/flexslider/jquery.flexslider.js"></script>

<script type="text/javascript">
$(window).load(function() {
$('.flexslider').flexslider({
animation: "slide",
start: function(slider){
$('body').removeClass('loading');
}
});
});
</script>

Note: This code is available in the attachments section, I wouldn't try to copy & paste it from your browser.

=============

2.  Add the “add-to-your.css” file’s contents into your site’s template file.  Or, the k2.css template override, since you probably have that loaded into your template, too.  

=============

3.  Add the “FlexSlider” folder contained inside the mod_k2_content folder into your template’s mod_k2_content override folder.  You probably already have a folder in there called “Default” - eg:

/templates/YOUR_TEMPLATE/html/mod_k2_content/FlexSlider

Note: The location of this folder in your site's directory structure is extremely important (to Joomla).

=============

4.  Add the “flexslider” folder to the top-level of your template, eg:
/templates/YOUR_TEMPLATE/flexslider

Note: The location of this folder in your site's directory doesn't matter (to Joomla).

This is what my template's folder structure looks like after installing:

files

=============

5.  Create your new K2 content module and choose the “FlexSlider” sub-template.

module-settings

=============

6. Enjoy!

Read 2047 times Last modified on Wednesday, 04 January 2017 16:34

Leave a comment

Make sure you enter all the required information, indicated by an asterisk (*). HTML code is not allowed.