Adding a function to existing Jquery script

I've found a script from CatchMyFrame to create a before/after image slider. Great.

Now, I want to turn this into a gallery with either a next/previous button or click thumbnail to load before/after image set.

I've tried combining two scripts however one always knocks the other out.

The Before/After code is here:
http://www.catchmyfame.com/2009/06/2...eafter-plugin/

Would love to combine with something like this- but doesn't even KIND OF need to be that fancy:
http://demo.tutorialzine.com/2009/11...show/demo.html


Any thoughts?

Its nothing complicated, just put in the code. What I did to test this out before hand, was change the jquery handle from $('#container') to $('.container') so I could add a class.

I also did it so on the before-after divs, I didnt have the first container div and just combined it with the apple slideshow list div. For example:

Code:

---

    <div class="slide"><img src="img/sample_slides/macbook.jpg" width="920" height="400" alt="side" /></div>
    <div class="slide"><img src="img/sample_slides/iphone.jpg" width="920" height="400" alt="side" /></div>
    <div class="slide"><img src="img/sample_slides/imac.jpg" width="920" height="400" alt="side" /></div>

---

And I just changed it to:

Code:

---

    <div class="slide"><img src="img/sample_slides/macbook.jpg" width="920" height="400" alt="side" /></div>
    <div class="container slide">
                <div><img alt="before" src="conan_bef_sm.jpg" width="600" height="366"/></div>
                <div><img alt="after" src="conan_aft_sm.jpg" width="600" height="366"/></div>
        </div>
    <div class="slide"><img src="img/sample_slides/imac.jpg" width="920" height="400" alt="side" /></div>

---

Highlighted: Combined container div
Red: container class
Good luck!