- Веб-Шаблоны
- Шаблон интернет-магазина
- Шаблоны для CMS
- Facebook шаблоны
- Конструктор сайтов
«Before-After» Slider
Ноябрь 15, 2010
This is a Slider Script that allows you to show two images in a single container and drag one image over another which is good for “before-after” comparison.
This plug-in has several important advantages:
• Low file size (only 7 Kbytes);
• You can use it many times on the same page;
• When JavaScript is disabled you will not lose a container, it will just show the first image.
JavaScript
In order to make the script work, the index-#.html file with a slider should contain these lines of HTML code:
The <head> section of the index-#.html file contains these lines of code that initialize the script functionality with basic values:
If you want to set specific attributes for the slider you will need to define them when you initialize the plug-in.
Here the script attributes define the following values:
• animateIntro – if this attribute is set to true, the slider will slowly move (false by default);
• introDelay: 2000 – if animateIntro is set to true, this attribute defines a delay before the animation starts;
• introDuration: 500 – if animateIntro is set to true, this attribute defines total animation time;
• showFullLinks: false – defines whether to show the links that allow to see full images («before» or «after») at once.
HTML
In order to create a slider you will need to define two images that have fixed width and height.
Below you can see the HTML script representation:
CSS
You can find script related stylesheet in the main style.css file. You will need to modify the following styles:
Make sure to set overflow: hidden; for #container id.