SitePoint Sponsor

User Tag List

Results 1 to 13 of 13
  1. #1
    SitePoint Member
    Join Date
    Jan 2007
    Posts
    10
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Help with Apple like lightbox effect

    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. #2
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    23,613
    Mentioned
    413 Post(s)
    Tagged
    7 Thread(s)
    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.

  3. #3
    SitePoint Member
    Join Date
    Jan 2007
    Posts
    10
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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. #4
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    23,613
    Mentioned
    413 Post(s)
    Tagged
    7 Thread(s)
    Quote Originally Posted by fameadvance View Post
    Do you know if fancybox supports html?
    Absolutely yes … sort of.

    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. #5
    SitePoint Member
    Join Date
    Jan 2007
    Posts
    10
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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. #6
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    23,613
    Mentioned
    413 Post(s)
    Tagged
    7 Thread(s)
    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. #7
    SitePoint Wizard bronze trophy PicnicTutorials's Avatar
    Join Date
    Dec 2007
    Location
    Carlsbad, California, United States
    Posts
    3,627
    Mentioned
    15 Post(s)
    Tagged
    0 Thread(s)
    The newest version has changed a few things but the basic steps are still the same { visibility: inherit; } jQuery Fancybox Plugin Made Easy!

  8. #8
    SitePoint Member
    Join Date
    Jan 2007
    Posts
    10
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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. #9
    SitePoint Guru team1504's Avatar
    Join Date
    May 2010
    Location
    Okemos, Michigan, USA
    Posts
    732
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    nice site!

  10. #10
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    23,613
    Mentioned
    413 Post(s)
    Tagged
    7 Thread(s)
    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. #11
    SitePoint Addict
    Join Date
    Dec 2005
    Posts
    336
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Hover over each picture the link is the same:
    Meet the Team ROEYE

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

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

    <
    p><class="fancybox" href="#testube"><img class="alignleft" src="http://www.roeye.com/images/cb1.jpg" /></a></p>
    <
    div style="display:none" id="testube"
    PHP Code:
    <h6>Rebecca Charlton</h6>
    <
    p><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:
    PHP Code:
    <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. #12
    SitePoint Member
    Join Date
    Jan 2007
    Posts
    10
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks so much. That really helped me out

  13. #13
    SitePoint Member
    Join Date
    Jan 2007
    Posts
    10
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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.


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •