I really need Before/After web gallery

[p_raresh]

I need a gallery where you can see pictures before and after retouching.
No matter what the format is so long I can put pictures in it
I noticed that several members have tried to find an answer, maybe I am lucky.

[Pari Retouch]

I don't think if their is any web gallery but I have seen many rollovers on deviantart maybe you can give it a try but I guess they need to be converted into flash.
And other than that by building own website that can be done easily.

[Jerryb]

hi,
i have seen a lot of site that rollovers but i have not come across a image host site where you can upload your images and have the roll over effect ...

for the most part people build there own sites....

depending on the image a alternative is to make a animated gif.....
but your limited to 256 colors... thier another animated format mng, which supports 67k colors but that not natively supported by browsers so that out...

you can try flash but again i don't see too many host sites setup for it..

now thier is tons of sites that shows you how you can put in rollers into your pages.... and even software to make it easier... but that doesn't appear what you want....

however if you do make your own site... you maybe interested in this kind of roll over.... i think it would be gret for before and after retouches....

http://www.abc.net.au/news/events/ja...eforeafter.htm

[p_raresh]

@Pari Retouch. I came to this conclusion myself, there is no such gallery.
In this moment I have 4 solution.
1. Adobe Flash Catalyst CS5 - is very easy to use and I managed to get what I wanted. You can export only swf or air, but have one disadvantages. It is limited to 20 photos (pages on FC)
2. To buy a Flash templates with before/after effect but the disadvantage - I'm not the only who use that template and I'm not a Flash master to customize the template.
3. To pay someone to make my site but I'm afraid will by pretty expensive (I will ask )
4. To make my own site , with Dreamweaver, but will be a very simple site
@Jerryb I like this effect, thank's. You know how is make?
"you can try flash but again i don't see too many host sites setup for it.." -I manage to find free flash host at: http://www.findimagehost.com/flash-hosting.php.

[Jerryb]

hi ,
sorry i don't know how...

i have been looking at the source of the htm file.. you can see the coding for it...

now it looks like it javascript... but i can't see a key word yet to where i can then do a search for that kind of rollover... grrrr .....

[p_raresh]

I find something which it is pretty easy to use here: http://www.queness.com/post/6480/cre...ct-with-jquery. Copy /paste , Dreamweaver and 1 h from my time and i have the effect . It is java script but it is a java for novice and I don't need to modifying nothing in java only in html, and with Dreamweaver it is very easy.

[Robo]

Is this something you would want? (click on any of the examples there):

www.robertlc.com/tag/before-after/

I'm using wordpress and with just few lines of CSS and some DIV's (HTML) in your post, you can get it (and without flash or jquery needed

I can give you the code, or anybody else who's interested.

Cheers

[Chain]

An image that changes to another image on mouseover can be done with just html and css, but you can get much more refined effects using javascript, etc.
I liked Robos example (I'm guessing javascript to make it fade?).

If you use Dreamweaver to make your website it has a simple function called rollover image that will change the image on mouseover. Example: http://www.rognemedia.no/galleri.html

For those considering flash; be aware that this will not work on iOS devices (iPad/iPhone). You will have to load a separate version for those users (if you care about them...).

For those making the image change on mouseover; consider the growing amount of users on touch devices like tablets (iPad etc.) and smartphones (Android, iPhone, etc.). They should be able to swap the images by clicking instead...

Edit: Yes, I just made it worse without providing any solutions!

[Robo]

Originally Posted by Chain

An image that changes to another image on mouseover can be done with just html and css, but you can get much more refined effects using javascript, etc.
I liked Robos example

If you use Dreamweaver to make your website it has a simple function called rollover image that will change the image on mouseover. Example: http://www.rognemedia.no/galleri.html

For those considering flash; be aware that this will not work on iOS devices (iPad/iPhone). You will have to load a separate version for those users (if you care about them...).

Yeah you can do some nice effects with jQuery (would never advice flash for anything other than ad banners). I use jQuery plugins all the time, however, most userfriendly and simple before/after is for me a roll-over, which can be done with html/css entirely and easily.

Originally Posted by Chain

(I'm guessing javascript to make it fade?).

Nope, still css. It's the transition property*, widely supported by reasonably up to date browsers (my target clients are not IE6 users...lol)

* Should cover O, IE, FF, Chrome and all webkit browsers (Safari etc)
.after-img{
display:block;
/*FADE EFFECT*/
-webkit-transition: all .4s;
-moz-transition: all .4s;
-ms-transition: all .4s;
-o-transition: all .4;
transition: all .4s;
}

Originally Posted by Chain

For those making the image change on mouseover; consider the growing amount of users on touch devices like tablets (iPad etc.) and smartphones (Android, iPhone, etc.). They should be able to swap the images by clicking instead...

I kinda agree (I have now that the after will also show up when you click and hold, but that's not ideal), but I think it depends on who your audience is.
I'm trying to find the time to put together a blog, after I'm done with my portfolio site.
That will be more mobile friendly, but serious clients are not going to (solely) browse with a phone/pad.
But yeah, for that I would say, use jQuery or even a slider plugin and add only 2 images That way, people on phones/pads can simply click on the next slide.

Check that your plugin supports multiple instances of the slider on the page! Some dont. Also I prefer something with no or minimal navigation and styling, so I can do my own styling or leave the image as is. Here's an example that should be clickable on a pad/phone: www.robertlc.com/case-studies/

[Robo]

Oh and if you want a reaaally simpel (no transition effect) roll-over, check out this tut: http://www.dauidusdesign.com/css-image-sprites/

It's how many webdesigners make roll-overs for buttons nowadays.
You upload 1 (!) image that contains the before AND the after next to eachother (or on top, depends on your code) and with CSS you just offset the image to reveal the after, easy peasy!

You can make it change on rolling over or on click (I'd say, do both) so can be used on phones/pads as well. :]

[hamdisafety]

Here is my account on Flickr, please check it out and leave a comment.
Thanks

http://www.flickr.com/photos/48518216@N00/6875960965/

[Robo]

Originally Posted by hamdisafety

Here is my account on Flickr, please check it out and leave a comment.
Thanks

http://www.flickr.com/photos/48518216@N00/6875960965/

Not sure what that has to do with roll-over images...