Adding a function to existing Jquery script

[arn]

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/25/jquery-beforeafter-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/beautiful-apple-gallery-slideshow/demo.html


Any thoughts?

[Nile]

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:


<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:



<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!