BJ, if they are all portrait format then the layout should still work. Just imagine the gallery turned through 90 degrees.
BTW if you are trying to get this to work on IE for a Mac then there are problems in the layout of the thumbnails. You will need to find another way of positioning them around the outside edges of the gallery. Unfortunately I do not have a Mac for testing :(
Stu, I love the idea. I have been wracking my brains on a project for a client and you have given me some great ideas! Thanks. By the way, as a Mac user, interesting quirks to note on my end. The hover feature works in IE, but the click does not show you the image until you move the mouse off the thumbnail. You can see the full image if you more to another box, see the new hover image, then move the mouse outside of the box. Hope this makes sense and helps in some way.
Thanks for the great tutorial. My only problem is I can't seenm to get the large image to remain on screen in Safari 1.3.1. That function works on IE 5.2 for Mac but only "hovers" in Safari - I am really new to CSS so forgive me if it is a really obvious question but is there a way to make the large image remain in both browsers?
Cyn, Safari acts like Opera when it comes to the :active and :focus pseudo classes. They only work whilst the mouse button is held down. There is no way round this I'm afraid.
A bit of redundancy on my part and a touch of something new:
Safari 2.0 and Shiira
Half image while scrolling works but graffiti background image doesn't change unless the mouse button is held down. As long as the mouse button is depressed a different full size image will be visible.
Flock - works
Firefox 1.5 - works
I am new in CSS and i wonder how could i get the exact style as shown in your example (i.e. in gallery) I tried to copy and paste it to an editor (also edit the img scr). Then after i run it, all i see is a list of images. (horizontally)
Love this gallery. Is there an easy way to make a picture appear default in the middle instead of the grey background? Keep up the great work, I've learned more in 1 day here than in the past couple mosts through other tutorials online!
Thanks very much Stu. This tutorial was a great help. :)
So this gallery is great and im using it for our band pic gallery page. However id like to expand the thumbs to the perimeter of the full size so that the full image is seen on click. Also im aware that this would add more thumbs to make up the perimeter. Also how and where do i put the "click" image you have on the example?
Thanks to Alex for this script.
Please enter your comments for this site page.
Please note that all posts are moderated.
Maximum word length is 80 characters.
Messages limited to 1200 characters.
Web links should not include 'http://'
If your donation is for the use of a demo then please email me with the demo url after making your donation.