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

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



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.


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

Thats all.

1 comment:

  1. Nice post here. You can find more Image Effects here:

    http://jqueryplugins.net/example/image-effects/

    ReplyDelete

Fork me on GitHub