Tag Archives: javascript

The image overlay effect

Posted on by

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…

Rotating Banner Image

Posted on by

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.