Using multiple before and after slider images

[mulder32]

I successfully embedded code found here to accomplish this: http://www.appletonrealestatephoto.com/comparison

I would like to do 3-5 more of these on the same page, but it always gets screwed up. I embed the same code instead a different table but the last time I tried the actual slider you use to move across the image wound up on image slider #1 above. I'm thinking there has to be an easy fix for this but with little coding experience I'm at a loss. Can this be done?
Thanks--Mike.

[Beverleyh]

Warning: Please include a link to the DD script in question in your post. See this thread for the proper posting format when asking a question.

[mulder32]

Warning: Please include a link to the DD script in question in your post. See this thread for the proper posting format when asking a question.

Sorry, I believe it was this:

http://www.dynamicdrive.com/dynamici...reandafter.htm

[Beverleyh]

There are no multiple instances of the slider in your page. Unfortunately we can't troubleshoot something that isn't there. What would be best however is for you to setup a reduced case example with just 2 or 3 slider instances so we can see where you're going wrong without trawling through your other markup/code.

As for the page you linked to, there are some structural errors to correct such as style tags in the body element and multiple jQuery library references in the page (you only need one), so you should aim to fix those too .

[mulder32]

There are no multiple instances of the slider in your page. Unfortunately we can't troubleshoot something that isn't there. What would be best however is for you to setup a reduced case example with just 2 or 3 slider instances so we can see where you're going wrong without trawling through your other markup/code.

As for the page you linked to, there are some structural errors to correct such as style tags in the body element and multiple jQuery library references in the page (you only need one), so you should aim to fix those too .

Yes, you're right they're not because I deleted the second table that made the first image have two sliders. When I tried to add another slider image, only one image showed up from the second table and the slider for some reason went to the first image where there already was a slider present.

[mulder32]

I tried to add another one again...this is what happens:

http://www.appletonrealestatephoto.com/comparison

[Beverleyh]

There's a lot going on in your page so it would be better to setup a reduced test case that contains only basic structural markup and 2 or 3 instances of the slider.

Tips:

Use the correct structural markup for a web page. This means things like using style tags only in the head section.

Use only one instance of the jQuery library, placed before all scripts that use it.

Reference only one instance of the ddbeforeandafter CSS in the head of the web page doc. An external file is preferred (as per the demo).

Reference only one instance of the ddbeforeandafter JS in the head section of the web page doc. An external file is preferred (as per the demo)

Use multiple jQuery initialisations, each with a unique ID (as per the demo instructions).

Use multiple HTML markup instances, each with a unique ID (as per the demo instructions)

Please post back with the reduced example page, following the demo instructions (and the above tips) more carefully..