Slideshow transitions with JavaScript using jQuery

jQuery is empowering JavaScript developers to do more than ever before. Used effectively, it can take your photo slideshows to the next level

Let’s face it, JavaScript is making a huge comeback lately as developers find more ways to use it effectively for motion and effects. And the introduction of new frameworks for JavaScript, like jQuery (http://www.jquery.com), allows you to build rock-solid, cross-browser solutions that look and work every bit as good as Flash.
In this tutorial we are going to give a quick introduction to jQuery and present three different examples of transitions you can add to your next photo slideshow. We’ll start easy with a fade transition, work through an intermediate slide transition and end with an advanced ‘mask-type’ transition (‘mask-type’ because we are faking a mask as there are no real masking abilities in JavaScript yet). When you’re done here, you will clearly see the benefits of using a framework like jQuery for JavaScript, and should have a pretty solid grasp on what you can do in terms of some simple animation. Let’s get started…

Project files for this tutorial can be downloaded here.
This article was originally authored by Matt Wiggins, and featured within Web Designer issue 165

01 You’ll need jQuery

The first step is to download jQuery, a framework built to simplify and speed up JavaScript development. If you’re new to jQuery, you may want to take a minute and go through the basic tutorial. The latest version can be found at the website (http://www.jquery.com) and it’s worth visiting to make sure you have the very latest version.

02 Setup folder/images

Set up a folder structure for your project. We kept it simple and created an XHTML file for each example, a folder for our photos, and included jQuery in the root folder of the project. When your folders are set up, choose a set of photos and re-size them so that they are all the same size.

03 XHTML

We will use a simple XHTML structure that includes the same elements across each example. You will need a main wrapper to add some padding, a frame for the photos that hides overflow and adds a border around the images, next/previous buttons and a transition container that will hold the images/mask. As with many of these steps, the full code can be found in the project files.

<div id=”wrapper”>
<div id=”frame”>
<!– photos –>
<div id=”transition-container”>
<img class=”photo” id=”photo-1” src=”images/photo-
1.jpg” alt=”photo one” />
<img class=”photo” id=”photo-2” src=”images/photo-
2.jpg” alt=”photo two” />
<img class=”photo” id=”photo-3” src=”images/photo-
3.jpg” alt=”photo three” />
<img class=”photo” id=”photo-4” src=”images/photo-
4.jpg” alt=”photo four” />
<img class=”photo” id=”photo-5” src=”images/photo-

The Spry Tabbed Panels widget eliminates the need to code. Here we demonstrate how to change the tab orientation and style with CSS

The beauty of multi-tabbed windows is that designers can cram lots of information into a single space. However, creating such an element involves coding. A frightening thought for non-developers, but Dreamweaver eases the burden with the assistance of its Spry Tabbed Panels widget.
The Tabbed Panels widget provides all the necessary assets, JavaScript, HTML and CSS, needed to add tabbed elements into a page. The initial set up is basic, it provides a simple, horizontal, set of tabbed panels with minimal styling.
The accompanying CSS file includes a set of classes that instantly set the orientation of the tabs from horizontal to vertical. This provides the basis of a vertical tabbed panel. To take the widget beyond its standard state the CSS can be modified to change background colours, hover states, fonts and add new content. This tutorial is going to demonstrate how to create the vertical tabs, restyle, add background images and integrate related content to create a much more stylised widget.

(This tutorial orginally appeared in Web Designer issue 163, authored by Steve Jenkins)

01 New class

The Spry Tabbed Panels code needs to be added. Place the cursor and head to the Insert menu and select Spry>Spry Tabbed Panels and save. The first line in the HTML code contains the div id and class. Change the class from <div id=”TabbedPanels1” class=”TabbedPanels”> to <div id=”TabbedPanels1” class=”VTabbedPanels”> and save.

02 More tabs

Place the cursor over the current tabs to reveal the blue Spry Tabbed Panels tag and click. The Properties window will revert to Tabbed Panels. Click ‘+’ to add another tab, repeat for each tab. Use the up and down arrows to reposition the currently selected tab. Now select the default tab from the Default panel drop-down list.

03 Change orientation

The tabs are still effectively normal tabs placed to the left of the content. To create vertical tabs, first double-click .VTabbedPanels .TabbedPanelsTab in the CSS panel and select Box. Now add a height and width, ie 25 pixels wide by 325 pixels high and set Float to left so they sit side-by-side.

The latest release of the Adobe Spry framework allows designers to create dynamic content the easy way. Here we demonstrate how to create a dynamic image viewer

The introduction of the Spry framework into Dreamweaver has brought a whole new level of dynamic possibilities for web designers. The framework is essentially a collection of assets that includes JavaScript files, CSS examples, effects, widgets and much more which can be integrated into static HTML pages.
This tutorial looks at introducing a couple of JavaScript files, xpath.js and SpryData.js, into the head of a page. These provide all the necessary JavaScript code already tried and tested, eliminating the need for designers to write long streams of code. Alongside this, we will show you how to add a data source, in this case an XML file, and use a number of Spry elements to pull information from the data source.
This tutorial is based on two div tags, one to contain the thumbnail images and the other to contain a full-size version of the chosen thumbnail. We will also give some tips on how to style and position the thumbnails and integrate into a standard static HTML page.

This tutorial originally appeared in Web Designer issue 154, authored by Steve Jenkins

01 Get ready

Before indulging in any Dreamweaver activity users will need to download the Spry framework for Ajax and create an XML file containing the image information relating to the thumbnails and full-size images needed for the gallery. The latest version of the Spry framework can be found via the Adobe Labs page at http://labs.adobe.com/technologies/spry/. Download the framework – the file is a zipped file – unzip and place the folder in an easy to access location, ie on the desktop, for the time being. We shall come back to the Spry framework folder later in the tutorial.

02 Images

The images to be used in the gallery come in two forms, thumbnail and full-size image. The thumbnails will appear in a separate absolutely positioned div tag and when clicked will display the full-size image in another absolutely positioned div tag. For the purpose of this tutorial all full images are going to be cropped and resized so that they all have the same dimensions. This is not essential, but will give the gallery a uniform look. To complete the image line-up open the image editor of choice and resize all images to the desired dimension. Now return to the newly resized images and create the thumbnails. The full-size images can be simply resized, ie 90 x 90 pixels, to fit the thumbnail gallery, But if the images are a different perspective they will look stretched. Alternatively, the thumbnails do not need to be square. They can retain the same shape as the full-size images. For this tutorial we have made the full-size images 437 pixels x 261 pixels and the thumbnails 135 x 135 pixels. Save the full images into a folder called images and save the thumbnails into a folder called thumbnails.

THE SEARCH BAR HAS BECOME A FIXTURE OF MODERN WEB DESIGN. LEARN HOW TO MAKE YOURS STAND OUT USING AJAX AND JQUERY’S EFFECTS

CREATING AN EFFECTIVE search bar can be tricky. There are lots of features that have become pretty widespread but are difficult to implement. We’re going to create a bar that
has it’s own custom button that integrates with the bar, slidedown live results from an AJAX script and a helper hint that vanishes when you come to use the search bar. As the basis
for our searching, we’re going to be using the MySQL World Database, a sample database provided by MySQL that contains information on cities and countries. We’re going to use this to
create an city search for a travel agent-style website.

Author: Andy Leon | Originally appeared in Issue 159 | Download Tutorial Files

01 Design and slice

In Photoshop, create your search box. We made a box with a single pixel border, inner and outer shadows. We then overlaid an icon of a magnifying glass that will be our button. We
then slice it into two images and save them as “search_box.png” and “search_button.png”.

02 Create the HTML doc
Open Dreamweaver and start a new HTML document. Make sure the encoding is set to UTF-8 so that the various extended characters that make up the names of foreign cities are
rendered correctly. Insert a <form>, with a <table> inside, and add two <div> tags with IDs “SearchBox” and “SearchButton”.

<html>
<head>
<meta http-equiv=”Content-Type” content=”text/html; charset=utf-8”>
</head>
<body>
<form action=”” method=”post”>
<table style=”margin: auto; width: 975px;”>
<tr>
<td>
<img src=”images/logo.png” />
</td>
<td width=”380”>
<div id=”SearchBox”>
<input id=”SearchInput” name=”SearchInput” value=”City Search” />
</div>
<div id=”SearchButton”>
<input type=”image” src=”images/search_button.png” />
</div>
</td>
</tr>
</table>

03 Style Divs
In the style section of your document, style the first <div> to show your search box image.
Set the “height” and “weight” attributes of both to match those of the images. Set the
“float” attribute to “left” so that they line up left-to-right. Add an <input> tag with type
“image” and the “src” attribute set to your button image.

#SearchBox {
background: url(‘images/search_box.png’);
float: left;
height: 60px;
width: 305px;
}
#SearchButton {
float: left;
height: 60px;
width: 70px;
}

04 Add an input box
Add an <input> tag inside the “SearchBox” <div> so that the user can enter the text they want to search for. Set the “name” and “id” attributes to “SearchInput” and the “value”
attribute to “City Search” – this will appear when the page loads so the user knows what the search box is for.

<div id=”SearchBox”>
<input id=”SearchInput” name=”SearchInput” value=”City Search” />
</div>

05 Style the input box
Now style “SearchInput” so that it blends in with the images. Set the “background” and “border” attributes to none so they don’t show. Increase the font size so it matches the size of the image and then adjust the margins to centre it. Set the “outline” property to “none” in order to get rid of that blue glow that some browsers add when you click into an input box. Finally, change the “color” attribute to a light grey so your “City Search” hint text doesn’t look like search text.

#SearchInput {
background: none;
border: none;
color: #999999;
font-size: 16px;
outline: none;
margin: 20px;
width: 280px;
}

06 Add search results
Add another row to the table and place a <div> tag in the cell underneath your search box to hold your search results. For the best browser compatibility, add another <div> inside
this one, which has the ID “SearchResults”. You can then style the inner div to float over the top of the rest of your content and use relative positioning on the outer div to bring it close to your search box.function repeater() {.

<tr>
<td></td>
<td>
<div style=”position: relative; left: 20px; top: -48px;”>
<div id=”SearchResults”></div>
</div>
</td>
</tr>

07 Style the search results
Style your “SearchResults” <div> by adding a “background” and “width” attribute. You need to set the “position” and “z-index” attributes so it floats above other content. Set the “overflow” attribute to “auto” so that it will expand to fit however many search results there are. Finally, set the “display” attribute to “none” so that it’s hidden when the page loads.

#SearchResults {
background: #000000;
display: none;
overflow: auto;
position: absolute;
width: 330px;
z-index: 99;
}

08 Focus
Now your structure’s in place, you can start adding some JavaScript, starting with the focus event, which fires when the user clicks or tabs into your search box. You only want to do
two things here – remove the “City Search” text if it’s there, and change the CSS “color” property so that the user is typing in black.

$(“#SearchInput”).focus(function() {
if($(“#SearchInput”).val() == “City Search”) {
$(“#SearchInput”).val(“”);
}
$(“#SearchInput”).css(“color”, “#000000”);
});

09 Blur
The opposite of focus is the blur event. In this function, check to see what the value of the “SearchInput” box is. If there’s nothing there, add the “City Search” text back in and change the CSS “color” property back to light grey. Finally, use jQuery’s slideUp() function to hide search results if they’re showing.

$(“#SearchInput”).blur(function() {
if($(“#SearchInput”).val() == “”) {
$(“#SearchInput”).val(“City Search”);
$(“#SearchInput”).css(“color”, “#999999”);
}
$(“#SearchResults”).slideUp();
});

10 Catching key presses
Your third function is attached to the keydown event and is used for trapping keyboard actions. Your event comes through as “e”, and you can use the “which” property to identify which key was pressed. Test the “which” property for the value 8 (corresponding) to the backspace key. If this is the case, trim one character off the end of the search text, for all other cases add the character corresponding to that key code. Then call our AJAX page through the load() function, putting the results in your SearchResults <div>. Then call the slideDown() function, to make sure your results are showing.

$(“#SearchInput”).keydown(function(e) {
if(e.which == {
SearchText = $(“#SearchInput”).val().substring(0, $(“#SearchInput”).val().length-1);
}
else {
SearchText = $(“#SearchInput”).val() + String.fromCharCode(e.which);
}
$(“#SearchResults”).load(“ajax.php”, { SearchInput: SearchText });
$(“#SearchResults”).slideDown();

11 Create our AJAX script
Create a new PHP document and save it as “ajax.php”. Call the necessary mysql_connect() and mysql_select_db() functions to get access to the database tables. Then check to make sure that you’ve got “SearchInput” in the $_POST array and put that in a variable called $SearchInput, converting it all to lowercase as you do so.

mysql_connect(‘127.0.0.1’, ‘root’, ‘password’);
mysql_select_db(‘world’);
if(isset($_POST[‘SearchInput’])) {
$SearchInput = strtolower($_POST[‘SearchInput’]);

12 Run the query
Use your $SearchInput variable to construct a query that searches through the database and brings you your results. In this query you’re using a descending sort on the Population field with a limit of ten. This way, when searching you’ll only get the ten biggest cities that match our search text.

$Cities = mysql_query(‘select * from City where Name like “%’.$SearchInput.’%” order by Population desc limit 10’);

13 Step through the results
Then use the mysql_fetch_assoc() function to step through the results and output them as <a> links, but there’s more to do inside this loop. You need to use utf8_encode() on the city name to cope with foreign characters. Also use str_replace to wrap each occurrence of your search text in a <span>, with the class “highlight”. Do this twice, the second time using the ucfirst() function to preserve any capital letters. Finally, add a comma and the country code to the end.

while($City = mysql_fetch_assoc($Cities)) {
$Name = utf8_encode($City[‘Name’]);
$Name = str_replace($SearchInput, ‘<span class=”highlight”>’.$SearchInput.’</span>’, $Name);
$Name = str_replace(ucfirst($SearchInput), ‘<span class=”highlight”>’.ucfirst($SearchInput).’</span>’, $Name);
$Name = $Name.’, ‘.$City[‘CountryCode’];
echo ‘<a href=””>’.$Name.’</a>’;

14 Add the highlighting
Finally, add some additional styling to your HTML page so that the “highlight” class is displayed in blue. This means that your search text shows up in your results. It’s up to you what to do with the search results once you’ve got them. Change the “action” attribute of the <form> to provide a search page or change the “href” attributes of the <a> tags in our “ajax. php” file.while($City = mysql_fetch_assoc($Cities)) {. The full code for this step can be found on the cover disc, titled step14code.txt. We’ve included a snippet below for reference.

#SearchResults a {
color: #FFFFFF;
display: block;

The BBC’s brilliant homepage redesign has created quite a stir in the web community. Now See how it was done!

The BBC’s homepage is a stunning example of first-class Web 2.0 design. As well as presenting an elegant look and feel, it allows users to customise their experience in a genuinely useful way. You can change the content to reflect your interests, the layout to suit your behaviour online and even the colour scheme to please your taste.
It looks complicated, but it’s actually quite easy to do. In this tutorial, we’ll show you exactly how to re-create the BBC’s homepage, using XML feeds from the BBC to provide content. Like the BBC, we will use the jQuery library and its many plug-ins to build a rich interface that allows users to customise the content. We’ll use cookies to remember the settings and layout so that when you return, everything’s where you left it. By the end of this tutorial you’ll know exactly how one of the most talked-about redesigns was done – and have a BBC-style homepage of your very own. Download the project assets here

01 Site definition

Define a new site in Dreamweaver with PHP MySQL enabled – this site requires PHP so the computer/server you build it on must have it available. Copy across the files from the starting_files directory on the CD to your home directory. Open the index.php and the CSS>styles.css files.

02 BBC feeds

We will use XML feeds from the BBC website to add content, added as draggable divs, with rollover images and links at the top and text feeds underneath. We need to create two XSLT documents to format these. Select File>New>XSLT (fragment) and save as ‘image_feeds.xsl’.

03 Image feeds

Select Attach a remote file on the internet, and enter the URL of the BBC News’s XML file: http://newsrss.bbc.co.uk/rss/newsonline_uk_edition/front_page/rss.xml. In Design view, follow rss>channel>item and drag ‘link’, ‘title’ and ‘thumbnail’ onto the canvas from the bindings pane.

04 Repeating images

We want to display multiple images in our panel, so we need to add an XSLT repeat region. In Design view, highlight all of the fields you just dragged onto the page. Then under the XSLT tab, select Repeat Region. Under Select node to repeat under, select item and click OK.

05 List of images

We need to format this data as a list of images. In Code view, enter ul tags outside of the xsl:for-each loop, and inside, add <li> tags with <img> and <a> tags inside them. Set the attributes of these to the values from the XML feed – see Helper Files>image_feeds_step_5.xsl on the CD.

06 First three images

In Code view, click inside <xsl:for-each select=”rss>channel>item”>, and select XSLT>Conditional Region. In the Property Inspector, select the lightning bolt and then Build filter. Click the plus button and enter position() in the where field, <= as the operator and three as the value.