CIS 58.53A - Web Graphic Projects

Lightbox - Variations

Click icon to view demonstration

I wa ted to show you how to make some simple modifications to this page. The first issue is the size of the thumbnail, the actual size is 300 by 225 pixels. When I hover over the image it is not expanding to it's full size. I could either resize the original photo or I could change the CSS code so it displays at 300 by 225.

I access this CSS code

.photo ul.topic li a:hover ul li a:hover img,
.photo ul.topic li:hover ul li a:hover img
{position:absolute; left:-50px; top:-32px; width:200px; height:150px; border-color:#fff;}
</style>

And modify the height and width values as shown below.

.photo ul.topic li a:hover ul li a:hover img,
.photo ul.topic li:hover ul li a:hover img
{position:absolute; left:-50px; top:-32px; width:300px; height:225px; border-color:#fff;}
</style>

I view the revised page and see that now my thumbnails does look larger when I hover. That's the good news, the bad news is that it can be hard to access some of the images because the enlarged image blocks some of the original thumbnails. I decide to change the location of where the hovering image will display so i return to the code. I change the left and top values to -75 and -50

.photo ul.topic li a:hover ul li a:hover img,
.photo ul.topic li:hover ul li a:hover img
{position:absolute; left:-75px; top:-50px; width:300px; height:225px; border-color:#fff;}
</style>

To review the style listed above controls the size of the window when you hover, and the position of that hover area. In order to remember that, I add this comment to the code

/* change size of hovered window and position */

Next I would like to change the Yard tab so that instead of being a tab, it is a title which spans the entire grid area. I locate the styles that controls the class of "topic". There are several styles, and as I review them I see that the basic container that shows the thumbnail is 635 pixels. Below that is a width of 125 pixels, and then below a width of 124. I believe the 124 is probably the width of a single tab, and the width of 125 allowed for a single pixel between each tab.

.photo ul.topic {padding:0; margin:0; list-style:none; width:635px; height:auto; position:relative; z-index:10;}

.photo ul.topic li {display:block; width:125px; height:31px; float:left;}
.photo ul.topic li a.set {display:block; font-size:11px; width:124px; height:30px; text-align:center;

I change the width of 124 to 635 and view the page in the browser. That kind of works, but the area is too large, there is probably another style that is adding padding, border or margin. I need to reduce my value. I find that 624 seems to be the perfect value.

.photo ul.topic li a.set {display:block; font-size:11px; width:624px; height:30px; text-align:center;

I add another comment so I can remember how I made the change.

next I change the size of the original thumbnail which displays when the page loads. I find the style which lists the size as 100 pixels by 75, which is about half of what the larger window was. I change my value to 150 by 113

original code

.photo ul.topic li ul li a img
{display:block; width:100px; height:75px; border:5px solid #eee;}

new code

.photo ul.topic li ul li a img
{display:block; width:150px; height:113px; border:5px solid #eee;}

As I view the file now I see the design falls apart. The grid is set up so that the new larger thumbnail cannot display correctly. The only thubnail that can be seen at the larger size is the last one on the right. The other thumbnails are displaying under the one to their right. I would need to explain the display area, reduce padding, margin or border, or display only 3 images at a time to make this last change work. That is more than I want to do, but it could be done.

The next change I want to make involves removing some of the functionality of the code. If I don't want to click on the hovering image and load a larger version, I can remove the linking code and replace it with a #. In this revised lightbox there would just be 2 version of the image, the original small thumbnail and the larger version which displays when I hover.

original code

new code

The final detail I want to change is the border that surrounds the hovering image. The current page has a white, thick border. As I looked at the CSS to make these changes I was a little confused. I found that the style that controls the size of the hover image had a border color, but it did not have a border size. This much be controlled by a different style somewhere in the document.

First I change the border color to black

.photo ul.topic li a:hover ul li a:hover img,
.photo ul.topic li:hover ul li a:hover img
{position:absolute; left:-75px; top:-50px; width:300px; height:225px; border-color:#000;}
</style>

I locate the style that controls the border width

.photo ul.topic li ul li a img
{display:block; width:100px; height:75px; border:5px solid #eee;}

I change it to 1 pixel, but see that this change causes other borders to be reduced and the overall look of my gallery is ruined. I restore the original value of 5 and decide to make the change another way. I simply add a border width to the style that controls the hover image.

.photo ul.topic li a:hover ul li a:hover img,
.photo ul.topic li:hover ul li a:hover img
{position:absolute; left:-75px; top:-50px; width:300px; height:225px; border: 1px solid #000;}
</style>

Now that I have the gallery the way I want it, I access the Tool menu and Validate Local HTML. Snicker Snack the page passes XHTML 1.0 Strict.

Here is the revised version of Lightbox

CIS 58.53A - Web Graphics Projects

Lightbox - Variations