An Image Slideshow Tutorial

Modern Web Design relies upon certain standards-based conventions in order to create dynamic websites When constructing these websites, content is separated from presentation in the HTML markup, and a combination of CSS and DOM manipulation is used to
Add the presentation layer including color, typography and background-images Add an effects layer including dynamic content and interactivity

Strips out presentational markup (including <font>, <b>, <i>, and other tags designed to change the appearance of the page) Includes a structural foundation comprised of <div> elements Applies CSS styles to foundational <div> elements using either class or id properties
Styles apply presentational attributes like colors and background-images Styles create a table-less layout using CSS Positioning .class properties can be used more than once on a page #id properties can only be used once on a page

Examine the HTML file first. Look for the <div> elements and take note of the id and class properties that have been applied
<div id=header>

Next look at the CSS for corresponding style definitions

#header {width:100%;}
This style declaration sets the width of the header to 100% of the containing element (another <div> or the viewport).

A <div> with an id=header can be declared only once.

The page.tpl.php file is the main template page it includes a <div> with a class=header. The header <div> includes four sub-div elements with class properties as defined below: .header

.head-row1 .head-row2

.head-row3 .head-row4

<div class="head-row2> <div class="main">

<object classid="clsid:D27CDB6E-AE6D-11cf96B8-444553540000 codebase="http://download.macromedia.c om/pub/shockwave/cabs/flash/swflash.cab #version=8,0,0,24" width="980 height="379> some content snipped </object>

</div> </div>

In order to remove the Flash Movie from the page:

Save page.tpl.php As page.tpl.php.bak to create a backup file Open page.tpl.php Scroll down to the <div class=head-row2> element Delete the entire <object> declaration. When youre finished you should have two <div> elements. The <div class=head-row2> element wraps around another <div> with a class=main

Flash object is gone!

Save your changes Open the site in your Browser You should see an empty <div> where the Flash movie used to appear It has a width=980px and a height=379px

Create 4 or 5 image files of type .jpg, .gif or .png The images should have the same dimensions as the Flash movie For now, just create simple images Plain rectangles that are exactly 980x379 that have different background colors (red, blue, green, etc.) Name the images rotate1, rotate2, rotate3, etc. Place the images in the sites/all/themes/theme347/images folder
width=980px, height=379px

Go back to your page.tpl.php file Inside the head-row2 and the .main <div> elements, create a new <div>. Give the <div> an id=photoShow Make sure you close the </div> Inside this div, create 3 empty <div> elements. These elements will wrap around the 3 image files you created in the previous step. For now, these <div> elements do not need to have an ID or CLASS applied

<div class="head-row2> <div class="main"> <div></div> <div></div> <div></div> <div></div> <div></div> </div> </div>

<div class="head-row2> <div class="main"> <div> <img src="http://localhost/Projects/drupal/sites/all/themes/theme347/i mages/rotate01.png" alt="Photo Gallery" width="980" height="379" class="gallery" /> </div> </div> </div>
you should have at least 3 of these Use your absolute URL Use your image file name

<style type="text/css"> #photoShow { height:379px; width:980px; } #photoShow div { position:absolute; z-index: -1; } #photoShow div.previous { z-index: 1; } #photoShow div.current { z-index: 2; } </style>

Most of the properties here are self-explanatory We are setting the size of the div to exactly 980x379 pixels But what is the zindex?

The z-index CSS property specifies the stack level of a box along the z-axis This is used to create layered effects The higher the z-index, the closer the object is to the person viewing the browser window The z-index is set to an integer value that can be positive, negative or zero

<style type="text/css"> #photoShow { height:379px; width:980px; } #photoShow div { position:absolute; z-index: -1; } #photoShow div.previous { z-index: 1; } #photoShow div.current { z-index: 2; } </style>

So, in our embedded styles, we are setting the z-index of all of the <div> elements inside the <div id=photoShow> equal to -1 Unless
The <div> has a class applied = current The <div> has a class applied = previous

<div class=current>

z
x

appears up front

<div class=previous>

appears immediately behind the .current <div> All other <div> elements are stacked behind the .current and .previous <div> elements

So, we have created the images that will appear in our slideshow and added them to the head-row2 <div> We created CSS style declarations to the page that will stack our pictures so that only one image is presented at the forefront in the browser Before we move on to the next step (adding jQuery that will rotate the images) we need to add class=current to the <div> that wraps around our first image

<div class="head-row2> <div class="main"> <div class=current> <img src="http://localhost/Projects/drupal/sites/all/themes/theme347/images/rotate01.png" alt="Photo Gallery" width="980" height="379" class="gallery" /> </div> <div> <img src="http://localhost/Projects/drupal/sites/all/themes/theme347/images/rotate02.png" alt="Photo Gallery" width="980" height="379" class="gallery" /> </div> <div> <img src="http://localhost/Projects/drupal/sites/all/themes/theme347/images/rotate03.png" alt="Photo Gallery" width="980" height="379" class="gallery" /> </div> <!-- You can add as many images to the slideshow as you want! --> </div> </div>

Save your changes Open your site in a browser. Now you should see the first image in the head-row2 section that you placed in the source code Next we need to add some JavaScript to create the slideshow effect Note: JavaScript needs to be added inside the <head> element of your page

In order to use jQuery in our Drupal Site, we need to prepare the environment Download the jQuery library from http://jQuery.com Create a folder to store our JavaScript file in the sites/all/themes/theme347 folder called js Place the jquery-1.3.2.js file in the js folder

First, we need to attach the jQuery library to our page. To do so, add the following code in the <head> section of your page.tpl.php file:

<script type="text/javascript" src="http://localhost/Projects/drupal/sites/all/themes/theme3 47/js/jquery-1.3.2.js"></script>

Here, we are using the development version of the library. Before deploying to a PROD environment, replace this file with the minified version For more information about the benefits of using minified javaScript, see: http://www.minifyjs.com/why-you-shouldminify-javascript/

jQuery is a JavaScript library It contains numerous functions designed to make cross-browser DOM programming easier The jQuery library makes it easy to:
Select, traverse and manipulate elements in an html document Add or modify styles to selected elements Apply effects to selected elements

Lets try a simple example. Add to the <head> section of your page.tpl.php file:
<script type="text/javascript"> $(function() { $("img").css("border", "1px solid black"); }); </script>

<script type="text/javascript"> $(function() { $("img").css("border", "1px solid black"); }); </script>

Created a jQuery Function that will execute when the DOM is ready for manipulation (this is shortcut syntax for calling document.ready) Selected all <img> tags in the document Applied a solid black border to all selected image tags that is 1px in width using CSS

<script type="text/javascript"> $(function() {

$("div.head-row2 img").css("border", "1px solid black"); $("div.head-row4 img").css("border", "3px solid #ff3139");

}); </script>

First, we specify that we only want to apply a solid black border to the images in the head-row2 div Next, we specify that we only want to apply a solid red border with a width of 3 pixels to the images in the head-row4 div

<script type="text/javascript"> $(function() { $("div.head-row2 img").css("border", "1px solid black"); $("div.head-row4 img").css("border", "3px solid #ff3139"); setInterval("rotateImages()", 3000); }); function rotateImages() { var oCurPhoto = $("#photoShow div.current"); var oNxtPhoto = $(oCurPhoto.next()); if (oNxtPhoto.length == 0) oNxtPhoto = $("#photoShow div:first"); oCurPhoto.removeClass('current').addClass('previous'); oNxtPhoto.css({opacity:0.0}).addClass('current').animate({opacity:1.0}, 1000, function() {oCurPhoto.removeClass('previous'); }); } </script>

function rotateImages() { var oCurPhoto = $("#photoShow div.current"); var oNxtPhoto = $(oCurPhoto.next()); if (oNxtPhoto.length == 0) oNxtPhoto = $("#photoShow div:first"); oCurPhoto.removeClass('current').addClass('previous'); oNxtPhoto.css({opacity:0.0}).addClass('current').animate({o pacity:1.0}, 1000, function() {oCurPhoto.removeClass('previous'); }); }

Okay, that worked?

No? Check Code for typos or missing data Yes? You rock.

But what happened to the Menu Bar?

Any guesses?

<script type="text/javascript"> $(function() {

$(".head-row3").css("z-index", "3");
$("div.head-row2 img").css("border", "1px solid black"); $("div.head-row4 img").css("border", "3px solid #ff3139"); setInterval("rotateImages()", 3000); });

function rotateImages() { var oCurPhoto = $("#photoShow div.current"); var oNxtPhoto = $(oCurPhoto.next()); if (oNxtPhoto.length == 0) oNxtPhoto = $("#photoShow div:first");
oCurPhoto.removeClass('current').addClass('previous'); oNxtPhoto.css({opacity:0.0}).addClass('current').animate({opacity:1.0}, 1000, function() {oCurPhoto.removeClass('previous'); }); } </script>

References:

A Few Good Books

http://reference.sitepoint.com/css http://www.w3schools.com/css/default.asp
The Ultimate CSS Reference Stylin with CSS: A Designers Guide, 2nd Ed. http://www.csszengarden.com http://www.alistapart.com/topics/code/css http://www.impressivewebs.com/css-opacityreference/

Inspiration & Education

About CSS Opacity

Online: http://jquery.com
Review Documentation Review Tutorials

A Good Book: jQuery Cookbook, 1st Edition An Old Standby: http://www.google.com

Search for jQuery + [what you want to do] You will come up with lots of tutorials on blogs and other sites in your search results