• RSS
  • Delicious
  • Digg
  • Facebook
  • Twitter
  • Linkedin
  • Increase Website And Blog Traffic:latest article for Increasing Blog and website Traffic free gide.....
  • Create and Upload Site Map to Google:Google is fist largest Search Engine by upploading SITE MAP Google Easily Search Links from Ur site in Searching.......
  • Fix WEB SITE Errors:Google and other search engines always take those site in there fist page in searching which ha too less web Errors...
  • Top 20 Search Engine:Submit Ur site to top 20 Search Engines to Increasing Ur Site Traffic and making money top search engines like as Google, Yahoo, Ask, AOl, MSN...
  • Top Social Sites:Top 100 Social sites which real help U make a Affliate Marketer and in Pormoting ur Producdts...

New Posts

Before/After Photo Effect with jQuery

Posted by Mohsin On 10/27/2013 12:48:00 AM No comments

If you have a design or makeup blog, or if you are using before and after image comparison, this script will surely be very useful for you.


In this tutorial we'll learn how to add the Before/After plugin, a script that works with jQuery and displays two pictures dynamically for comparing them at the same time. By dragging sideways a small bar we can see both images that are being compared.

See this Brittany Murphy pic before and after photoshop:

before
after

Implementing this script is simple, we just need jQuery, the Before/After script, and the two images that we are going to compare.

How to add the Before/After plugin to Blogger


Step 1. Go to Template > Edit HTML and before </head> (CTRL + F to find it) paste the following:
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js' type='text/javascript'/>
<script src='http://code.jquery.com/ui/1.10.3/jquery-ui.js' type='text/javascript'/>
<script src='http://helplogger.googlecode.com/svn/trunk/jquery.beforeafter.min.js' type='text/javascript'/>
<script type='text/javascript'>
$(function(){
$(&#39;#beforeafter1&#39;).beforeAfter({showFullLinks : true});
});
</script>
Step 2. Click on the Save template button
Note: if the above script doesn't work for you, add it above the </body> tag. Also please verify if you have added jQuery in your template (if you did so, then remove the line in green)

Step 3. Go to Layout, add a HTML/Javascript gadget and paste this code inside the empty box:
<div id='beforeafter1'>
<div><img alt='before' src='URL of the first image' width='500' height='291'/></div>
<div><img alt='after' src='URL of the second image' width='500' height='291'/></div>
</div>
Add the URL of the first image that is the Before image, and the URL of the second image that is the After image.
It is important that you have specified the width and height of each picture so that they work on all browsers.
If you want to add more images just change the ID of the container, in this case the container is called beforeafter1 so you need to change it to beforeafter2 and so on, although you can choose any name as long as all are different.

And in the first code to paste, add another line like this one in blue:
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js' type='text/javascript'/>
<script src='http://code.jquery.com/ui/1.10.3/jquery-ui.js' type='text/javascript'/>
<script src='http://helplogger.googlecode.com/svn/trunk/jquery.beforeafter.min.js' type='text/javascript'/>
<script type='text/javascript'>
$(function(){
$(&#39;#beforeafter1&#39;).beforeAfter({showFullLinks : true});
$(&#39;#beforeafter2&#39;).beforeAfter({showFullLinks : true});
});
</script>
You can add as many before/after images as you like as long as all containers have a different ID and the corresponding lines are added in the script.
Below each photo container are the "Show only Before" and "Show only after" links that when you click on them, the complete pictures will be shown. If you want to hide these links, then just change true to false in the first code and they will not be displayed anymore.

Note: if you see white space around the drag icons, then search for this code in your template:
   <Group description="Images" selector=".main-inner">
     <Variable name="image.background.color" description="Background Color" type="color" default="#ffffff" value="#ffffff"/>
... and change the #ffffff value in red to transparent.

Autor: Catch my fame

0 comments:

Post a Comment

All types of Comments are welcome