jump to navigation

Gallery Complete January 30, 2011

Posted by flutebrarian in Web Design.
Tags: , ,
add a comment

With a little bit of tweaking, the galleries are now complete. Using only CSS techniques for the main hover of the thumbnails and display of the images, one can temporarily view the full-sized image without having to click to another page. If the image is too large to be viewed, a little JavaScript allows the viewer to click on the image and “set” it in the viewing space to scroll up and down to study it.

Not bad.

The only thing I don’t like is that very small originals look mammoth in comparison to really large originals since they are all set for the same width for display on screen. I may play with that some more before all is said and done.

You can see the results of the project at www.flutebrarian.com/mccallum/ and clicking on one of the Paintings buttons or the Prints button. Please note this is the temporary work-in-progress site, not the final site.

Advertisements

Gallery in Progress January 8, 2011

Posted by flutebrarian in Web Design.
Tags: , , ,
add a comment

Progress is being made on the image galleries for artist Steven McCallum’s updated website. Following the detailed tutorial for this technique at “How to Create a Photographic Gallery Using CSS” I have managed to get this far:

Beginning of Painting Gallery

The opening screen of the painting gallery

The thumbnails have moved from the right side of the gallery to the left; the thumbnails are displayed in a scrolling overflow div; the titles and information for the paintings are moved to the top of the large image; and a default image explaining how to view the images has been added to the background of the image viewer.

The next steps include resizing all the files and renaming them to web-friendly formats (no spaces, all lower case).

One final tweak that I will try is to allow clicking on the thumbnails so that one can scroll up and down the screen if the enlarged image is too tall for the screen. This technique was discussed in an online forum on Webdeveloper.com.

Stay tuned!

CSS Design Links February 14, 2008

Posted by flutebrarian in Web Design.
Tags: ,
add a comment

http://meyerweb.com/eric/css/edge/popups/demo.html – How to create pop-up rollovers