Lightbox type display? - Post ID 265231

User 2077347 Photo


Registered User
158 posts

Hi everyone,

Is there a way to make a lightbox type display via RSD? I would rather not do all the coding of bringing Virtual Light Box into the site.

Has anyone done it where they make a hover type zoom or something?
User 2823310 Photo


Registered User
312 posts

Hi Kristi,
Well I use http://www.jacklmoore.com/colorbox for lightbox effects but like you say it can be a bit involved. I added my own CSS and rewrote the jquery a bit for RSD, you can see it on a site I'm in the process of making now on this page: http://www.gordw.com/test/fireplace-mantel.html

That said this is about the hover zoom.
You can try this and see how you like it?
I find the transition (ease effect) doesn't work inside RSD but does with preview on in Firefox.

In RSD place a column and drag on a 4x3 or whatever picture from elements.
Go to the design panel and change it to a local image like usual.
Now change the default class to zoom
Make the margin auto / auto to center it.
Open position and use display block,
in position use relative by highlighting, then set it to 0 auto 0 auto

Now scroll back up and change the state to HOVER in style.
In there go down to EFFECT and check box shadow
then change the SCALE to 1.4 (you can play with that later)

Okay since RSD doesn't include any transition effects we need to write our own CSS and add it to the HEAD.
So go to settings and in the box that says HEAD paste this:
<style>
.zoom {
-webkit-transition: all .2s ease-in-out;
-ms-transition: all .2s ease-in-out;
-moz-transition: all .2s ease-in-out;
transition: all .2s ease-in-out;
}
</style>

Now use PREVIEW ON to see it in your browser ( so you should see the transition ease work)

That's just a basic zoom but if it's what you want, it that should give a way to start.
and for any other images from now on you can just apply the "zoom" class.
User 2823310 Photo


Registered User
312 posts

User 187934 Photo


Senior Advisor
20,271 posts
Online Now

Here's another example.
http://progrower-rsd.coffeecup.com/colorbox.html

and another
http://progrower-rsd.coffeecup.com/flexslider.html
I can't hear what I'm looking at.
It's easy to overlook something you're not looking for.

This is a site I built for my work.(RSD)
http://esmansgreenhouse.com
This is a site I built for use in my job.(HTML Editor)
https://pestlogbook.com
This is my personal site used for testing and as an easy way to share photos.(RLM imported to RSD)
https://ericrohloff.com

Have something to add? We’d love to hear it!
You must have an account to participate. Please Sign In Here, then join the conversation.