Help with Apple like lightbox effect

JavaScript
1

I would really like to recreate this Apple lightbox effect, Can anybody point me in the direction of a tutorial on how its done.

2

That looks like fancybox: Fancybox - Fancy lightbox alternative

You can tell by looking at the code under the hood.

The site has instructions for how to install fancybox, so have a look at that and come back if you have questions. :slight_smile:

3

Thanks Ralph. Do you know if fancybox supports html?

I’m trying to create mini corporate profiles with this effect, so i’d like to have a small picture aligned to the left and a few lines of styled text.

4

Absolutely yes … sort of. :slight_smile:

HTML is always your base, and you can use JavaScript (such as this fancybox effect) to add fancy behavior to that HTML. So, in your case, you’d set up the image and text in HTML, and then you would use fancybox to make a larger version of the small image pop up over the page when it’s clicked on, as in the image you posted.

Normally, the small image would be wrapped in a link, so that when you clicked on it you’d be taken to a separate page just with the image on it. When you add in the JavaScript, instead of that link taking you to another page, the larger image is pulled onto the current page, floating above the page.

5

Hmm i kind of understand
So far i have downloaded the wordpress plugin for fancy pants, and when i add

<a class=“fancybox iframe” href=“http://www.google.com/”>Test</a> it opens a lightbox with google in it.

Do you know what code id need to add a profile picture and a Q&A to the side of it?

6

This is all a bit vague. Can you post a link, and describe exactly what you want? What’s fancy pants? That came out of left field. I wouldn’t try to combine two different scripts.

7

The newest version has changed a few things but the basic steps are still the same { visibility: inherit; } jQuery Fancybox Plugin Made Easy!

8

i put Fancypants when i meant fancyBox wordpress plug.

The site im working on is Meet the Team « ROEYE

What im trying to do and have done half sucessfully is create mini profiles from the lightbox. Unfortunately at the moment only the first lightbox is working. But the others arent. They show a lightbox but not the relevant content. Any suggestions

9

nice site!

10

They all work for me in Firefox. What browser are you using?

EDIT: Whoops, no they aren’t. Each one pops up, but they all show the same content. You didn’t specify how it wasn’t working, so I assumed the popup wasn’t working.

11

Hover over each picture the link is the same:
Meet the Team « ROEYE

Looking at the source, the popup points to the same div:

<h6>Amy Swatkins</h6>
<p><a class="fancybox" href="#testube"><img class="alignleft" src="http://www.roeye.com/images/as1.jpg" /></a></p>
<div style="display:none" id="testube">


<h6>Chris Blower</h6>

<p><a class="fancybox" href="#testube"><img class="alignleft" src="http://www.roeye.com/images/cb1.jpg" /></a></p>
<div style="display:none" id="testube">


<h6>Rebecca Charlton</h6>
<p><a class="fancybox" href="#testube"><img class="alignleft" src="http://www.roeye.com/images/rc1.jpg" /></a></p>
<div style="display:none" id="testube">

You probably want something like this:

<a href="#John">John</a>
<div id="John"></div>

<a href="#Mary">Mary</a>
<div id="Mary"></div>

The id is supposed to be unique.

12

Thanks so much. That really helped me out

13

Hey Guys

Can you help me out with these 3 effects

  1. next and previous arrow buttons arent showing up, how do i turn
    them on

  2. I really like the magnifying glass effect that is used here for
    symbol the lighbox effect Flow: Task Management and Online Collaboration for Teams is there a way to
    set that.

  3. Am i able to set it to load on rollover, instead of click.

Thanks for all your help, much appreciated.