Outline //
Sample Page //
Web Jobs //
Resources //
Homework
Web Graphics //
Information Architecture //
Styleguide //
Wireframes //
Sitemap //
SEO //
3rd Class //
4th Class
4th Class Notes
For next week's class try to get Galleria running on one of your pages. [08.20.08]
Galleria
There are numerous plug-in bits of code available for producing thumbnail-driven portfolio galleries. The following one I found which uses the jquery framework and an unordered list tag. jquery is a free download and very small, it's basically a library of useful javascript components. Below I'll show the steps to install and use it. All credit due to www.monc.se who created this and shared it. Please visit David's site to view his instructions, thanks David!
What do you need to run Galleria?
- Download jquery
- Download Galleria [688k]
- Uncompress both jquery.min.js and galleria-1.0b.js
- Place both files in a folder inside your site called "js"
- Navigate to galleria.html and view the source by right clicking on the page
- I've commented the source code inside for what you need to copy.
- Copy the marked sections and place them inside your page
- Be sure to place the "script" sections in the head of your document, and the "ul" elements in the body.
- Add "list items" as marked in the comments to add images
Potential Problems
- Galleria doesn't show up. Check that you've placed the "script" code inside the head.
- Galleria shows up but no images show up. Check that you've added the paths correctly to your list items. Check that you're navigating to the correct folder where your images are located. ex: "images/lemur.jpg"
- Images are the wrong size. I cropped all my images to the largest size, 700px X 440px, it makes the smaller thumbnails automatically.
- I didn't run into any other problems, but email me with any you have and I will try to fix.
See Galleria example running here.