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?
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:
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
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.
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.
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 :p)
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). 
There are probably 2 ways you could go here
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.
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
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.
Looks good and works well
Nice work mate.
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/posts/827935-Similar-Function-to-Lightbox/example.html
(I’ve inlined the CSS and JS for purposes of this demo)
Main changes are:
[LIST]
[]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).
[/LIST]Take a look at the page and let me know if you have any questions
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?
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
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…
If you’re interested in the rest of this project or have an idea about php & wordpress, my next ‘help’ thread is here.