slider | Drafie's Design

Inserting a jQuery Slider in Suffusion

Nov 032013

Posted by Ciprian on 03/11/2013 How-To's Tagged with: jQuery, plugins, slider, Suffusion 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:

$j=jQuery.noConflict();
$j(document).ready(function(){
	$j('.fslider').fractionSlider({
		'fullWidth': false,
		'controls': true, 
		'pager': true
	});
});

$j=jQuery.noConflict();

$j(document).ready(function(){

$j('.fslider').fractionSlider({

'fullWidth': false,

'controls': true,

'pager': true

});

– 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.

		<div class="slider-wrapper">
			<div class="responsive-container">
				<div class="fslider">
					<div class="fs_loader"></div>
					<div class="slide">
						<img 	src="https://drafie-design.nl/wp-content/fractionslider/images/01_box_top.png"
								width="361" height="354"			
								data-position="-152,142" data-in="left" data-delay="200" data-out="right">
								
						<img    src="https://drafie-design.nl/wp-content/fractionslider/images/01_box_bottom.png" 
								width="422" height="454" 		
								data-position="138,-152" data-in="bottomRight" data-delay="200">
								
						<img    src="https://drafie-design.nl/wp-content/fractionslider/images/01_waves.png" 
								width="1449" height="115"
								data-position="240,17" data-in="left" data-delay="" data-out="left">
						
						<p 		class="claim light-green"			
								data-position="30,30" data-in="top" data-step="1" data-out="top" data-ease-in="easeOutBounce">A simple answer: WEBSITES</p>
														
						<p 		class="teaser orange" 	
								data-position="90,30" data-in="left" data-step="2" data-delay="500">Fast Development and <br /> highly customizable layouts</p>		
						<p 		class="teaser green" 	
								data-position="90,30" data-in="left" data-step="2" data-special="cycle" data-delay="3000">With security and SEO in mind</p>		
						<p 		class="teaser turky"		
								data-position="90,30" data-in="left" data-step="2" data-special="cycle" data-delay="5500" data-out="none">Not at last, with friendship...</p>
						
						<img 	src="https://drafie-design.nl/wp-content/fractionslider/images/01_outofthebox.png" 
								width="652" height="559"	
								data-position="20,330" data-in="bottomLeft" data-delay="500" data-out="fade">
					</div>
					<div class="slide">
						<img 	src="https://drafie-design.nl/wp-content/fractionslider/images/02_big_boxes.png" 		
								data-position="25,445" data-in="fade" data-delay="0" data-out="right">
								
						<img 	src="https://drafie-design.nl/wp-content/fractionslider/images/02_small_boxes.png" 	
								data-position="80,220" data-in="fade" data-delay="500" data-out="bottomRight">
						
						<img    src="https://drafie-design.nl/wp-content/fractionslider/images/01_box_bottom.png" 
								data-position="138,-152" data-in="bottomRight" data-delay="200" data-out="bottomRight">
						
						<p 		class="claim light-green small" 			
								data-position="30,30" data-in="top" data-step="1" data-out="top">What to expect</p>
										
						<p 		class="teaser turky small" 	
								data-position="90,30" data-in="bottom" data-step="2" data-delay="500">Fast Development</p>		
						<p 		class="teaser turky small" 	
								data-position="120,30" data-in="bottom" data-step="2" data-delay="1500">Highly Customized</p>
						<p 		class="teaser turky small" 	
								data-position="150,30" data-in="bottom" data-step="2" data-delay="2500">Secured</p>	
						<p 		class="teaser turky small" 	
								data-position="180,30" data-in="bottom" data-step="2" data-delay="3500">Monitored 24/7</p>
						<p 		class="teaser turky small" 	
								data-position="210,30" data-in="bottom" data-step="2" data-delay="4500">SEO propelled</p>
								
						<img    src="https://drafie-design.nl/wp-content/fractionslider/images/01_waves.png" 
								width="1449" height="115"
								data-position="240,200" data-in="right" data-step="2" data-easeIn="easeOutCirc">
								
						<img 	src="https://drafie-design.nl/wp-content/fractionslider/images/02_main.png" 
								data-position="105,180" data-in="fade" data-delay="500" data-out="bottomRight">
					</div>
				</div>
			</div>
		</div>

<img src="https://drafie-design.nl/wp-content/fractionslider/images/01_box_top.png"

width="361" height="354"

data-position="-152,142" data-in="left" data-delay="200" data-out="right">

<img src="https://drafie-design.nl/wp-content/fractionslider/images/01_box_bottom.png"

width="422" height="454"

data-position="138,-152" data-in="bottomRight" data-delay="200">

<img src="https://drafie-design.nl/wp-content/fractionslider/images/01_waves.png"

width="1449" height="115"

data-position="240,17" data-in="left" data-delay="" data-out="left">

<p class="claim light-green"

data-position="30,30" data-in="top" data-step="1" data-out="top" data-ease-in="easeOutBounce">A simple answer: WEBSITES</p>

<p class="teaser orange"

data-position="90,30" data-in="left" data-step="2" data-delay="500">Fast Development and <br /> highly customizable layouts</p>

<p class="teaser green"

data-position="90,30" data-in="left" data-step="2" data-special="cycle" data-delay="3000">With security and SEO in mind</p>

<p class="teaser turky"

data-position="90,30" data-in="left" data-step="2" data-special="cycle" data-delay="5500" data-out="none">Not at last, with friendship...</p>

<img src="https://drafie-design.nl/wp-content/fractionslider/images/01_outofthebox.png"

width="652" height="559"

data-position="20,330" data-in="bottomLeft" data-delay="500" data-out="fade">

</div>

<img src="https://drafie-design.nl/wp-content/fractionslider/images/02_big_boxes.png"

data-position="25,445" data-in="fade" data-delay="0" data-out="right">

<img src="https://drafie-design.nl/wp-content/fractionslider/images/02_small_boxes.png"

data-position="80,220" data-in="fade" data-delay="500" data-out="bottomRight">

<img src="https://drafie-design.nl/wp-content/fractionslider/images/01_box_bottom.png"

data-position="138,-152" data-in="bottomRight" data-delay="200" data-out="bottomRight">

<p class="claim light-green small"

data-position="30,30" data-in="top" data-step="1" data-out="top">What to expect</p>

<p class="teaser turky small"

data-position="90,30" data-in="bottom" data-step="2" data-delay="500">Fast Development</p>

<p class="teaser turky small"

data-position="120,30" data-in="bottom" data-step="2" data-delay="1500">Highly Customized</p>

<p class="teaser turky small"

data-position="150,30" data-in="bottom" data-step="2" data-delay="2500">Secured</p>

<p class="teaser turky small"

data-position="180,30" data-in="bottom" data-step="2" data-delay="3500">Monitored 24/7</p>

<p class="teaser turky small"

data-position="210,30" data-in="bottom" data-step="2" data-delay="4500">SEO propelled</p>

<img src="https://drafie-design.nl/wp-content/fractionslider/images/01_waves.png"

width="1449" height="115"

data-position="240,200" data-in="right" data-step="2" data-easeIn="easeOutCirc">

<img src="https://drafie-design.nl/wp-content/fractionslider/images/02_main.png"

data-position="105,180" data-in="fade" data-delay="500" data-out="bottomRight">

</div>

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:

/* SLIDER STYLES */
.slider-wrapper { position:relative; overflow:hidden;  width:100%;  margin:0 auto;  background:#1b1b1b;  border:1px solid #000; box-shadow:0 3px 5px #666;}
.fslider { position:relative; width:100%;height:300px; margin:0 auto;  background:#1b1b1b; }
@media only screen and (min-width: 1000px) {
.fslider { width:900px;}
}
/* ELEMENT STYLES */
.claim { line-height:150%;font-size:20px;font-weight:bold;padding:0.5% 1.5%;}
.teaser { padding:0.5% 1.5%; font-size:14px; line-height:100%;}
.small { width:250px; padding-left:0; padding-right:0px; text-align:center;}
.light-green {background:#95C542;}
.green {background:#7CB761;}
.orange {background:#EF7D00;}
.turky {background:#348E8A;}
.white {background:#fff; color:#333;}
/* END FRACTION SLIDER */

/* SLIDER STYLES */

.slider-wrapper { position:relative; overflow:hidden; width:100%; margin:0 auto; background:#1b1b1b; border:1px solid #000; box-shadow:0 3px 5px #666;}

.fslider { position:relative; width:100%;height:300px; margin:0 auto; background:#1b1b1b; }

@media only screen and (min-width: 1000px) {

.fslider { width:900px;}

}

/* ELEMENT STYLES */

.claim { line-height:150%;font-size:20px;font-weight:bold;padding:0.5% 1.5%;}

.teaser { padding:0.5% 1.5%; font-size:14px; line-height:100%;}

.small { width:250px; padding-left:0; padding-right:0px; text-align:center;}

.light-green {background:#95C542;}

.green {background:#7CB761;}

.orange {background:#EF7D00;}

.turky {background:#348E8A;}

.white {background:#fff; color:#333;}

/* END FRACTION SLIDER */