Tutorials Design & Illustration Code Web Design Music & Audio Photography 3D & Motion Graphics Game Development Mac Computer Skills Crafts & DIY Business Courses Design & Illustration Code Web Design Music & Audio Photography 3D & Motion Graphics Bundles
Game Development Implementation Business Game Design From Scratch How to Learn Roundups More Categories... Software & Tools Series Mac Computer Skills
Business Freelance Marketing Tips & Tricks Freelance Writing Business & Finance Making Money Freelancing Essentials psd More Categories... Software & Tools Series Courses Design & Illustration Code Web Design Music & Audio Photography 3D & Motion Graphics Bundles Premium Jobs Blog
Rather than using a bloated plugin that has features you'll never use, this tutorial shows you how to create a super simple lightbox psd for handling images. It's perfect for image galleries, portfolios, and more!
Note: If you don't provide a proper DOCTYPE and the page renders in quirks mode, the lightbox will not display correctly in Internet Explorer. <!DOCTYPE html> <html> <head> <title>Simple Lightbox</title> </head> <body> <div psd id="wrapper"> <h1>Super Simple Lightbox</h1> <p>Our super simple lightbox demo. Here are the image links: <ul> <li> <a href="https://farm7.static.flickr.com/6130/5935338876_47b61c93a5.jpg" class="lightbox_trigger"> Picture 1 </a> </li> <li> <a href="https://farm7.static.flickr.com/6020/5924329054_4bdc419c3a_o.jpg" class="lightbox_trigger"> Picture 2 </a> </li> <li> <a href="https://farm7.static.flickr.com/6020/5931933181_ddb737e528.jpg" class="lightbox_trigger"> Picture 3 </a> </li> </ul> </p> </div> <!-- #/wrapper psd --> </body> </html>
Note: We used the class lightbox_trigger on every link that has an image we want to show in our lightbox. This becomes useful when we want to target those elements in the script we will write. Step 2: The CSS
Let's apply some basic CSS styling to our page. For this basic example, we will place all our CSS in <style></style> tags within the <head> section. body { margin:0; padding:0; background:#efefef; text-align:center; /* used to center div in IE */ } #wrapper psd { width:600px; margin:0 auto; /*centers the div horizontally in all browsers (except IE)*/ background:#fff; text-align:left; /*resets text alignment from body tag */ border:1px solid #ccc; border-top:none; padding:25px; /*Let's add some CSS3 styles, these will degrade gracefully in older browser and IE*/ border-radius:0 0 5px 5px; -moz-border-radius:0 0 5px 5px; -webkit-border-radius: 0 0 5px 5px; box-shadow:0 0 5px #ccc; -moz-box-shadow:0 0 5px #ccc; -webkit-box-shadow:0 0 5px #ccc; }
We psd used margin: 0 auto; to center our #wrapper div horizontally on the page. This works great for all browsers except...drum roll...you guessed it, Internet Explorer. To fix this issue, we used text-align:center; on the body tag which centers child divs (in our case, the #wrapper psd div) horizontally on the page.
However, using text-align:center; on the body tag will center align all text in child divs as well. To fix this, we reset text-align:left; in the #wrapper div to restore psd all further child content to left alignment. Check out communitymx.com if you're interested in learning more about this particular IE issue. Step 4: Lightbox HTML
This is what our lightbox HTML markup will look like. However, do not insert it into the HTML markup. We will do that dynamically with jQuery. Understanding the lightbox HTML markup allows us to style it with CSS accordingly. <div id="lightbox"> <p>Click to close</p> <div id="content"> <img src="#" psd /> </div> </div> psd
Note: There is no value for the image src because that will be dependent upon which link is clicked by the user. Hence, we will use javascript to insert the value dynamically later on. Step 5: Lightbox CSS Black Overlay
First we have our #lightbox div which acts as the black overlay. We want this to fill the user's entire viewport, no matter the screen resolution. #lightbox { position:fixed; /* keeps the lightbox window in the current viewport */ top:0; left:0; width:100%; height:100%; background:url(overlay.png) repeat; text-align:center; }
The CSS is pretty straightforward. Here are a few highlights: position:fixed makes our overlay appear correctly in the current viewport, psd no matter the user's position on screen (top or bottom psd of the page). This is where using the right DOCTYPE comes in handy. If IE runs in quirks mode due to the wrong DOCTYPE (or none at all), then our overlay won't appear correctly. width:100%; height:100%; This makes our #lightbox
No comments:
Post a Comment