Nov 032013
 
 Posted by on 03/11/2013 How-To's Tagged with: , , ,  No Responses »

Another usage of jQuery plugins in Suffusion. The general principles are presented in article about Adding jQuery plugins.

In this example will see how to use jQuery for having various spicy elements on your site. A lot of such elements can find at https://tympanus.net/codrops/ or https://www.htmldrive.net/

On our homepage can see a beautiful slideshow with multiple animations. With the present article in mind, I implement there the jQuery FRACTION SLIDER created by Mario Jäckle and documented on his site – Jacksbox.de

First I downloaded the files, unpacked and uploaded the entire tree of folders on the server in /wp-content/fractionslider folder. I removed the file jquery-1.9.0.min.js, as I don’t need to link jQuery, already loaded by WordPress.

I edited all plugin files in the text editor bundled to WinSCP and I replaced all occurrences of .slider class with .fslider class (otherwise the .slider class conflict with the existing class from Suffusion). Also, I replaced all relative paths with absolute paths (by eg images/fs.spinner.gif became https://drafie-design.nl/wp-content/fractionslider/css/images/fs.spinner.gif)

Then:

– at Suffusion Options -> Back-end -> Custom Includes -> Second  Additional Stylesheet link I added the path to the plugin stylesheet file:
https://drafie-design.nl/wp-content/fractionslider/css/fractionslider.css

– at Suffusion Options -> Back-end -> Custom Includes -> Second External Javascript file I added the path to the main js file:
https://drafie-design.nl/wp-content/fractionslider/js/jquery.fractionslider.js

– I added the trigger function (contained in main.js file downloaded with the plugin) at Suffusion Options -> Back-end -> Custom Includes -> Custom Footer Javascript. I changed the function to:

 – Finally I added the HTML for the slider in an Ad-Hoc Widget Area, then I pasted the shortcode for ad-hoc area on my page.

 I take the code from “example/index.html” file, but I use only the div’s for slider – NOT ENTIRE PAGE.

The last touch is to format the texts and colors at Suffusion Options -> Back-end -> Custom Includes -> Custom Styles: