Piotr GIS Works | Google Maps API | Fusion Table Data Visualization | GIS: Before after jQuery image effect for Blogger

Some time ago I was searching for information about post disaster situation in Philippines after Typhoon Haiyan (Yolanda) and I found a satellite pictures showed a City of Tacloban just after Typhoon. To show magnitute of the disaster, they showed a before and after picture using Flash that let the visitor drag a slider over the images, so that you could easily see how dramatic the changes were. I immediately thought that this could be nice tool for humanitarian action teams to present situations and also changes after reconstruction process/projects.

1. Prepare you photos/images and upload to the server. You can use your own or download images ie. from LANDSAT gallery.
2. Download JQuery script. I finally use this one mostly because of the slider style.
3. Upload script to YOUR server (FTP server) could be free like 000webhost.com
4. Now you need to add script to your blogger template. Click on Template and Edit HTML Code in Blogger dashboard.
5. Paste code in the <head> section just before </head> tag. section

	<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
	//Those two scripts below You should host on your server
	<script src="http://serwer1478551.home.pl/hellobags/bef-after-script/jquery.imageReveal.js"></script>
	<script src="http://serwer1478551.home.pl/hellobags/bef-after-script/jquery.imageReveal.css"></script>

view raw scriptsbeforeafter.html hosted with ❤ by GitHub

TIP: First line is public jQuery library hosted by Google so you can use freely. Second is Before/After JQuery plug-in that you need to keep on your FTP server.

6. When you create new post switch to HTML Editor and paste second code.

	<div id="demo" class="imageReveal">
	<img src="XXXXimages/1-before.jpg-XXXX" title="Before"> //first photo change to your location
	<img src="XXXX-images/1-after.jpg-XXXX" title="After"> //second photo change location !
	</div>

	//and second paste options script inside your blog post

	<script>
	$(window).load(function() {
	$('#demo').imageReveal({
	barWidth: 15,
	touchBarWidth: 40,
	paddingLeft: 0,
	paddingRight: 0,
	startPosition: 0.25,
	showCaption: true,
	captionChange: 0.5,
	width: 500,
	height: 500
	});
	});
	</script>

view raw beforeafteropt.js hosted with ❤ by GitHub

7. Change in second code location of your photos, just paste link to photos in the code.

Thats all.

Before after jQuery image effect for Blogger - floods in Philippines Landsat images

1 comment: