Two jQuery plugins that saved my weekend
Jan 24
posted by Rob Barthle in
jQuery, Web Development
| 1 Comments
A client made some requests to alter his site. The two main things requested were using rounded corners for the container that the site content sits in, and the redoing of some images on the site, and having them rotate through to provide some animation.
Normally I would use the tried and true methods of creating rounded corners in photoshop, and then having to redo the container div into multiple divs to properly set them for that task. On a whim, I decided to do some searching for other ideas.
In comes jQuery to, once again, save the day. I found the Curvy Corners plugin (http://curvycorners.net/) which did this task cross-browser in about 15 minutes, give or take. Thank you very much, I'll move on.
For the animating of the images, in years past, animated GIFs or Flash was the medium of choice. But I wanted other options, especially since the Flash wouldn't be supported on anyone viewing in iOS. Again, a Google search turned up a jQuery plugin to take care of things. This time it was the Cycle plugin (http://jquery.malsup.com/cycle/). Another 15 minutes (10 of that to write a quick randomization block in CF), and task #2 complete.
If it wasn't for having to tweak 41 images in Photoshop, I'd have been done inside of an hour! Thanks jQuery! (again)
#1 by Larry C. Lyons on 1/27/11 - 5:18 PM
Her's the script - its all pretty self explanatory:
<sc / ript type="text/javascript">
function slideSwitch() {
var $active = $('#slideshow DIV.active');
if ( $active.length == 0 ) $active = $('#slideshow DIV:last');
// use this to pull the divs in the order they appear in the markup
var $next = $active.next().length ? $active.next()
: $('#slideshow DIV:first');
// uncomment below to pull the divs randomly
var $sibs = $active.siblings();
var rndNum = Math.floor(Math.random() * $sibs.length );
var $next = $( $sibs[ rndNum ] );
$active.addClass('last-active');
$next.css({opacity: 0.0})
.addClass('active')
.animate({opacity: 1.0}, 1031, function() {
$active.removeClass('active last-active');
});
}
$(function() {
setInterval( "slideSwitch()", 1000);
});
</sc /ript>
The CSS
<style type="text/css">
/*** set the width and height to match your images or larger. **/
#slideshow {
position:relative;
width:300px;
height: 225px;
/*border:1px solid black;
margin:5px;*/
}
#slideshow DIV {
position:absolute;
top:0;
left:0;
z-index:8;
opacity:0.0;
width:300px;
height: 225px;
background-color: #FFF;
}
#slideshow DIV.active {
z-index:10;
opacity:1.0;
}
#slideshow DIV.last-active {
z-index:9;
}
#slideshow DIV IMG {
width:300px;
height: 225px;
display: block;
border: 0;
margin-bottom: 10px;
}
</style>
And finally the HTML.:
<div id="slideshow" >
<div class="active">
<a href="#" title="Tutorial 1"><img src="/images/tutorial1.jpg" alt="Tutorial1" width="300" height="225" /></a><p>Caption 1</p>
</div>
<div>
<a href="#" title="Tutorial2"><img src="/images/tutorial2.jpg" alt="Tutorial2" width="300" height="225" /></a><p>Caption 2</p>
</div>
<div>
<a href="#" title="Item 3"><img src="/images/item3.jpg" alt="Item3." width="300" height="225" /></a><p>Caption 3</p>
</div>
</div>
hth,
larry