Effective Slider

This is a before and after article about some really excellent digital photographic manipulation. The slider device used to show the before and after is incredible. http://graphics.wsj.com/documents/ws...=PHOTOSHOP0812

Nice! simple and clean. I like the photo too. Now something like this that you could drop on your page and drop in your photo which would create 2 copies aligned on top of each other, you edit the top copy and when you upload your website the slider would be moveable would be a useful addition to Designer Pro.

Try this: Attachment 113862

Almost a straight implementation of http://www.catchmyfame.com/catchmyfa...eafter-plugin/.

Acorn

Doesnt quite work Acorn but then I only tried it in Xara's internal preview. I was able to drop my photo onto the place holder and edit it but only that one instance of my photo was there I still had the stock filler photos in the before and in the top smaller spots.

Edit: Ok mostly it's me sorry! But the large image is not being rendered at full resolution. This is resulting in the image being blurry.

be better if both photos were aligned

Doesn't work particularly well in the internal viewer but it does work.
It is balanced, aligned and fine in all five major browsers. The end point handle drag is showing about 5px of each image. This may be a feature but adding some padding would overcome this.

It is displaying its the most basic rendering.

The !images Layer is there to drop your images onto.
What the Placeholder does not do is set the proportions of your images.
Both images must be of the same dimensions.

It took me 30 minutes to produce so there will be adjustments, if TGers see a need.

Acorn

i meant the link from the op

Excellent Acorn. BF Picky picky picky. :)

Quote:

---

Originally Posted by Big Frank

i meant the link from the op

---

Sorry Big Frank, I had already taken on board that the critique of the work Gary linked to also included the cropping of the image as "doctored".
Acorn

Acorn - How do I turn off the text under the images?

Quote:

---

Originally Posted by gwpriester

Acorn - How do I turn off the text under the images?

---

Gary, there will come a time when you'll have to start reading code.

Change

Quote:

---

$('#container').beforeAfter({});

---

to

Quote:

---

$('#container').beforeAfter({ showFullLinks : false });

---

I've shown the braces in the empty position as so many don't understand their purpose and try to add back parameters without them.

Acorn

Quote:

---

Gary, there will come a time when you'll have to start reading code.

---

Probably not going to be in this lifetime, how-some-ever.

And thanks for that.

Quote:

---

Originally Posted by Acorn

... there will be adjustments, if TGers see a need.
Acorn

---

Thanks for this before-after widget but it would be nice to have visual clues (as on the examples you linked to) as to what a user could do with the image when he mouses over it.

Quote:

---

Originally Posted by angelize

This is resulting in the image being blurry.

---

angelize, they are blurry as I make the originals too small. Just increase their sizes and hide behind the widget.
Acorn

Another before/after slider [from 2012 but should still work]

http://www.totalpcss.com/xug/before-and-after-widget/

Quote:

---

Originally Posted by zaphodeist

Another before/after slider [from 2012 but should still work]
http://www.totalpcss.com/xug/before-and-after-widget/

---

Yes it still looks good.

Here is my revised Slider: Attachment 113877
It now has the before and after images with Names of before and after and the images are presented as before.jpg and after.jpg and each is on its own layer (before and after).
The images are hidden from view using a special link, popup: close "before", "after". The images can then be any size you choose.
The slider also scales nicely.

Acorn

Thank you Gary, Acorn and John for sharing.

Ciao

Roly

Thanks Acorn, nice slider. Sledger's slider is still a very good option. Thanks for making this one available, John. Happy to see that his vault with tutorials is still accessible.

Hi Guys,

Just launched and you may be interested in this : http://www.xaramarketplace.com/templates/comparison.htm

It's a Before and After comparison Widget

Thanks XM_ben

Quote:

---

Originally Posted by XM_Ben

Hi Guys,
Just launched and you may be interested in this : http://www.xaramarketplace.com/templates/comparison.htm
It's a Before and After comparison Widget
Thanks XM_ben

---

ben, I suggest you do not promote your offerings without engaging first in the Thread. Thereafter you should describe why people should choose a commercial solution. You will be blanked very quickly if you come on saying Buy Me. We are users of a tool that allows self-design and TG is a self-help organisation.

Acorn