12/1/2023 0 Comments Light table for slides![]() ![]() Since we don’t actually want to display the image here, we position it way to the left of the browser viewport, thereby making it effectively invisible. ![]() This img tag is there purely so we can attach a jQuery load event to it to determine when the wooden table background image has loaded. (We also set this on the html element, since IE needs this to prevent the scrollbars.) The div holding the wooden table img tag /* The div holding the wooden table img tag */ overflow: hidden ensures that scrollbars don’t appear. This is given a dark grey background and a default font. The page body /* The page body */įont-family: Helvetica, Arial, sans-serif This styles everything from the page background through to the wooden light table and the photos themselves. The #lighttable div itself, containing the 5 photos that we want to display on the table.The reason for loading it via an img tag too is so that we can attach a load event to it to detect when the image has been loaded. In the final page, this image is actually displayed as a background image of the #lighttable div. An img tag for the wooden table image, stored inside a #wooden-table div.Kitchen Table | A "light table" with draggable photos using CSS3 and jQuery | © | Back to TutorialĪs you can see, the markup is very straightforward. Once on the table, a photo can be dragged around by using the mouseįirst let’s look at the HTML for our light table:.The photos have a white border and drop shadow to add a 3D effect, and are ever-so-slightly transparent.Each photo is given a random position and orientation to create a “scattered” effect.Each photo “floats” onto the table as it loads.A wooden table background image for the photos to sit on.The aim is to make our table and photos look as realistic as possible. ![]() Our “light table” is going to be an image of a wooden kitchen table, and the photos will be prints rather than transparencies, but the basic idea is the same! A traditional light table is a flat illuminated panel that you can place transparent slides on for viewing. In this tutorial you’re going to learn how to create a virtual light table using jQuery and CSS3. ![]()
0 Comments
Leave a Reply. |
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |