Home > Developer > Web Develop
Today, share a jquery plugin-the picture before and after (Beforeafter), the effect is as follows:
How to use:
<!DOCTYPE HTML><HTMLLang= "en"><Head> <MetaCharSet= "Utf-8"/> <title>Picture before and after comparison</title></Head><Body> <Divclass= "Beforeafter"> <imgsrc= "Images/before.jpg"alt= "Before"Height= "420"width= "748"/> <imgsrc= "Images/after.jpg"alt= "after"Height= "420"width= "748"/> </Div></Body></HTML><Scripttype= "Text/javascript"src= "Js/jquery.min.js"></Script><Scripttype= "Text/javascript"src= "Js/jquery-ui-1.8.13.custom.min.js"></Script><Scripttype= "Text/javascript"src= "Js/jquery.beforeafter-1.4.js"></Script><Scripttype= "Text/javascript">$(function(){ $('. Beforeafter'). Beforeafter ({imagePath:'images/' });});</Script>
Parameter description (partial):
Showfulllinks: Whether to display the following link, click on the link, will automatically display the full front or back of the picture, the default value: True
ImagePath: The path to the navigation picture (absolute path or relative path), the navigation picture refers to the middle green bar and the left and right triangle, the default value:/js/beforeafter/
Beforelinktext: Set the text below the link below the picture, the default value: Show only before
Afterlinktext: After setting the text of the link below the picture, the default value: Show only after
Attention:
Before and after two pictures must be the same size.
Demo: click here to download
Website address:http://www.catchmyfame.com/catchmyfame-jquery-plugins/jquery-beforeafter-plugin/
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
