beforeafter plugin

[laurensschuitemaker]

Hi,

I want to include the beforeafter plugin in my website.
With this plugin you can drag left or right to see the situation before and the situation after.
You can find an example at http://www.catchmyfame.com/jquery/demo/8/ .

I tried to include this plugin in my website, but I couldn't find a way to succeed.
Does someone know what you have to do to use this plugin?
The idea is to show the situation before and after of 4 projects.

Thank you.

[uniqu3]

What exactly didn't work?

first you need to include the js.

Code: Select all

<__script__ type="text/javascript" src="/jquery/jquery-1.4.min.js"></__script>
<__script__ type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.1/jquery-ui.min.js"></__script>
<__script__ type="text/javascript" src="/jquery/jquery.beforeafter.min.js"></__script>
{literal}
<__script__ type="text/javascript">
$(function(){
	$('#container').beforeAfter({imagePath:'/jquery/'});
	$('#container1').beforeAfter({imagePath:'/jquery/'});
	$('#container2').beforeAfter({imagePath:'/jquery/'});
	$('#container3').beforeAfter({imagePath:'/jquery/'});
	$('#container4').beforeAfter({imagePath:'/jquery/'});
	$('#container5').beforeAfter({imagePath:'/jquery/'});
	$('#container6').beforeAfter({imagePath:'/jquery/'});
});
</__script>
{/literal}

and wrap the function inside the {literal} tag.
The plugin is being triggered based on the id of container div as i can see it from sourcecode, so you will need to wrap before+after images in a div with ID you have assigned inside the js function like #container etc.

[hardy]

Hi laurensschuitemaker,

at first download the following 3 javascripts und save it in your js-folder of your cmsms installation (in my case: /js).
second step:optional you can include the scripts in your template.
   
   
   
otherwise the plugin will load the scripts automaticly. in this case please modify the path in line 70 to 72 in the plugin. in the next version of my plugin i will include the parameter to commit the path to the needed javascripts.

then your cmsms is ready to use the plugin. now only include the following code in your site. you can include it multiple. the plugin creates and entitle all div's. for the parameters you can find descriptions in the plugin help.
   

Code: Select all

{beforeafter 
img1="uploads/images/your-before-image.jpg" 
img2="uploads/images/your-after-image.jpg" 
animateIntro="true" 
introDelay="500" 
introDuration="1000" 
showFullLinks="true" 
imagePath="/images/hoho/"}

hardy