bo5ton — 2012-02-06T21:11:47-05:00 — #1
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?
aussiejohn — 2012-02-06T22:38:20-05:00 — #2
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
bo5ton — 2012-02-06T22:53:29-05:00 — #3
I thought there would be an easier way. Thanks John.
I'll see if I can come up with some basic code to get this started.
aussiejohn — 2012-02-06T23:28:06-05:00 — #4
bo5ton — 2012-02-06T23:41:10-05:00 — #5
Excellent, thanks again John.
I'll look into it and post back here should I get into trouble.
bo5ton — 2012-02-07T21:25:49-05:00 — #6
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.
aussiejohn — 2012-02-07T22:43:18-05:00 — #7
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.
bo5ton — 2012-02-07T23:08:54-05:00 — #8
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).
aussiejohn — 2012-02-07T23:22:54-05:00 — #9
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?)
- Or, as you are currently doing, hide the div by default with CSS and show it on page load.
bo5ton — 2012-02-07T23:24:43-05:00 — #10
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've almost got it... See my previous link
aussiejohn — 2012-02-07T23:28:49-05:00 — #11
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.
bo5ton — 2012-02-08T01:00:27-05:00 — #12
How's this. Looks pretty good I reckon. Test with/without JS.
aussiejohn — 2012-02-08T15:30:59-05:00 — #13
Looks good and works well
Nice work mate.
aussiejohn — 2012-02-08T16:08:27-05:00 — #14
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.
(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
- 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
bo5ton — 2012-02-08T17:10:56-05:00 — #15
Wow thanks John! It looks a lot more simple and less bloated than what I had!
Is noscript in general frowned upon?
aussiejohn — 2012-02-08T17:19:04-05:00 — #16
The no-js class is just a style hook so you can style (hide and show) things when js isn't available.
Of course without the noscript section you no longer need to worry about updating two sets of the same content.
~ via Tapatalk
bo5ton — 2012-02-08T17:26:03-05:00 — #17
Hmm,I think I get it.
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...
bo5ton — 2012-02-08T20:55:08-05:00 — #18
If you're interested in the rest of this project or have an idea about php & wordpress, my next 'help' thread is here.