Slideshow effects with jQuery

19 Mask setup 1

We’ve got a few changes to make to XHTML/CSS before we continue. First, we need to set up styles for the transition blocks (each square in our mask). They should be floated left, the same colour as your frame background and you can choose the width and height as long as they will fit exactly over the images.

20 Mask setup 2
Next, we need change the transition container to be position absolute at 0, 0 and the same width and height as the photos. Then in the markup, we need put it on top of the photos. The photos should also be changed back to their original style from example one. The full code for this step can be found in the project files.

#transition-container
{
height:450px;
width:600px;
/* position it */
position:absolute;
top:0px;
left:0px;
}
.photo
{
position:absolute;
top:0px;
left:0px;

21 Initialise blocks
You’ll notice that, once again, our code looks pretty similar to previous examples. Let’s go over the differences. First, in the DOM ready event listener you will notice a loop that creates and adds several divs to the transition container. The number of divs to add is calculated by figuring out how many will fit based on their size.

// init block mask

for(var i = 0; i < 30; i++) // 108 is the number of blocks
(50×50 blocks 12 wide, 9 high)

{

arrTransBlocks[i] = ‘#transition-block-’ + i;

$(‘#transition-container’).append(‘<div id=”transition-
block-’ + i + ‘” class=”transition-block”></div>’);

}

22 Randomise and fade
Now that we’ve added a bunch of sequential divs, we need to randomise them and fade them in or out in one after another. We do this with a function to randomise our array of blocks and recursive functions to fade the blocks in one after another. These recursive functions recall themselves if the number of blocks faded is less than the number of blocks, essentially creating a loop. The full code for this step can be found in the project files.

function executeTransIn(num, speed)
{
if(num < arrTransBlocks.length)
{
$(arrTransBlocks[num]).animate({opacity:0}, speed,
‘linear’, function() {
executeTransIn(num + 1, speed);
});
} else {
transLock = false;
}
}

23 Test/Preview
The way the buttons and everything else works is all pretty much the same in this example. They set the selected photo, call executeTransOut() which recurses until each block is faded in then calls executeTransIn(). From here, why not experiment with different masks?

Pages: 1 2 3 4 5