CSS – Page 2 – computeraxe

camelCase OK for jQuery

CamelCase refers to a method of combining words into compound words. Instead of using a hyphen to connect two words, camelCase removes the hyphen or space between the words and capitalizes the second word.

jQuery doesn’t mind if you use camelCase when specifying CSS properties, so ‘border-color’ means the same as ‘borderColor’.

The hyphenated property name should always be used in CSS stylesheets, for example, background-color.
[plain]
.photos
{
background-color: #fff;
color: #000;
}
[/plain]

In jQuery either the hyphenated background-color or camelCase backgroundColor could be used.
[plain]
$(document).ready(function() {
$(‘#b1’).animate({
height: ‘+=100px’,
backgroundColor: ‘#eee’,
color:’#2133aa’
}, 2000, ‘linear’);
});
[/plain]

Tips:

Single quote marks are needed if the hyphenated property is used, but the non-hyphenated camelCase doesn’t require single quotes around the property name.
The values for each property should be inside single quotes.

Which case you’ll use comes down to personal preference. I like to type fewer quotes and hyphens, so I tend to use camelCase where ever possible.

Polaroid Slideshows with jQuery Cycle Plugin

The Cycle plugin for jQuery has many options that can be modified to create stunning slideshows. The look and feel of the slideshows are controlled with CSS and the behavior or animation of the slides is controlled by JavaScript. The Cycle plugin requires jQuery v1.3.2 or later.

Polaroid Photos

Sometimes you want to have a little fun with a project, like when somebody brings a Polaroid camera to a party. Taking Polaroid snapshots became wildly popular in the 1970s because it was the only camera that would produce a hand-held photo on the fly. All the other cameras had film that you would need to finish taking pictures on, and then send in to a photo developer to expose the negatives and print the photos. Polaroid cameras were like the iPhones of the 70s, and due to that popularity everybody knew what a Polaroid was — an instant photo.

Polaroid photos looked a little different from photo developer developed photos. They were always glossy and of a different format than the typical 3 1/2 inch tall x 4 7/8 inch wide snapshot that you’d get from the photo shop. With or without a border, the images on photo shop developed prints were rectangular, not square.

Polaroid cameras are still around today and their photos measure 3.5 inches wide by 4.25 inches tall. A white border around the image measures approximately 0.25 inch at the top, 0.1875 inch on the sides, and 0.875 inch at the bottom. The bottom border is larger so that you can write a caption there. Subtracting the size of the borders from the overall dimensions leaves 3.125 inches for the inner width and 3.125 inches for the inner height of the photographic image. Thus, Polaroid images are square instead of the standard rectangular format common in other photos.

Styling the Polaroid Photo

We can use CSS to make our images look like Polaroids. Introduce a dark, thin border and some padding for each image. In this case we’ll target the slides with the class .polaroid. Note that the container size may have to be enlarged to accommodate the padding and border from both sides of the image. This is especially important when all the images are not of the same dimensions.

CSS:

[plain]
#slide_polaroid {
margin:10px;
z-index:3;
}
#write_caption {
position:relative;
top:-40px;
left:100px;
z-index:4;
}
.polaroid img {
padding:18px 14px 33px 14px;
}
.polaroid {
width:200px;
height:200px;
background-color:#fcfcfc;
color:#000;
padding:18px 14px 63px 14px;
border:1px solid #000;
position:relative;
}
[/plain]

The jQuery Cycle plugin is used to control the slideshow action. A function is called after each slide is shown on the screen to print the image alt text for the slideshow image captions.

JavaScript:

[crayon]
$(‘#slide_polaroid’).cycle({
fx: ‘fadeZoom’,
timeout: 2000,
slideExpr: ‘img’,
after: function() {
$(‘#write_caption’).html(this.alt);
}
});
[/crayon]

Output:

We’re getting close with the above, but a little better slideshow effect would be to bring the whole polaroid through the effect, not just the inner square image.

This brings up one of the nice features of using jQuery Cycle for slideshows: any content can be used for the slides. That means a <div> containing an image and textual content — such as a caption — could be identified as slides.

Polaroid Slideshow

For this example each image and caption is wrapped in a <div>, and Cycle is called like so:

HTML:
[plain]

Slide 1 caption.

Slide 2 caption.

Slide 3 caption.

Slide 4 caption.

[/plain]

JavaScript:
[crayon]
$(‘#slide_polaroids’).cycle({
fx: ‘shuffle’,
timeout: 3000,
delay: -2000,
slideExpr: ‘div’
});
[/crayon]

Output:

Slide 1 caption.

Slide 2 caption.

Slide 3 caption.

Slide 4 caption.

This slideshow hard codes captions in the HTML instead of displaying the image alt text dynamically. It just depends on the purpose of the slideshow and how many slides you have as to which approach you’ll use for captions.

Styling Double Mat Framed Prints

Give your slides the look of double matted, framed photos with a little CSS and a different special fx.

Here, the .frame class is set to “ridge” for the <div> and <img> border properties using slightly different colors to make a double matted picture frame look. Black and grey backgrounds and a small amount of padding serves as the mat boards for the illusion. The JavaScript Cycle fx parameter is set to “fade” for the slideshow.

Slideshow Image Captions with jQuery Cycle

If a picture is worth a thousand words, a photo slideshow would be worth a whole book. Images can be interpreted in many ways and without some accompanying text or captions for the images in a slide show, you force the visitor to draw their own conclusions about what they are viewing. In the art world this may be ok and perhaps what you’re striving for, but most of the time we want to provide additional information with images so the visitor really knows what the imagery is all about.

Some images are fairly meaningless without captions. Were those pictures taken before or after the event? And is that really Aunt Tillie as a hip youngster?! You get the idea…captions help us to tell our stories. They can be as short and sweet as you like or more explanatory in nature. It just depends on your purpose as to what kinds of captions your visitors would benefit from.

Presented here are three examples for producing image captions in slideshows with jQuery Cycle.

To make an image caption for jQuery Cycle slideshows, the examples that follow depend on passing selectors, like this.alt, to the .html() method to pick up the alt text from each <img>. Also, we’re going to use Cycle’s after and before options to specify our image captions.

Example 1: Use Cycle’s after option to specify a caption using the image’s alt text. Caption will appear after the slide is in place.

[crayon]
$(‘#slide_after’).cycle({
fx: ‘shuffle’,
timeout: 2000,
slideExpr: ‘img’,
after: function() {
$(‘#caption’).html(this.alt);
}
});
[/crayon]

Here, the after option takes the result of an anonymous function as its value. The function() inserts the alt text from this, the current image, into #caption. In the HTML markup below notice that #caption identifies a paragraph below the images.

Example 1 HTML Markup:

[plain]

[/plain]

Example 1 Slideshow:

Example 2: Use Cycle’s before option to specify a caption using the image’s alt text. Caption will appear before the next slide.

[crayon]
$(‘#slide_before’).cycle({
fx: ‘shuffle’,
timeout: 2000,
slideExpr: ‘img’,
before: function() {
$(‘#caption2’).html(this.alt);
}
});
[/crayon]

The only things changed from Example 1 are that we’re using Cycle’s before option instead of the after option and the captions are placed at the top of the images instead of below them.

Example 2 HTML Markup:

[plain]

[/plain]

Example 2 Slideshow:

Example 3: Show slide number and total count of slides in addition to the image’s alt text for a caption.

To get the slide numbers we can take advantage of a couple of variables that keep track of the current slide and the number of total slides. We’ll pass three Cycle variables (curr,next,opts) to a new function.

[crayon]
$(‘#slideboth’).cycle({
fx: ‘fadeZoom’,
timeout: 2000,
slideExpr: ‘img’,
after: slideAfter,
before: function() {
$(‘#caption3’).html(this.alt);
}
});

function slideAfter(curr,next,opts) {
var caption_count = ‘Image ‘ + (opts.currSlide + 1) + ‘ of ‘ + opts.slideCount;
$(‘#caption4’).html(caption_count);
}
[/crayon]

There’s something new going on here. A named function, slideAfter, is the value for the after option. Using a function we can make calculations and assignments to create some interesting captions. Cycle’s before option also may take a function as its value.

The function slideAfter calculates and specifies the number of the current image and the total number of slides in the slideshow. The calculated values are assigned to a variable, caption_count, which is then used as the image caption.

Example 3 HTML Markup:

[plain]

()

[/plain]

In this example #caption5 is used for CSS positioning, while #caption3 and #caption4 are targeted by the JavaScript in creating the caption.

Example 3 Slideshow:

()

Examples borrowed from jQuery Cycle image count caption demo.

These examples showed how to create captions for images presented in slideshows with the jQuery Cycle plugin.

Specify Children for jQuery Cycle Slideshows

The jQuery Cycle plugin is a versatile JavaScript plugin for making slideshows.

The default behavior is to fade in a new slide, let the viewer see the slide for four seconds, then fade out that slide as the next one fades in. Slides are faded in and out continuously and in a sequential manner. Unless specified in the options, a slideshow starts with the first slide and cycles through all slides, then loops back to the first slide, running continuously.

Options are available to change every aspect of the slideshow behavior, so the kind and timing of the transitions can be easily changed, as well as the starting and ending slides of the show.

It’s beyond the scope of this post to review all the Cycle options, but one option that may come in handy is the slideExpr option. The default value is ‘NULL‘ and it’s described as the “expression for selecting slides (if something other than all children is required)”.

So far, there are two instances where slideExpr has saved my day. Basically, it lets you specify the children of the slideshow and that’s important if you’re using WordPress or if you’re wrapping slides in links.

WordPress or Other CMS

Using JavaScript inside WordPress posts can be tricky. One has to properly register and queue up the scripts with the methods wp_register_script() and wp_enqueue_script() instead of inserting <script> tags in the page headers.

Still, things may not look right when a post is previewed because of the way that WordPress assembles the pages we see on the World Wide Web. WordPress or another content management system (CMS) may insert line breaks that interrupt the flow of a slideshow.

Remember, with the Cycle plugin every child element inside the slideshow container will become a slide. That means every CMS inserted <br /> will be treated as a slide. This produces a slideshow with long, blank pauses in between the actual slides, like the slideshow on the left below, #show_a.

Use slideExpr to specify the children elements for slideshows in WordPress. This avoids extraneous elements from the content management system from being interpreted as slides. See the slideshow on the right below, #show_b.

HTML Markup:

[plain]

[/plain]

The left slideshow, #show_a, shows a few different transitions without using slideExpr, which gives a background-colored pause or blank pause in between each slide. This slideshow assumes the first-level children are the elements to be manipulated in the slideshow.

The right slideshow, #show_b, shows the same transitions with slideExpr set to ‘img’. This gives the expected behavior where only the images, <img>, are treated as slides, not any other element that may be inserted by WordPress or by the developer.

JavaScript:

[crayon]
$(‘#show_a’).cycle({
fx: ‘fade,toss,fadeZoom’,
speed: 700,
timeout: 2000
});

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

Wrapping slides

If you’re not using WordPress or another CMS, there may still be unexpected behavior with the Cycle plugin with respect to children of the slide show.

Any children in a container element can be used as a slide with the jQuery Cycle plugin. Designers can get as fancy or as funky as they want to with their slideshows because they ultimately have complete control. If you want to wrap each image in an anchor which is wrapped in a styling div, that’s ok.

Just remember to use slideExpr: ‘img’ if it is the images that you want to transition from slide to slide. HTML Markup is very similar to that above with different container ids for JavaScript and CSS targeting.

In this example the slideshow on the left, #show_1, uses the ‘fadeZoom’ transition effect without slideExpr. Slideshow #show_2 on the right uses the ‘fadeZoom’ transition effect with slideExpr: ‘img’. Note how the actual transition effect is different depending on which element is serving as the slide.

JavaScript:

[crayon]
$(‘#show_1’).cycle({
fx: ‘fadeZoom’,
speedIn: 700,
speedOut: 1200,
timeout: 2000
});

$(‘#show_2’).cycle({
fx: ‘fadeZoom’,
speedIn: 700,
speedOut: 1200,
timeout: 2000,
slideExpr: ‘img’
});
[/crayon]

Note the empty paragraph in the HTML markup for each slideshow. Without specifying the slideExpr option, as in #show_1, the empty paragraph is treated as a slide and a blank space is shown for it. Slideshow #show_2 specifies that the images are to be the sliding elements, so no blank space is seen.

Certain transition effects problems may appear when wrapping slides with links in jQuery Cycle. Using the slideExpr option is an easy solution.