CSS – Page 3 – computeraxe

jQuery Cycle Plugin Working with Links

The Cycle plugin for use with the jQuery library can be described as a robust, mature and versatile JavaScript plugin. Plentiful options allow every aspect of a slideshow created with Cycle to be modified.

For interactive slideshows where you’d like the user to be able to click on a slide to get more information, wrap an anchor around each slide. Then, when the user clicks on a slide they will be shown the target link. You could show the user a larger image, an expanded view of a portion of the image, or more descriptive text about the slide.

The markup is straightforward, using an unordered list of links:

[plain]

[/plain]

Transition Effects Problem

Wrapping anchors around each slide makes them clickable, but that introduces a potential problem when using the Cycle plugin. Some of the transition effects just won’t work as expected. In this example the children that will be manipulated inside the #show container are the anchor links, not the images. Even though we know it’s supposed to be the images that are to be swapped in and out of this slideshow, technically, the children that will be swapped are the anchors, and that makes a difference in how things will look. Images are contained inside the anchors, so the images won’t be manipulated, just the anchors.

Most of the available transition effects modify the size of the slide’s width and/or height to achieve the desired effect. When an anchor is wrapped around an image, the anchor’s size can be manipulated, but the contained image won’t be resized. If one of the transitions that manipulate the slide width or height has been called, the effect won’t be seen as intended.

For example, the two slideshows below use the same HTML markup, except for having different container ids, which are targeted by the script and the CSS. Images are wrapped by <a> in both the left and right slideshows below.

Here’s the HTML Markup for the example slideshows below:

[plain]

[/plain]

Using one of the turn effects illustrates how the different children behave. The slideshow on the left is manipulating anchors, while a slight change in the script allows the slideshow on the right to manipulate the images. Both slideshows below use the turnDown transition effect.

Watch each slide transition and you’ll see that the one on the left doesn’t show any turning behavior as the top slide is dragged off the lower slide. In the slideshow on the right the turnDown effect can be seen as the images are manipulated in a way to make it look like the next image is being turned down from above.

This phenomenon happens using the jQuery Cycle plugin when an anchor, <div>, or any other tag wraps around the images, in effect taking their place as children of the slideshow container.

slideExpr Solution

One solution is to use the slideExpr option. The default value for slideExpr is ‘NULL‘ which indicates that the default children will be manipulated as the slides, as in the slideshow on the left.

[crayon]
$(‘#showleft’).cycle({
fx: ‘turnDown’,
speed: 700,
timeout: 2000
});

$(‘#showright’).cycle({
fx: ‘turnDown’,
speed: 700,
timeout: 2000,
slideExpr: ‘img’
});
[/crayon]

The slideshow on the right, #showright, has specified the option slideExpr: ‘img’ to assure that the <img> should be treated as slides, see line 11. By specifying which element should be treated as the children of the slideshow container, the transition fx can be seen as intended.

Slideshows can use any content for slides, so remember that extra elements in the slideshow container will be treated as slides. Inspect the HTML markup above and take note of the blank paragraph in each slideshow container. The default slideshow on the left, #showleft, assumes that the <p> is a child that is part of the slideshow, so it shows a blank paragraph after the last slide. Only images are slides in the slideshow #showright, so its behavior is to wrap around to the first <img>, instead of showing the blank paragraph as the last slide.

fx Solution

Another way to avoid the transition effect problem is to stick with the slide transitions that aren’t affected when using wrappers around slides. When the design requires wrapping slides in anchors or divs, pick from the subset of transition effects that doesn’t modify the image size. To see the true effects use fade, scrollUp, scrollDown, scrollLeft, scrollRight, and shuffle for slide transitions.

Note: The blank spaces between each slide in #showleft are due to the way that WordPress assembles a webpage or post. Use slideExpr with WordPress to avoid having WordPress-injected elements acting as slides in slideshows with the jQuery Cycle plugin.

Centering Slideshows with jQuery Cycle Plugin

The jQuery Cycle plugin is a JavaScript plugin that will help you make beautiful slideshows. There are a ton of options for the Cycle plugin to help you make really nice-looking and functional slideshows.

This example will show the steps to take for centering slides in a slideshow using the Cycle plugin. HTML markup in this case is a group of images inside a <div> container. CSS is used to give some style to our slideshow and for centering everything. JavaScript is used to control the transitions of the slides and the animation of the slideshow.

HTML Markup:

[plain]

[/plain]

A basic slideshow might have a few images that are cycled through in sequential fashion with random special effects that bring each photo into view. The JavaScript code that could be used with the jQuery Cycle plugin for such a slideshow could be as follows:

JavaScript:
[plain]
jQuery(document).ready(function($) {
$(‘#showy’).cycle({
fx: ‘all’,
speed: 800,
pause: 2000,
slideExpr: ‘img’
});
});
[/plain]

So far, we’d get a mess if no CSS rules targeted the slideshow.

Without at least giving dimensions to the slideshow, via width and height properties, the Cycle plugin will be helpless to show the images correctly. Make sure to add width and height values to the slideshow container in the CSS rules.

Also, you’ll need to specify the position property. In this case we’re giving a value of ‘relative’ instead of ‘absolute’ for the position property as we want to center the slideshow instead of placing it at some exact location. Without specifying the position of the slideshow container, some of the transition effects won’t be seen as intended.

The trick to centering the slideshow is to set the margins. Give the right and left margins a string value of ‘auto’ to center things horizontally. The top and bottom margins are given a numerical value, 10 px in this case.

CSS:
[plain]
#showy {
position:relative;
height:300px;
width: 300px;
margin: 10px auto;
}
[/plain]

Using these simple CSS styling rules, we get a more pleasing slideshow experience.

Twenty Ten Child Theme Mods

Creating WordPress child themes is a slick way to make your own theme. All it takes are a few easy steps. Here’s an example using the standard Twenty Ten theme as the parent theme:

modify the child-stylesheet to make things look how you want
create child-directory for new child theme
add template files to child-directory, if you wish
upload child-directory to /wp-content/themes/
activate new child theme

The child-stylesheet must be saved with the name “style.css” in the child-directory. The child-stylesheet header (which has to be at the top of the sheet) must contain a few lines that identify its parent theme, like so:

/*
Theme Name:     Twenty Ten Child
Description:    Child theme for the Twenty Ten theme
Author:         Your name here
Template:       twentyten
Version:        0.1.0
*/

@import url("../twentyten/style.css");

{put new style rules here}

You can add a line for the Theme URI: and Author URI:, if you like. Only the Theme Name: and Template: lines are required, the others are optional.

The @import rule indicates the directory of the parent theme and the location of the stylesheet. All you have to do is put in the new css rules below the import line.

That’s it!

If modifying the stylesheet doesn’t quite get all the changes you want, realize that you can add any template file to the child-directory and that will over-ride the parent file with the same name. For example, say you want to stick in a block for an advertisement right under the header image. Copy header.php and add a new <div> at the bottom of the page just below <div id=”main”> and stick the ad code in this division. Upload this new header.php into the child-directory and it will replace the one from the parent template.

Activate your new child theme and see how it looks!

Comment, comment, comment…but which comment code goes where?

Commented code is worth its weight in gold when it comes time to decipher it. Unfortunately, the codes for commenting in xhtml, css and php are not all the same. So, for reference sake here are the comment codes you’ll need and where to use them.

Where xxx is your comment, for

xhtml (html) and php (outside php code) use 
css use /* xxx */
php (inside php code or between <?php and ?>) use // xxx
multi-line comments inside php use /* xxx */

Comments are very helpful in troubleshooting style changes. When creating your designs take a few seconds to jot down a comment here and there.

Great uses of comments include labeling the starting and ending location of id- or class-identified divs, putting temporary holds on features that may or may not be needed in the final design — often called commenting out code, sectioning long stylesheets into more easily readable forms, and specifying the author or location of the code.