Reading
blue-triangle-element

Articles

PFRE is the original online resource for real estate and interior photographers. Since 2006, it has been a community hub where like-minded professionals from around the world gather to share information with a common goal of improving their work and advancing their business. With thousands of articles, covering hundreds of topics, PFRE offers the most robust collection of educational material in our field. The history of real estate photography has been documented within these pages.
All Articles
blue-triangle-element

Latest

We're a few short months away from the PFRE Virtual Conference 2020 and are excited to finally announce this year's roster of presenters! One of the challenges we've faced with last year's in-person event was the difficulty of covering technical, hands ...

COMMUNITY
blue-triangle-element

Forum

The PFRE Community Forum is an online resource for discussing the art and business of Real Estate and Interior Photography.
Join The Discussion
blue-triangle-element

Latest

View Now
Contest
blue-triangle-element

OVERVIEW

For over a decade, photographers from around the world have participated in PFRE’s monthly photography contests, culminating in the year-end crowning of PFRE’s Photographer of the Year. With a new theme each month and commentary offered by some of the finest real estate & interior photographers anywhere, these contests offer a fun, competitive environment with rich learning opportunities. 

Contest Rules
blue-triangle-element

CURRENT CONTESTS

View / Submit
blue-triangle-element

PAST CONTESTS

View Archive
Conference
blue-triangle-element

Conference

PFRE’s Annual Conference in Las Vegas provides real estate and interior photographers from around the world an opportunity to meet on an annual basis, to learn, share best practices and make connections. Many of the leading names in our field are selected to speak on topics aimed at improving our craft and advancing our business. It’s a comfortable, relaxed environment that is fun, easy to get to, and affordable.
blue-triangle-element

Upcoming

PFRE Conference 2020

Registration not open yet
App Store
blue-triangle-element

Latest News

PFRE Virtual Conference 2020 Announcement: Presenter Line Up Part 1 of 2

We're a few short months away from the PFRE Virtual Conference 2020 an ...

Reader Poll: Which Topics Should Be Covered at the 2020 PFRE Virtual Conference?

Planning is well underway for the 2020 PFRE Virtual Conference and we' ...

PFRE Conference 2020 Announcement

As many of you know, last year we hosted the first-ever PFRE Conferenc ...

Podcast
blue-triangle-element

Podcasts

The PFRE podcast is focused on having meaningful conversations with world-class photographers, business professionals and industry leaders, with the goal to inform and inspire.
All Podcasts

Coming Soon...

Resources
blue-triangle-element

Resources

PFRE prides itself on the depth and breadth of the information and professional development resources it makes available to our community. Our goal is to help real estate and interior photographers be successful while bringing the community together and elevating the industry as a whole.
blue-triangle-element

Directory

Coming Soon...

How Can I Implement a before and after Slider on My Website?

Published: 10/02/2017
By: larry

Peter in Calgary asked:

I use Smugmug for my website and I'd like to have some before and after sliders on my site. Can that be done on Smugmug? Has anyone done it? How does it work?

Yes, before and after sliders are a great way to compare images, but I don't believe that feature is built into any web hosting service. The way to put this feature in a website is that you have to be up to inserting some HTML.

One popular way of doing this is to use TwentyTwenty which is a free bunch of HTML code that you can put into your web page to create a before and after slider.

I see many before and after sliders on real estate photographers websites. Does anyone else have an easier way to implement these sliders?

10 comments on “How Can I Implement a before and after Slider on My Website?”

  1. @Bill - Your example is not what Peter is talking about. A Before/After slider is a slider across a single photo that shows a different image as the slider moves across the image. See the example at the top of this page:

    http://zurb.com/playground/twentytwenty

    Your example is one slideshow before and a second slideshow after.

  2. @Matt, very nice site. Thank you for the link to the plugin. I've been planning on adding that to my site but sometimes finding plugins is a chore. Are you using the "Outdoor" theme?

  3. @Ken, thank you, I just finished the remake a few days ago. I am using the outdoor theme, although after all the custom css I had to do and stripping of features I didn't like, it wasn't a really good theme to work with. The back end is pretty limited.

    I have my location(s) on my services page, but should probably add it elsewhere. I've never really gotten any business through my site as I don't do any advertising, strictly referral based at this point.

Leave a Reply

Your email address will not be published. Required fields are marked *

magnifiercrossmenucross-circle