Results 1 to 2 of 2

Thread: Adding a function to existing Jquery script

  1. #1
    Join Date
    Nov 2010
    Posts
    1
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default 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?

  2. #2
    Join Date
    Jan 2008
    Posts
    4,167
    Thanks
    28
    Thanked 628 Times in 624 Posts
    Blog Entries
    1

    Default

    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!
    Jeremy | jfein.net

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •