Doing it with style
CLOSE XPhotograph 1 - thumbnail/pic_40v.jpg
CLOSE XPhotograph 2 - thumbnail/pic_32v.jpg
CLOSE XPhotograph 3 - thumbnail/pic_39v.jpg
CLOSE XPhotograph 4 - thumbnail/pic_25h.jpg
CLOSE XPhotograph 5 - thumbnail/pic_29h.jpg
CLOSE XPhotograph 6 - thumbnail/pic_31v.jpg
CLOSE XPhotograph 7 - thumbnail/pic_3h.jpg
CLOSE XPhotograph 8 - thumbnail/pic_42h.jpg
CLOSE XPhotograph 9 - thumbnail/pic_27v.jpg
CLOSE XPhotograph 10 - thumbnail/pic_20h.jpg
CLOSE XPhotograph 11 - thumbnail/pic_31h.jpg
CLOSE XPhotograph 12 - thumbnail/pic_47h.jpg
CLOSE XPhotograph 13 - thumbnail/pic_44h.jpg
CLOSE XPhotograph 14 - thumbnail/pic_34v.jpg
CLOSE XPhotograph 15 - thumbnail/pic_33h.jpg
CLOSE XPhotograph 16 - thumbnail/pic_4v.jpg
CLOSE XPhotograph 17 - thumbnail/pic_3v.jpg
CLOSE XPhotograph 18 - thumbnail/pic_6v.jpg
CLOSE XPhotograph 19 - thumbnail/pic_32h.jpg
CLOSE XPhotograph 20 - thumbnail/pic_16v.jpg
CLOSE XPhotograph 21 - thumbnail/pic_5h.jpg
CLOSE XPhotograph 22 - thumbnail/pic_41v.jpg
CLOSE XPhotograph 23 - thumbnail/pic_49v.jpg
CLOSE XPhotograph 24 - thumbnail/pic_47v.jpg
CLOSE XPhotograph 25 - thumbnail/pic_34h.jpg
CLOSE XPhotograph 26 - thumbnail/pic_45h.jpg
CLOSE XPhotograph 27 - thumbnail/pic_23h.jpg
CLOSE XPhotograph 28 - thumbnail/pic_14h.jpg
CLOSE XPhotograph 29 - thumbnail/pic_41h.jpg
CLOSE XPhotograph 30 - thumbnail/pic_46h.jpg
CLOSE XPhotograph 31 - thumbnail/pic_46v.jpg
CLOSE XPhotograph 32 - thumbnail/pic_9h.jpg
CLOSE XPhotograph 33 - thumbnail/pic_15h.jpg
CLOSE XPhotograph 34 - thumbnail/pic_14v.jpg
CLOSE XPhotograph 35 - thumbnail/pic_33v.jpg
CLOSE XPhotograph 36 - thumbnail/pic_16h.jpg
CLOSE XPhotograph 37 - thumbnail/pic_21h.jpg
CLOSE XPhotograph 38 - thumbnail/pic_10h.jpg
CLOSE XPhotograph 39 - thumbnail/pic_1h.jpg
CLOSE XPhotograph 40 - thumbnail/pic_19v.jpg
CLOSE XPhotograph 41 - thumbnail/pic_20v.jpg
CLOSE XPhotograph 42 - thumbnail/pic_18v.jpg
CLOSE XPhotograph 43 - thumbnail/pic_27h.jpg
CLOSE XPhotograph 44 - thumbnail/pic_23v.jpg
CLOSE XPhotograph 45 - thumbnail/pic_37h.jpg
CLOSE XPhotograph 46 - thumbnail/pic_36v.jpg
CLOSE XPhotograph 47 - thumbnail/pic_13h.jpg
CLOSE XPhotograph 48 - thumbnail/pic_48h.jpg
CLOSE XPhotograph 49 - thumbnail/pic_13v.jpg
CLOSE XPhotograph 50 - thumbnail/pic_38v.jpg
CLOSE XPhotograph 51 - thumbnail/pic_4h.jpg
CLOSE XPhotograph 52 - thumbnail/pic_11h.jpg
CLOSE XPhotograph 53 - thumbnail/pic_38h.jpg
CLOSE XPhotograph 54 - thumbnail/pic_36h.jpg
CLOSE XPhotograph 55 - thumbnail/pic_17h.jpg
CLOSE XPhotograph 56 - thumbnail/pic_25v.jpg
CLOSE XPhotograph 57 - thumbnail/pic_30v.jpg
CLOSE XPhotograph 58 - thumbnail/pic_49h.jpg
CLOSE XPhotograph 59 - thumbnail/pic_11v.jpg
CLOSE XPhotograph 60 - thumbnail/pic_2v.jpg
CLOSE XPhotograph 61 - thumbnail/pic_28h.jpg
CLOSE XPhotograph 62 - thumbnail/pic_8h.jpg
CLOSE XPhotograph 63 - thumbnail/pic_40h.jpg
CLOSE XPhotograph 64 - thumbnail/pic_22v.jpg
CLOSE XPhotograph 65 - thumbnail/pic_21v.jpg
CLOSE XPhotograph 66 - thumbnail/pic_42v.jpg
CLOSE XPhotograph 67 - thumbnail/pic_29v.jpg
CLOSE XPhotograph 68 - thumbnail/pic_50h.jpg
CLOSE XPhotograph 69 - thumbnail/pic_26h.jpg
CLOSE XPhotograph 70 - thumbnail/pic_48v.jpg
CLOSE XPhotograph 71 - thumbnail/pic_24h.jpg
CLOSE XPhotograph 72 - thumbnail/pic_6h.jpg
CLOSE XPhotograph 73 - thumbnail/pic_10v.jpg
CLOSE XPhotograph 74 - thumbnail/pic_43v.jpg
CLOSE XPhotograph 75 - thumbnail/pic_28v.jpg
CLOSE XPhotograph 76 - thumbnail/pic_5v.jpg
CLOSE XPhotograph 77 - thumbnail/pic_22h.jpg
CLOSE XPhotograph 78 - thumbnail/pic_1v.jpg
CLOSE XPhotograph 79 - thumbnail/pic_30h.jpg
CLOSE XPhotograph 80 - thumbnail/pic_7v.jpg
CLOSE XPhotograph 81 - thumbnail/pic_12v.jpg
CLOSE XPhotograph 82 - thumbnail/pic_8v.jpg
CLOSE XPhotograph 83 - thumbnail/pic_35h.jpg
CLOSE XPhotograph 84 - thumbnail/pic_24v.jpg
CLOSE XPhotograph 85 - thumbnail/pic_12h.jpg
CLOSE XPhotograph 86 - thumbnail/pic_15v.jpg
CLOSE XPhotograph 87 - thumbnail/pic_17v.jpg
CLOSE XPhotograph 88 - thumbnail/pic_39h.jpg
CLOSE XPhotograph 89 - thumbnail/pic_19h.jpg
CLOSE XPhotograph 90 - thumbnail/pic_43h.jpg
CLOSE XPhotograph 91 - thumbnail/pic_26v.jpg
CLOSE XPhotograph 92 - thumbnail/pic_50v.jpg
CLOSE XPhotograph 93 - thumbnail/pic_44v.jpg
CLOSE XPhotograph 94 - thumbnail/pic_2h.jpg
CLOSE XPhotograph 95 - thumbnail/pic_18h.jpg
CLOSE XPhotograph 96 - thumbnail/pic_7h.jpg
A little bit different from my normal html and css demonstrations, this one uses PHP to produce the html code for the gallery and also to generate the thumbnail images using the GD Library.
So PHP reads all the images from a chosen directory and generates, and saves, a thumbnail of each one which is then 'printed' to the correct place in the gallery html code. The height of each thumbnails is set to 100px and the PHP script calculates the width to keep the height/width ratio correct.
The PHP routine also checks to see if a thumbnail exists and if it does will not call the thumbnail generator routine.
The layout is under stylesheet control.
So click on any of the thumbnail images to see the full size version and then click the 'CLOSE X' text (or anywhere on the full size screen) to close the large image and go back to the thumbnails.
I have also added some styling to the vertical scrollbar which can be seen in IE8+, Chrome and Safari. If you view this in Chrome or Safari you will see how much more pleasing this looks with a little scrollbar styling.
It is a pity that scrollbar styling is not included in the CSS specifications as this is certainly an area of a layout that can be used to good effect.
10th February 2013
Now with 'touch screen' scrolling for IE10.
Because of all the time and effort spent in producing this demonstration I would ask that you respect my copyright.
This demonstration can be used subject to the following terms and conditions.
Your donations keep CSS PLAY running.
If your donation is for the use of a demo then please email me with the demo url after making your donation.