Introduction to CSS-based Gallery
Build Your Own CSS-based Gallery is a site worth examining carefully. As we viewed this site we were amazed at the efforts that produced photo albums of such a wide variety of styles based on cascading style sheets. Our eyes were originally drawn to the right panel that listed “Recent Pages”. We thought that the demos in the that panel were the only examples. After viewing demos we discovered many other styles for presenting photo albums. We could spend weeks browsing this site for other useful “css templates” but our objective is to continue researching WordPress photo album plugins. We will revisit this site since we are also interested in learning by example the use of cascading style sheets. For anyone learning cascading style sheets
Check out CSS classes for font size. The cascading style sheet is imbedded in html. Examining this page and its source code is a simple example of how to manage font sizes and color with only a small effort.
A few demos were tested
As quoted on the author’s home page, “Cascading Style Sheet (CSS) is a simple mechanism for adding style (e.g. fonts, colors, spacing) to Web documents.” This quote was extracted
from W3C website. That site included a link back to CSSplay for examples of how to use css. From the W3C site we discovered Sitepoint providing the definition of “what is a stylesheet?”
CSS tutorial starting with HTML + CSS, is a site recommended for learning how to use stylesheets. Some photo gallery demos of CSS-Gallery that we tested were:Cross Browser Multi-Page Photograph Gallery as we mouseover the tabs, all of the images associated with that tab are displayed as thumbnails. As we mouseover each thumbnail image, a larger image is displayed. We examined the page carefully and found the author has provided the imbedded script within the header of an html file. We saved the file and placed credit icon on a development page. That link will be available on this site when posted. Since we are using our own images, we need a time budget to get that done. Images 3072×2304 were tested on our development test page without sizing images. This would be another plus factor if storage concerns were of no consequence. To conserve storage, each image will be optimized before uploading to our host site. This effort takes a large bite out of our time budget. Irfanview may be useful here for batch optimization of files. You are able to batch process original images to thumbnails with one pass and process original images to desired size without overwriting your original images. Check out the Q&A Misc on using Irfanview to do this.
An active Photograph Gallery for fast download speeds
This demo stands out because of the various thumbnail divisions at top, right, left, and bottom. Since a reference was show on an update we will examine it next.
Active Photograph Gallery for slow download speeds is the same as above. The author states “This one does not preload the images so is ready to use as soon as the thumbnails are loaded and is intended for use at slow download speeds.
The hover will just display the text information for the picture. When you want to see the full size image then click the thumbnail (which is just a small area of the full sized image rather than a reduced image) and the image will be downloaded. Because the full size image is not preloaded may take several seconds to fully display”
We tested this gallery with 5 images out of 10 using the required width of 425px for large images and 75 px for thumbnail
Photo-simple is our recommendation for simplicity as producing thumbnails is not required. We tested 500px images as optimum size and the script condenses the thumbnails as if by magic. : ) This is a mouseover of thumbnails, but we prefer selecting image so that image view remains until mouseover is beyond the image box. Note that the size of larger images may vary so we will not need to be concerned about images less than 500px by 500px. But limiting the height to 500px is recommended as it extends to the bottom of the array of thumbnails in the right panel.
Sidebar notes: Our tests and conclusions.
When we have the time for returning to cssplay we will examine the other goodies that include menus, layouts, boxes, ozilla, Explorer, anb Opacity. All of these are worth studying to improve styling of web sites. In addition to the photo galleries menus also attract our interest, especially in creating drop down menus.
In examining 08-03-08 Not so simple gallery, we considered the following.
- Examine source code that displays a specific album for path of the author’s css file
- Bring up the css file related to the gallery being viewed and copy that file from browser to css folder for the album
- Extract and copy the script that produces the gallery to html editor.
- Select from our own image files for a photo album display and size thumbnails and full size images accordingly.
- Enable Credit by locating the link button and copying the script to the “gallery.html” This button will link back to the author’s page.
We activated Dreamweaver and created an html file linked to the saved css file identified on the site CSSPlay. We examined the demo html script for the album and adjusted the sizes of the images to be consistent with sizes viewed for thumbnails as well as larger image. When we determined where the author’s gallery demo page html script defined the image sizes for thumbnail and larger image, we sized our images accordingly.
Since the CSS-Play site has many demos, we invite you to examine the author’s many examples. We will forgo posting any of the css based albums on our test site, until we have examined the full list of photo album plugins. We will pursue css demos viewed on CSSPlay site after completing the review of wordPress album plugins listed on the original post of our Samtex test site.
Tags: css
