View a demo

Here’s the JavaScript that appears in the header:

<script language="JavaScript" type="text/javascript">
var i = 0;
var slide;

function SlideShow() {
        $( slide[i] ).fade({ duration:5 });
        i++;            
        if (i == slide.length) i = 0; 
        $( slide[i] ).appear({ duration:5, afterFinish: function () { SlideShow(); } });
} 

document.observe(`dom:loaded`, function () {
        $$(`#myslideshow img`).each(function(image){
                $(image).hide();
        });
        slide =  $(`myslideshow`).childElements();
        $( slide[0] ).appear({ duration:1, afterFinish: function () { SlideShow(); } });
});
</script>

Some basic CSS also appears in the header to place the images in the right location on the page:

<style type="text/css">
<!--
#myslideshow img {
        position: absolute; 
        z-index: 10;
}

#myslideshow {  
        position: relative;
        height: 450px;
        width: 600px;
        background-color: #000000;
}
-->
</style>

This basic HTML appears in the body to load the images for the slideshow. Any number of images can be added here:

<div id="myslideshow">
        <img src="images/IMG_0350.jpg" width="600" height="450" />
        <img src="images/IMG_0351.jpg" width="600" height="450" />
        <img src="images/IMG_0352.jpg" width="600" height="450" />
        <img src="images/IMG_0353.jpg" width="600" height="450" />
        <img src="images/IMG_0354.jpg" width="600" height="450" />
</div>

This slideshow uses several Prototype and script.aculo.us functions. It uses two basic combination effects, Fade and Appear. Other functions:

$document.observe() keeps the functions from starting until the page has loaded. For instance, if the images haven’t been quite loaded and the scripts start to run, things could go wrong or nothing could happen at all.

document.observe('dom:loaded', function () {
    //place scripts here
});

$(’element’).childElements() allows us to grab all the items nested inside of an object on the page. In this case we want to grab all the images that are in the “myslideshow” div to use in the slideshow. The items are then stored in an array which we called “slide”.

slide =  $('myslideshow').childElements();

afterFinish is used in the appear function in several places. It allows us to call a function after the current slide has faded in. In the SlideShow function notice that in the appear function for afterFinish we actually call the function itself–SlideShow refers to itself. This is what’s called a recursive function. This causes the slideshow to loop.

$( slide[i] ).appear({ duration:5, afterFinish: function () { SlideShow(); } });

• Download Slideshow Files (.zip)

Some interestingness that I encountered today:

• Chris Lea from Media Temple pitched NGINX. Apparently, it blows away Apache in performance.  Whereas Apache uses forking, NGINX is asynchronous.
• Joseph Scott pitched the Open Source WordPress iPhone App.
• Sam Bauers on maintaining WordPress using SVN. You can now move the content directory outside of the WordPress directory. Symlink to plugins that you want SVN to maintain, like Akismet.
• Noel Jackson used the Rule of Thirds, PHP, and JavaScript to get colors from photos in a blog to create a monochromatic theme, Monotone.

Also got a free t-shirt, lunch, and tons of coffee!

Lunch!

Sea of computers. Are there more computers than people in this picture? Taken at the beginning of Matt Mullenweg's talk

Southern Exposure’s granting program Alternative Exposure released its grantees website this month. I worked with Southern Exposure to create the look and feel based on printed materials, brochures, and a set of logos.  I built the site using WordPress for content management and user account management. Grantees can login and update their project pages, post an image, and post events. The site will also auto-archive the list of grantees each year as their granting program progresses.

Southern Exposure is a nonprofit art exhibition space in San Francisco.

• Alternative Exposure website - http://www.soex.org/alternativeexposure

Strange Weather is on view at Eyebeam (http://www.eyebeam.org) in New York City.

http://www.strangeweatherproject.net

Downloads:

• Web Design Bootcamp Presentation (PDF, 1MB)
• Web Design Bootcamp Project Files (.zip 2.2MB)

Also, links to sites that were referred to in this class:

• http://del.icio.us/chiliberto/webdesign+workshop

Best of luck to you in your future Web Design projects!

Title: Portrait (Overworked)
Ink on Arches paper, 2008, Gilbert Guerrero.

Receiver Gallery:
1415 Valencia St. @ 25th St http://receivergallery.com/

Preview & Silent Auction
Wed-Friday, January 23-25
10 am-6 pm, free

Reception & Auction Closing Party
Saturday, January 26, 2008
7 - 10pm (auction concludes at 8:30 pm)
$10 admission (may be applied towards a purchase); Admission is free for Members.

More info: http://www.atasite.org/calendar/?x=2741

• About the Eco-Vis Challenge 
• Winners Announced