Not even a week after I posted about the initial beta of Galleria the project has already grown into 1.0b and I can see true potential in scalability and usage for this javascript gallery.

The project now has a home page, a code repository, documentation, wiki and developers info at google code, a couple of new demos and soon-to-come real-world examples.

Major changes from 0.9 to 1.0

• A new history extension will take control of the back button and present the previously viewed image without re-loading the page, if you prefer to do so.
• Event methods for the image and thumbnails that fires when displayed, so you can customize their behaviors when they appear in your markup
• The image is no longer placed inside each list item and positioned absolute, instead it’s injected into a custom selector of your choice or in a default division, created for you
• Public previous/next methods to simplify the creation of navigational elements

File bug reports at the google code page. Other comments/suggestions/questions etc. can be commented here in the kitchen. Enjoy!

About 6 months ago I posted about a lightweight javascript gallery that could take an unordered list of images, add the source of each image as a background-image rule to it’s <li> element and present them as clickable thumbnails via CSS. It gained some popularity, since it was so easy to implement and style to an individual style. It was also popular because the images where already loaded when the thumbnails showed, which created a snappy browsing experience.

Now it’s time for a new round, presenting Galleria - a fantastic gallery plugin for jQuery.
(more…)

It’s no joke!

I was trying to get a custom flash replacement thing working the way I wanted, and realized that the replaced flash titles looks really bad in text browsers that still supports javascript (try viewing a sifr powered page with CSS turned off in Firefox). So I came up with a simple javascript written in jQuery that can detect if the browser has CSS support:

1. function hasCSS() {
2. var _d = document.createElement('div')
3. _d.id = 'css_test'
4. $('body').append(_d)
5. $('#css_test').css({width:'1px',height:'1px',display:'none'})
6. var _v = ($('#css_test').width() != 1) ? false : true
7. $('#css_test').remove()
8. return _v
9. }

This is the idea behind the script:

1. Create a 1×1 pixel element with a display:none style
2. Append it to the body
3. Check if the offsetWidth of the element is 1px
4. Delete the element
5. Return the boolean result

Use it like this (example):

1. $(document).ready(function(){
2. if(hasCSS()) {
3. // do something
4. }
5. })

I’m not sure this is the way to go but perhaps someone else would find it useful in some other context. Many javascript behaviors and events are based upon the fact that the user agent also supports CSS but that might not always be the case. It works in the browsers I tested in (IE/win, FF, Safari etc.). Have a look at this page without CSS enabled to see the result (you might have to press the refresh button once).

We just finished a new web site for the swedish brand Fifth Avenue Shoe Repair last week. This was my first flash project in years and the first time we connected our beloved django backend with XML content and actionscripted front-end.

(more…)