Search in book...
Toggle Font Controls
Create new playlist

Name your new playlist

Playlist description (optional)
Sign In

Email address

Password

Forgot Password?

or

Continue with Facebook

Continue with Google
Sign Up

Full Name

Email address

Confirm Email Address

Password

or

Continue with Facebook

Continue with Google

Time for action — building a CrossSlide slideshow

Follow these steps to set up a CrossSlide slideshow:

To get started, we'll set up a simple HTML document and associated files and folders just like we did in Chapter 1, Designer, Meet jQuery. The body of the HTML document will contain a container for your slideshow. Inside the container, place any content you'd like to display for users with JavaScript disabled.
```
<div id="slideshow">
<img src="images/600/AguaAzul.jpg" alt="Agua Azul"/>
</div>
```
I'm going to simply show the first photo from the slideshow for users with JavaScript disabled. I've given my container <div> an id of slideshow.
Open styles.css and add some CSS to define the width and height of the slideshow:
```
#slideshow { width:600px;height:400px; }
```
Next, head over to http://tobia.github.com/CrossSlide/ to get the downloads and documentation for the CrossSlide plugin.
You'll find the Download minified link near the top of the page. The rest of the page shows several examples of the CrossSlide plugin in action. Take a look through the examples. You'll see that it can do everything from a simple crossfade slideshow similar to what we built in the first section of this chapter to a fully animated panning and zooming slideshow.
Now that you've had a look at some of the types of slideshows you can create with the CrossSlide plugin, here are a few things to keep in mind:
- First, because of the rendering limitations of some browsers (namely, Internet Explorer), zooming in and out on photos can affect the quality of the photo display. The plugin's author recommends keeping the zoom factor at or below 1 to minimize this effect.
- Second, because browsers are limited to rendering full pixels, the panning and zooming animation effects might be a bit less smooth than you'd like, particularly for diagonal animations. You can minimize the 1-pixel jumping effect by minimizing or avoiding diagonal animation or by choosing a relatively high speed for the animations, which helps them appear smoother.
- Finally, the animations can be a bit CPU-intensive, particularly when using the panning, zooming, and crossfading animations simultaneously, as we'll do in this example. It's nothing that should trip up most newer computers, but depending on your site's audience, you might want to avoid using all possible animation effects at once. At the end of this tutorial, I'll show you how to avoid the most CPU-intensive part of the slideshow if it's causing problems on your own or your site visitor's computers.
When you click the Download minified link, the plugin script itself will open in a browser window, just as jQuery itself does. Just right-click on the page or select File | Save Page As from the browser's menu bar to save the file to your own computer. Keep the file name, jquery.cross-slide.min.js and save the file in your scripts folder.

Next, we just have to include the CrossSlide plugin file at the bottom of our HTML page, between jQuery and scripts.js:

<script src="scripts/jquery.js"></script>
<script src="scripts/jquery.cross-slide.min.js"></script>
<script src="scripts/scripts.js"></script>
</body>
</html>

Next, open your scripts.js file and we'll get started with the CrossSlide plugin by selecting our slideshow container and calling the crossSlide() method:
```
var slideshow = $('#slideshow'),
slideshow.crossSlide();
```
Recall that a variable is just a container for something. In this case, we've selected the slideshow container and placed it in a variable called slideshow. We've done this because we're going to reference the container several times in our script. By saving the slideshow container in a variable, we're preventing jQuery from having to query the DOM looking for the slideshow container each time we want to refer to it, making our code more efficient.
At this point, if you load the page in a browser, you'll see that calling the crossSlide() method appears to have had no effect on our page. You'll still see the placeholder content inside our slideshow container and there's no slideshow happening. That's because we have to pass not only settings to the crossSlide() method, but also the list of photos we'd like to show in our slideshow. Inside the crossSlide() method's parentheses, insert a pair of curly brackets and we'll pass in a key/value pair to configure the length of time the fade between photos will take in seconds:
```
var slideshow = $('#slideshow'),
slideshow.crossSlide({
fade: 1
});
```
Note
Note that we're expressing the length of time in seconds, not milliseconds. The CrossSlide plugin is set up to expect seconds as units of time rather than the milliseconds that we usually find in JavaScript.
Next, after our configuration settings, we want to pass an array of photos to the crossSlide() method. An array is wrapped in square brackets:
```
slideshow.crossSlide({
fade: 1
}, [
//Our list of photos will go here.
]
);
```
Each photo will have its own set of key/value pairs describing the URL of the image, the caption, and so on. Each photo will be wrapped in its own set of curly brackets. We'll get started with the URL of the photo which is described in the src key:
```
slideshow.crossSlide({
fade: 1
}, [
{
src: 'images/1000/AguaAzul.jpg'
}
]
);
```

Next, we'll add the caption for the photo as another key/value pair:

slideshow.crossSlide({
fade: 1
}, [
{
src: 'images/1000/AguaAzul.jpg',
alt: 'Agua Azul, Mexico'
}
]
);

Now, we have to add two key/value pairs to describe the starting and ending points of the panning and zooming animation. Let's say we want to pan across this photo from the top left to the bottom right while zooming in. Here are the values we'll pass the from and to keys:
```
slideshow.crossSlide({
fade: 1
}, [
{
src: 'images/1000/AguaAzul.jpg',
alt: 'Agua Azul, Mexico',
from: 'top left 1x',
to: 'bottom right .8x'
}
]
);
```

Finally, we want to specify how long the animation should take in seconds. I'll show this photo animation for four seconds:

slideshow.crossSlide({
fade: 1
}, [
{
src: 'images/1000/AguaAzul.jpg',
alt: 'Agua Azul, Mexico',
from: 'top left 1x',
to: 'bottom right .8x',
time: 4
}
]
);

That's one photo for our slideshow. To add more, simply add another set of key/value pairs inside curly brackets. Don't forget to separate each photo from the previous photo with a comma. Remember not to put a comma after the last photo in the list. Here's my example with three more photos added:
```
slideshow.crossSlide({
fade: 1
}, [
{
src: 'images/1000/AguaAzul.jpg',
alt: 'Agua Azul, Mexico',
from: 'top left 1x',
to: 'bottom right .8x',
time: 4
},
{
src: 'images/1000/BurneyFalls.jpg',
alt: 'Burney Falls, California, USA',
from: 'top left 1.2x',
to: 'bottom right .8x',
time: 5
},
{
src: 'images/1000/Cachoeira_do_Pacheco.jpg',
alt: 'Cachoeira do Pacheco, Venezuela',
from: '50% 0% 1.2x',
to: '50% 60% .6x',
time: 4
},
{
src: 'images/1000/Deer_Leap_Falls.jpg',
alt: 'Deer Leep Falls, Pennsylvania, USA',
from: '50% 50% 1.2x',
to: '50% 100% .8x',
time: 3
}
]
);
```
Note
Note that I can choose how long each photo displays — allowing a particularly stunning photo to linger on the page longer if I choose, or moving a smaller or less interesting photo off the page more quickly.
Now if you refresh the page in the browser, you'll see a panning and zooming slideshow of your photos. We're getting closer!
Next, we'll use that caption value we passed into the crossSlide() method for each photo to create a caption. First, I'm going to go back to my HTML markup and add a container for the caption. You can style this with CSS however you'd like:
```
<div id="slideshow">
<img src="images/600/AguaAzul.jpg" alt="Agua Azul"/>
</div>
<div class="caption"></div>
```
Keep in mind that the container for your caption has to appear outside of the slideshow container. If you place it inside, it will be removed when the CrossSlide plugin replaces the slideshow container's content with the slideshow.
Now, we've got a place to display our caption, so we just need a way to put our captions into that container. The crossSlide() method will accept a callback method along with our settings and array of images. This callback function will be called each time an image starts to crossfade into the next image, and it is called again when the fade is complete.
```
slideshow.crossSlide({
fade: 1
}, [
{
src: 'images/1000/AguaAzul.jpg',
alt: 'Agua Azul, Mexico',
from: 'top left 1x',
to: 'bottom right .8x',
time: 4
},
{
src: 'images/1000/BurneyFalls.jpg',
alt: 'Burney Falls, California, USA',
from: 'top left 1.2x',
to: 'bottom right .8x',
time: 4
},
{
src: 'images/1000/Cachoeira_do_Pacheco.jpg',
alt: 'Cachoeira do Pacheco, Venezuela',
from: '50% 0% 1.2x',
to: '50% 60% .6x',
time: 4
},
{
src: 'images/1000/Deer_Leap_Falls.jpg',
alt: 'Deer Leep Falls, Pennsylvania, USA',
from: '50% 50% 1.2x',
to: '50% 100% .8x',
time: 3
}
], function(index, img, indexOut, imgOut) {
//our callback function goes here
}
);
```
Our callback function is passed four possible values: the index of the current image, the current image itself, the index of the previous image, and the previous image itself. The index of the image is simply its place in the slideshow by number. JavaScript, like other programming languages, starts counting at 0 instead of 1. So the index of the first image in the slideshow is 0, the second image's index is 1, and so on.
Remember I said the callback function is called once when the crossfade starts and once again after the crossfade is finished? If the crossfade is starting, the callback function will get all four values—the index of and the current image, and the index of and the previous image. If the crossfade is finished, we'll only get two values: the index of the current image and the current image itself.
We'll check to see if the crossfade is starting or finishing. If the crossfade is finished, then we'll want to show the caption for the new photo. If the crossfade is just starting, then we'll hide the caption for what will very soon be the previous image:
```
], function(index, img, indexOut, imgOut) {
var caption = $('div.caption'),
if (indexOut == undefined) {
caption.text(img.alt).fadeIn();
} else {
caption.fadeOut();
}
}
```
If the crossfade is finished, then indexOut will be undefined, since there won't be a value for that variable passed to the callback function. It's easy to check if that value is undefined to figure out if the crossfade animation is starting or finishing. Then, we use jQuery's text() method to set the text of the caption to the alt value we included with each image and fade the caption in. If the crossfade animation is just starting on the other hand, we'll just fade the caption out.
Now if you refresh the page in the browser, you'll see that the caption fades in with each photo and fades out as the crossfade is starting. It's a nice smooth transition from one caption to the next.
This last step is optional. If you find that the CrossSlide plugin with all animations running at once, as we've set up in this example, is too CPU-intensive for your computer or the computers of your site visitors, there's a simple configuration option that will allow you to skip the most CPU-intensive part of the slideshow — namely, when two photos are crossfading while panning and zooming. All you have to do is pass another key/value pair to the configuration options setting variant to true:
```
slideshow.crossSlide({
fade: 1,
variant: true
}, [
{
src: 'images/1000/AguaAzul.jpg',
...
```
This will change your slideshow so that each photo will complete panning and zooming before starting the crossfade to the next photo.

What just happened?

Don't be worried if your head is spinning — the CrossSlide plugin is by far the most developer-y plugin we've used yet. Although this plugin isn't super designer-friendly, I hope you can see that even this type of plugin is within your reach if you have a little patience and are willing to experiment a bit. Carefully studying the code for examples will take you pretty far.

We set up a container which held our static content for users with JavaScript disabled. Then we set up the CrossSlide plugin to replace that content with a dynamic panning and zooming slideshow for the users with JavaScript enabled. We set the length of the crossfade to 1 second, and then passed in our array of images, including the URL, caption, animation starting point, animation ending point, and duration for each image. Finally, we took advantage of the callback function provided by the CrossSlide plugin to fade in each photo's caption and fade it back out when the photo itself starts to fade out. We also took a look at how to make the slideshow a bit less CPU-intensive for those situations where it might cause problems.

..................Content has been hidden....................

You can't read the all page of ebook, please click here login for view all page.

Table of Contents for Time for action — building a CrossSlide slideshow

Create new playlist

Sign In

Sign Up

Time for action — building a CrossSlide slideshow

Note

Note

Table of Contents for
Time for action — building a CrossSlide slideshow