Before/After jQuery Plugin 1.3 Released

I’m happy to announce the release of Before/After 1.3!

This new release features:

  • Several new options. You can:
    • Set the starting horizontal position of the draggable divider
    • Set the text for the before/after links
    • Set the cursor style
    • Set the speed of animation when clicking an image
    • Set the speed of animation when clicking a link
    • Set the color of the divider
    • onReady callback function
  • jQuery and jQueryUI draggable are now bundled with the plugin for those that don’t want to, or can’t use, a CDN.
  • Tighter code (6.7 Kb uncompressed, 4.5 Kb compressed).
  • Compatible with jQuery 1.6.1

Notes:

  • The CSS classes for the span tags that wrapped the text links have been changed from “bflinks” to “balinks”.
  • The requirement to have each image nested within a div tag has been removed; however the plugin will still work if you use that structure.
  • The previous version of the plugin took the images and made them background-images within div because of issues with webkit browsers and jQuery at the time. Those issues no longer exist so the original functionality of using the images as-is has been restored.

I’ve created a dedicated page for the plugin at http://www.catchmyfame.com/catchmyfame-jquery-plugins/jquery-beforeafter-plugin/. In the future this page will be updated to contain the latest information for this plugin.

Or if you just can’t wait, download version 1.3 here.

I plan on adding a post in the upcoming days about how you can add a few lines of code to enable a simple “loading, please wait” feature if you’re using the plugin with large images that may not load quickly.

Finally, while this version of the plugin doesn’t have touchscreen support for mobile devices, I do plan on adding that feature in the future. jQuery’s touch library is still in alpha and seems a bit quirky, and other libraries also have their issues. I’d prefer to avoid libraries for such a small amount of functionality so that the size can be kept down, so feel free to post suggestions on how to best accomplish this.

Enjoy!

2 thoughts on “Before/After jQuery Plugin 1.3 Released”

  1. Hi – Fantastic. Can you modify the plugin so that when clicking the image container I can follow a link, rather than re-positioning the grab bar to the click location? That and touch would be awesome!

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>