- It can handle one before-after project or a list.
- Every project can have a title/small info, that will displayed under the viewer.
- Designed to work in all major browsers and even on touch devices.
- Can be used even as simple image viewer, if you don't provide the alternate image for the projects.
Default example, a mixed list of projects:
HTML code needed to generate the gallery
<div class="ba_gallery gallery_1">
<img src="images/cats_b.jpg" alt='images/cats_a.jpg' title="Evil Cats | Client: Microfost">
<img src="images/cat_b.jpg" alt='images/cat_a.jpg' title="Evil Cat | Client: Abode">
<img src="images/bug_b.jpg" alt='images/bug_a.jpg' title="Evil Bug | Client: Appl3">
</div>
The viewer uses the info you provide in the image tag attributes to generate the gallery:
src - main image path for the project
alt - alternate path image for the project; to display the before/after status.
title - small text to that will act as the title of the project.
JS code needed to generate the gallery
<script type="text/javascript">
$('.gallery_1').wpwBAgallery({
height:320,
width:600
});
</script>
The js code needs to be copied at the end of the html file or right after the div element that holds your before/after galleries.
The width and height parameters are set also here.
Variation use:
Two galleries with the same settings.
First project shows the images in all states. Second gallery has only one before/after item to display... so it has no controls.
