SitePoint Sponsor

User Tag List

Results 1 to 18 of 18
  1. #1
    Quality not quantity. bo5ton's Avatar
    Join Date
    Oct 2003
    Location
    Australia
    Posts
    654
    Mentioned
    3 Post(s)
    Tagged
    0 Thread(s)

    Similar Function to Lightbox

    Hi people.
    I'm looking to develop a site that has a landing page which onLoad shows an image in a Lightbox.
    It's not an image gallery. It will be one simple image.

    When the user loads the page, the "lightbox" will open with the image.
    The user will then click on either the left or the right. Each one taking them to a different place.
    Basically I'm looking for that "jump-out-at-you" function. Should I just use the lightbox script and edit it or can you recommend something else?

  2. #2
    Under Construction silver trophybronze trophy AussieJohn's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, Australia
    Posts
    776
    Mentioned
    11 Post(s)
    Tagged
    0 Thread(s)
    You could probably code something like this from scratch in a fraction of the code that would be required compared to using a lightbox library.

    e.g. think along these lines:

    - Make an overlay div + extra div for the image (hidden by default)
    - Place 2 links in the extra div along side the image
    - Place the links over the top of the image with CSS
    - Show the image and overlay div with JS

    Nice and simple
    var details = {
    . . web: "afterlight.com.au",
    . . photos: "jvdl.id.au",
    . . psa: "usethelatestversion.com"
    }

  3. #3
    Quality not quantity. bo5ton's Avatar
    Join Date
    Oct 2003
    Location
    Australia
    Posts
    654
    Mentioned
    3 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by AussieJohn View Post
    You could probably code something like this from scratch in a fraction of the code that would be required compared to using a lightbox library.

    e.g. think along these lines:

    - Make an overlay div + extra div for the image (hidden by default)
    - Place 2 links in the extra div along side the image
    - Place the links over the top of the image with CSS
    - Show the image and overlay div with JS

    Nice and simple
    I thought there would be an easier way. Thanks John.
    However I'd like to be able to load that overlay div with some nice animations like lightbox has, and I'm not in anyway a javascript expert. Think that would be simple?

    I'll see if I can come up with some basic code to get this started.
    Thanks

  4. #4
    Under Construction silver trophybronze trophy AussieJohn's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, Australia
    Posts
    776
    Mentioned
    11 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by bo5ton View Post
    I thought there would be an easier way. Thanks John.
    However I'd like to be able to load that overlay div with some nice animations like lightbox has, and I'm not in anyway a javascript expert. Think that would be simple?
    If you're already using a JavaScript library (like jQuery, MooTools, etc) you could leverage one of those to do some animation for you. (jQuery together with the animation easing plugin can give some nice results, for example)
    var details = {
    . . web: "afterlight.com.au",
    . . photos: "jvdl.id.au",
    . . psa: "usethelatestversion.com"
    }

  5. #5
    Quality not quantity. bo5ton's Avatar
    Join Date
    Oct 2003
    Location
    Australia
    Posts
    654
    Mentioned
    3 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by AussieJohn View Post
    If you're already using a JavaScript library (like jQuery, MooTools, etc) you could leverage one of those to do some animation for you. (jQuery together with the animation easing plugin can give some nice results, for example)
    Excellent, thanks again John.
    I'll look into it and post back here should I get into trouble.

  6. #6
    Quality not quantity. bo5ton's Avatar
    Join Date
    Oct 2003
    Location
    Australia
    Posts
    654
    Mentioned
    3 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by AussieJohn View Post
    If you're already using a JavaScript library (like jQuery, MooTools, etc) you could leverage one of those to do some animation for you. (jQuery together with the animation easing plugin can give some nice results, for example)
    Hey John, I have come up with a quick sample using a popup script using jquery.
    I think it works well but obviously hasn't been styled properly yet.
    Just want to know your thoughts on the function so far.
    Cheers.

  7. #7
    Under Construction silver trophybronze trophy AussieJohn's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, Australia
    Posts
    776
    Mentioned
    11 Post(s)
    Tagged
    0 Thread(s)
    Looking pretty good. The only comments I would have is around the use of the <noscript> section.

    You're using the <div id="main"> in there as well as outside of that section. Technically, since both could be rendered at the same time. Though programmatically, the div in the <noscript> section is not targetable, at least not in Chrome which I just quickly tested in (And of course if they are both being rendered, JS is disabled anyway )

    The other question I would pose is the necessity of the <noscript> section. If you're progressively enhancing (like you are doing currently), then you'll probably find that it's not really necessary to have a <noscript> section.
    var details = {
    . . web: "afterlight.com.au",
    . . photos: "jvdl.id.au",
    . . psa: "usethelatestversion.com"
    }

  8. #8
    Quality not quantity. bo5ton's Avatar
    Join Date
    Oct 2003
    Location
    Australia
    Posts
    654
    Mentioned
    3 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by AussieJohn View Post
    The other question I would pose is the necessity of the <noscript> section. If you're progressively enhancing (like you are doing currently), then you'll probably find that it's not really necessary to have a <noscript> section.
    Thanks John.
    I've made some adjustments and you can kind of see what I'm doing in that sample link. I basically want my logo to be in the background while the two images load for clicking in the popup.
    I purely put the <noscript> in in case JS is disabled.
    When it is disabled, I will have the logo with the two images underneath. It may seem redundant to have the JS popup at all, I just wanted something unique.
    I took out a bit of stuff in the popup.js as it wasn't really needed.

    Because the JS loads those divs, does that mean I couldn't have "original" content sitting there (like just a one image logo) while the popup loads? (I'm not good at JS). :P

  9. #9
    Under Construction silver trophybronze trophy AussieJohn's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, Australia
    Posts
    776
    Mentioned
    11 Post(s)
    Tagged
    0 Thread(s)
    There are probably 2 ways you could go here
    • You could show the div with your theme selection at the bottom of your page (Will your theme selection be JS driven or server side?)
      Then pop up the div once the page loads
    • Or, as you are currently doing, hide the div by default with CSS and show it on page load.

    When you're progressively enhancing your page, you won't normally have a need for the <noscript> tag as the "no javascript" experience should still be usable. The first scenario I pointed out would be the most ideal of the two as it will also show the selection when JS is disabled and just show it differently when JS is enabled.
    var details = {
    . . web: "afterlight.com.au",
    . . photos: "jvdl.id.au",
    . . psa: "usethelatestversion.com"
    }

  10. #10
    Quality not quantity. bo5ton's Avatar
    Join Date
    Oct 2003
    Location
    Australia
    Posts
    654
    Mentioned
    3 Post(s)
    Tagged
    0 Thread(s)
    I plan to have this page load after a cookie is checked via PHP. If there is no cookie = load this page so user can choose their theme. If got cookie with theme selection already, load corresponding wordpress theme.

    I'm not sure how to attack that first point. Ohhhhh - so if I'm using this popup script and the user can see it, obviously their javascript is on! therefore it shows the popup, whereas without it it just has the original content... However, I would like the logo to be in the background while the popup loads, if that makes sense...

    I've almost got it... See my previous link

  11. #11
    Under Construction silver trophybronze trophy AussieJohn's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, Australia
    Posts
    776
    Mentioned
    11 Post(s)
    Tagged
    0 Thread(s)
    Ah yes, I see what you mean, it's horizontally centred, but not vertically.

    You can fix this by absolutely positioning the div and setting the left and top position to 50%, then set the top and left margin to half of the height and width respectively.

    :-)
    var details = {
    . . web: "afterlight.com.au",
    . . photos: "jvdl.id.au",
    . . psa: "usethelatestversion.com"
    }

  12. #12
    Quality not quantity. bo5ton's Avatar
    Join Date
    Oct 2003
    Location
    Australia
    Posts
    654
    Mentioned
    3 Post(s)
    Tagged
    0 Thread(s)
    How's this. Looks pretty good I reckon. Test with/without JS.

  13. #13
    Under Construction silver trophybronze trophy AussieJohn's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, Australia
    Posts
    776
    Mentioned
    11 Post(s)
    Tagged
    0 Thread(s)
    Looks good and works well :-)

    Nice work mate.
    var details = {
    . . web: "afterlight.com.au",
    . . photos: "jvdl.id.au",
    . . psa: "usethelatestversion.com"
    }

  14. #14
    Under Construction silver trophybronze trophy AussieJohn's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, Australia
    Posts
    776
    Mentioned
    11 Post(s)
    Tagged
    0 Thread(s)
    The only comment I would still have is around the <noscript> section.

    I've reworked your page slightly to show what my way of doing it progressive enhancement would be.

    http://afterlight.com.au/sitepoint/p...x/example.html
    (I've inlined the CSS and JS for purposes of this demo)

    Main changes are:
    • Removed <noscript> section
    • added a .no-js class on the <html> el
    • removing the .no-js class with JavaScript
    • changed some styles around to reflect this
    • Put the #choiceBox div inside the #logo div to make sure they are displayed together properly when JS is turned off (and to not make the CSS too complicated).
    Take a look at the page and let me know if you have any questions
    var details = {
    . . web: "afterlight.com.au",
    . . photos: "jvdl.id.au",
    . . psa: "usethelatestversion.com"
    }

  15. #15
    Quality not quantity. bo5ton's Avatar
    Join Date
    Oct 2003
    Location
    Australia
    Posts
    654
    Mentioned
    3 Post(s)
    Tagged
    0 Thread(s)
    Wow thanks John! It looks a lot more simple and less bloated than what I had!
    Can I ask how that no-js class works? The javascript part anyway.
    Is noscript in general frowned upon?

  16. #16
    Under Construction silver trophybronze trophy AussieJohn's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, Australia
    Posts
    776
    Mentioned
    11 Post(s)
    Tagged
    0 Thread(s)
    The no-js class is just a style hook so you can style (hide and show) things when js isn't available.

    <noscript> is a bit of an old and outdated method that was much more applicable when people were using inline JavaScript and event handlers that would break when js was disabled or not available. When using progressive enhancement and unobtrusive JavaScript it's not something you really need to use,

    Of course without the noscript section you no longer need to worry about updating two sets of the same content.


    ---
    ~ via Tapatalk
    var details = {
    . . web: "afterlight.com.au",
    . . photos: "jvdl.id.au",
    . . psa: "usethelatestversion.com"
    }

  17. #17
    Quality not quantity. bo5ton's Avatar
    Join Date
    Oct 2003
    Location
    Australia
    Posts
    654
    Mentioned
    3 Post(s)
    Tagged
    0 Thread(s)
    Hmm,I think I get it.
    If Javascript is enabled then obviously it can read the javascript which removes the no-js class from the chioiceBox, but when javascript is disabled it can't remove that class and renders that css.
    It's like an if statement without using the if statement! Tricky!

    edit: you're too quick too reply!
    Thanks so much for your help! - I can't wait to show you the end product!

    Now onto setting and retrieving cookies on server side...

  18. #18
    Quality not quantity. bo5ton's Avatar
    Join Date
    Oct 2003
    Location
    Australia
    Posts
    654
    Mentioned
    3 Post(s)
    Tagged
    0 Thread(s)
    If you're interested in the rest of this project or have an idea about php & wordpress, my next 'help' thread is here.


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
  •