Saturday, 13 August 2016 16:05

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

Written by

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="https://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>
$(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!

Last modified on Friday, 01 April 2022 17:47

Latest Comments

Got a similar email that seemed suspicious. Ignored it and they even followed up today.
My organization received one of these emails from "Linda," but uses https://www.bestprosintown.com/p...
Hi Nate, I got the same email template from the same email address today and found you through a ...
Just received one today (16 Aug 2022) from "Mailchimp". Thanks for sharing!
Thanks for posting this. I just got one today. I was 99% sure it was a scam, and your post confirmed...


Design & Development

Wordpress, Drupal, Joomla
New custom websites
Bespoke themes and extensions
Redesigns, upgrades, migrations

Web Design & Development


Optimization & SEO

Let us optimize and manage your overall online presence. We offer full service monthly SEO as well as one-time projects.  

Optimization Plans & Pricing


Maintenance, Patching

White glove monthly backups, security updates, maintenance and testing for your Wordpress, Drupal, or Joomla site.

Maintenance Plans & Pricing


Email Newsletter

Bring your web & marketing performance to the next level: monthly blog post roundup via email.  

Stay in Touch!