Cyberward.net

Gerbera photo from new gallary

I finally have my pictures up at Christopher Ward Photography. I was hoping to get them up before the end of the year, but a couple of days isn’t too bad. I had thought that I would go with a site at smugmug, and I may later, but I had an idea for some javascript-y-ness that I wanted to try first. The album’s on the left contain pictures that fly out into a collage. I will post more on the Javascript later. I tried something different with the albums too. Annie had the idea to group them by color, instead of landscape, people, etc. I think it worked pretty well. I have some images that I wasn’t able to get in because of it, but the individual collages look better and more cohesive this way.

As part two of yesterdays Javascript Speed post, I have an interresting link. MooTools, another Javascript library, has a speed comparison page up here. I had looked at MooTools a while back when I put up the slideshow piece on the front page of the site. I didn’t look into it too much, but it seemed small and compact. Anyway, the speed comparison is interresting. If you go to the site, press the “start tests” button in the upper right to see the differences. I got here while I was looking into jQuery. Prototype gets smacked in the speed test. Yikes.

This post is from 2007, but was already complaining that Wordpress was going to use Prototype instead of jQuery for version 2.0. (which was just released a month ago) It would appear to me though that Wordpress went and switched to jQuery. Looking at the Wordpress docs, I found this page on AJAX, and it talks about jQuery.  When I look at the source of one of the admin pages, there is jQuery references all over, but nothing about prototype.

Looks like Wordpress has switched to jQuery, and if I am looking at making plugins for wordpress, I might want to think about moving to jQuery.

I have been working on a new script that will “fly” collages out from an album. It was using an effect from script.aculo.us. I am much closer, and am in the process of gathering images to post before I call it done. I tested it with Safari, Windows Explorer 6, and Firefox 3.0. I have to say, it was crazy smooth in Safari and Explorer. I was disapointed in Firefox. It is a little jerky. It was in development, but I figured that was just something to live with until I tried the other browsers.

There is hope. Firefox 3.1 is in beta (as of October), and it is supposed to have Tracemonkey support among other things. All the browsers have been madly working on their javascript kung fu it would appear. I haven’t tried the beta, but here’s hoping for a smoother ride once it hits prime time.

On ChristopherWardPhotography.com, when you click on an image, it pops up the image in a floating panel above the other images. I think this is pretty cool. I have done something similar in code that I had written to tarken the screen, put up a “glass pane” (you can’t click on links), and place content in an overlayed div. This library works really slick though.

I first started with lightbox. It is pretty popular, and quite a few people use it, although I don’t think it is over used. This works pretty well. It has a few dependancies, such as prototype, and scriptaculous. These libraries on there own add quite a bit of functionality to javascript, but they aren’t lightweight.

Then I found lytebox. This project shrinks down the code by “borrowing” just what is needed for the lightbox effect. Then he has improved it. The images will automatilcy resize to fit the browser screen, and it will also allow html documents in these pop ups, not just images. This is what I went with.

I kind of wish that lightbox had the same image scaling and html content that lytebox has, because I have some more plans for some sriptaculous scripting…

I got around to creating the rotating banner images last night. I made 3 new ones, but they aren’t really my best images. I need to hunt round for some others. My flowers don’t really fit the landscape type space that is there, but I will have to see what I can do.

To make this work, I started out with some javascript in an onLoad function, but the image would blink with either the default image, or the background color. To fix this, I scrapped that idea, and went to an inline style block that is written out with a little php in the header.php file in the template folder.

<style type="text/css">
  #headerLeft {
    background-image: url(<?php bloginfo('stylesheet_directory'); ?>
        /images/header-img-<?php echo rand(1,4); ?>.jpg);
  }
</style>

This just gets a number between 1 and 4, and the base directory for the template, and sticks it all together to make the image. Presto. No more flickering.