RetouchPRO

Go Back   RetouchPRO > Business > Your Website
Register Blogs FAQ Site Nav Search Today's Posts Mark Forums Read


Your Website Questions and (hopefully) answers about setting up your own business or gallery website

I really need Before/After web gallery

Reply
 
Thread Tools
  #1  
Old 03-24-2011, 07:06 AM
p_raresh p_raresh is offline
Junior Member
 
Join Date: Mar 2011
Posts: 3
Question I really need Before/After web gallery

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.
Reply With Quote top
  #2  
Old 03-24-2011, 12:52 PM
Pari Retouch's Avatar
Pari Retouch Pari Retouch is offline
Member
 
Join Date: Mar 2011
Posts: 66
Re: I really need Before/After web gallery

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.
Reply With Quote top
  #3  
Old 03-24-2011, 11:49 PM
Jerryb Jerryb is offline
Senior Member
 
Join Date: Sep 2006
Posts: 397
Re: I really need Before/After web gallery

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
Reply With Quote top
  #4  
Old 03-25-2011, 03:06 AM
p_raresh p_raresh is offline
Junior Member
 
Join Date: Mar 2011
Posts: 3
Re: I really need Before/After web gallery

@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.
Reply With Quote top
  #5  
Old 03-25-2011, 08:53 AM
Jerryb Jerryb is offline
Senior Member
 
Join Date: Sep 2006
Posts: 397
Re: I really need Before/After web gallery

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 .....
Reply With Quote top
  #6  
Old 03-26-2011, 02:21 AM
p_raresh p_raresh is offline
Junior Member
 
Join Date: Mar 2011
Posts: 3
Re: I really need Before/After web gallery

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.

Last edited by p_raresh; 03-26-2011 at 02:29 AM.
Reply With Quote top
  #7  
Old 02-13-2012, 05:49 AM
Robo Robo is offline
Junior Member
 
Join Date: Oct 2010
Posts: 4
Re: I really need Before/After web gallery

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
Reply With Quote top
  #8  
Old 02-13-2012, 08:27 AM
Chain's Avatar
Chain Chain is offline
Senior Member
 
Join Date: May 2009
Location: Oslo, Norway
Posts: 551
Re: I really need Before/After web gallery

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!
Reply With Quote top
  #9  
Old 02-13-2012, 01:21 PM
Robo Robo is offline
Junior Member
 
Join Date: Oct 2010
Posts: 4
Re: I really need Before/After web gallery

Quote:
Originally Posted by Chain View Post
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.

Quote:
Originally Posted by Chain View Post
(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;
}

Quote:
Originally Posted by Chain View Post
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/

Last edited by Robo; 02-13-2012 at 02:03 PM.
Reply With Quote top
  #10  
Old 02-13-2012, 01:32 PM
Robo Robo is offline
Junior Member
 
Join Date: Oct 2010
Posts: 4
Re: I really need Before/After web gallery

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. :]
Reply With Quote top
Reply

  RetouchPRO > Business > Your Website


Currently Active Users Viewing This Thread: 1 (0 members and 1 guests)
 
Thread Tools

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is Off
HTML code is Off
Trackbacks are Off
Pingbacks are Off
Refbacks are Off


Similar Threads
Thread Thread Starter Forum Replies Last Post
Best Suggestion for Before/After web galleries? davidlicious Your Website 17 11-29-2012 09:07 AM
Color Management: Cal. ext. monitor -> web = crap dude2010 Input/Output/Workflow 6 03-06-2011 11:12 AM
Photoshop Web Gallery Doug Nelson Your Website 9 01-04-2008 05:09 PM
need help with automated photo web gallery artmaker RP Tutorials 10 08-29-2006 01:08 PM
PS Web Photo Gallery - How to share on web? christine66 Photoshop Help 2 02-02-2005 10:35 AM


All times are GMT -6. The time now is 05:34 AM.


Powered by vBulletin® Version 3.8.4
Copyright ©2000 - 2017, Jelsoft Enterprises Ltd.
SEO by vBSEO ©2011, Crawlability, Inc.
Copyright © 2016 Doug Nelson. All Rights Reserved