Want to create a photo gallery with fancy special effects? Mike Alsup, who has developed several popular plugins for jQuery, has uploaded his jQuery Cycle (jCycle) plugin to the Microsoft Ajax CDN.
This plugin enables you to take a set of images, and transition from one image to another using a special effect. In other words, it gives you a way to display a fancy slide show. Here’s a super simple sample of how you can use this plugin with a static list of images:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Show Photos</title>
</head>
<body>
<div id="photos">
<img src="/photos/picture1.jpg" width="250" height="300" />
<img src="/photos/picture2.jpg" width="250" height="300" />
<img src="/photos/picture3.jpg" width="250" height="300" />
</div>
<script type="text/javascript" src="http://ajax.microsoft.com/ajax/jquery/jquery-1.4.2.js"></script>
<script type="text/javascript" src="http://ajax.microsoft.com/ajax/jquery.cycle/2.88/jquery.cycle.all.js"></script>
<script type="text/javascript">
$("#photos").cycle("toss");
</script>
</body>
</html>
The page above contains three jpeg pictures. When you open the page in a browser, you see only one picture at a time. Every few seconds, the current picture is “tossed to the side” and you see a new picture. The following screenshot does not really give you an accurate sense of the elegance of the jQuery Cycle transitions. I really recommend that you visit Mike Alsup’s website to see some live samples:
Notice that the page contains two scripts: jquery-1.4.2.js and jquery.cycle.all.js. The toss special effect is applied to the set of images by calling $(“#photos”).cycle(“toss”). The #photos selector refers to the DIV that contains the three images.
The “toss” special effect is only one of the special effects supported by jQuery Cycle. The plugin supports over two dozen special effects:
- blindX
- blindY
- blindZ
- cover
- curtainX
- curtainY
- fade
- fadeZoom
- growX
- growY
- none
- scrollUp
- scrollDown
- scrollLeft
- scrollRight
- scrollHorz
- scrollVert
- shuffle
- slideX
- slideY
- toss
- turnUp
- turnDown
- turnLeft
- turnRight
- uncover
- wipe
- zoom
You can try out all of these effects live by visiting Mike Alsup’s website and playing with his effects browser:
An ASP.NET MVC Sample
You can get fancier when using the jQuery Cycle plugin with ASP.NET MVC. Imagine that you want to create a special folder named Photos and you want to cycle through any images contained in the folder using the jQuery Cycle plugin automatically. Here’s how you can create an ASP.NET MVC controller action that returns the list of image URLs from the Photos folder:
using System;
using System.IO;
using System.Linq;
using System.Web.Mvc;
namespace PhotoGalleryApp.Controllers
{
public class HomeController : Controller
{
public ActionResult Index()
{
// Path to photos folder
var photosRelativePath = "~/photos/";
var photosFilePath = this.Server.MapPath(photosRelativePath);
// Get list of img files from photos folder
var photos = from file in new DirectoryInfo(photosFilePath).GetFiles()
where (file.Name.EndsWith(".jpg", StringComparison.InvariantCultureIgnoreCase)
|| file.Name.EndsWith(".gif", StringComparison.InvariantCultureIgnoreCase)
|| file.Name.EndsWith(".png", StringComparison.InvariantCultureIgnoreCase))
select photosRelativePath + file.Name;
// Return photos as string array
return View(photos.ToArray());
}
}
}
This controller will return any jpg, gif, or png image contained in the Photos folder.
Here’s the ASP.NET MVC view for displaying the images:
<%@ Page Language="C#" Inherits="System.Web.Mvc.ViewPage<string[]>" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
<title>Photo Gallery</title>
</head>
<body>
<div id="photos">
<% foreach (var photo in Model) { %>
<img src="<%: Url.Content(photo) %>" width="250" height="300" />
<% } %>
</div>
<script type="text/javascript" src="http://ajax.microsoft.com/ajax/jquery/jquery-1.4.2.js"></script>
<script type="text/javascript" src="http://ajax.microsoft.com/ajax/jquery.cycle/2.88/jquery.cycle.all.js"></script>
<script type="text/javascript">
$("#photos").cycle("shuffle");
</script>
</body>
</html>
This view uses the jQuery Cycle plugin to display a fancy slideshow using the images. The images are displayed using the “shuffle” transition (which is my favorite transition).
An ASP.NET Web Forms Sample
The jQuery Cycle plugin also works great with ASP.NET Web Forms. Here is the code-behind file for an ASP.NET page that retrieves a list of images from the Photos folder:
using System;
using System.IO;
using System.Linq;
namespace PhotoGalleryApp {
public partial class WebForm1 : System.Web.UI.Page {
protected void Page_Load(object sender, EventArgs e) {
// Path to photos folder
var photosRelativePath = "~/photos/";
var photosFilePath = this.Server.MapPath(photosRelativePath);
// Get list of img files from photos folder
var photos = from file in new DirectoryInfo(photosFilePath).GetFiles()
where (file.Name.EndsWith(".jpg", StringComparison.InvariantCultureIgnoreCase)
|| file.Name.EndsWith(".gif", StringComparison.InvariantCultureIgnoreCase)
|| file.Name.EndsWith(".png", StringComparison.InvariantCultureIgnoreCase))
select photosRelativePath + file.Name;
// Return photos as string array
lstPhotos.DataSource = photos.ToArray();
lstPhotos.DataBind();
}
}
}
Notice that the code-behind file binds the images to a Web Forms ListView control named lstPhotos.
Here is the Web Forms page itself:
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm1.aspx.cs" Inherits="PhotoGalleryApp.WebForm1" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>Photo Gallery</title>
</head>
<body>
<form id="form1" runat="server">
<div>
<div id="photos">
<asp:ListView ID="lstPhotos" runat="server">
<ItemTemplate>
<img src='<%# ResolveUrl(Container.DataItem.ToString()) %>' width="250" height="300" />
</ItemTemplate>
</asp:ListView>
</div>
<script type="text/javascript" src="http://ajax.microsoft.com/ajax/jquery/jquery-1.4.2.js"></script>
<script type="text/javascript" src="http://ajax.microsoft.com/ajax/jquery.cycle/2.88/jquery.cycle.all.js"></script>
<script type="text/javascript">
$("#photos").cycle("toss");
</script>
</div>
</form>
</body>
</html>
Files on the Microsoft Ajax CDN
Here are the jQuery Cycle files that are located on the Microsoft Ajax CDN:
- http://ajax.microsoft.com/ajax/jquery.cycle/2.88/jquery.cycle.all.js – The full version of the jQuery Cycle plugin. Includes all the more than two dozen special effects and all of the options.
- http://ajax.microsoft.com/ajax/jquery.cycle/2.88/jquery.cycle.all.min.js – The minified version of the file above. Use this version for production applications to improve your website performance.
- http://ajax.microsoft.com/ajax/jquery.cycle/2.88/jquery.cycle.js – This version of the jQuery Cycle plugin is smaller and contains only the “fade” transition effect.
- http://ajax.microsoft.com/ajax/jquery.cycle/2.88/jquery.cycle.min.js – The minified version of the file above. Use this version for production applications to improve your website performance.
- http://ajax.microsoft.com/ajax/jquery.cycle/2.88/jquery.cycle.lite.js – An even smaller version of the jQuery Cycle plugin that contains only the “fade” transition without all of the options.
- http://ajax.microsoft.com/ajax/jquery.cycle/2.88/jquery.cycle.lite.min.js – The minified version of the file above. Use this version for production applications to improve your website performance.
The Microsoft Ajax CDN is free. You do not need to register to use it. You can start using the URLs above in your production applications to improve the performance of your ASP.NET applications for your users.
Summary
Thanks Mike for uploading your jQuery Cycle plugin to the Microsoft Ajax CDN! Our hope is that ASP.NET developers will take advantage of this plugin when building rich websites.
Welcome to http://Ladystoys.com ! Here you will find the hottest,wildest selection of sex toys,
and novelties on the entire net! From lingerie,condoms to vibrators, we have it all! Over 35,000
products for you to browse through! 1 or 2 FREE Random DVD’s with every order.
Enjoy your stay at Adult toys home.com ! And we want to thank you for choosing the best
Adult Store on the Entire net,we promise PRIVATE, SECURE ORDERING, AND DISCREET SHIPPING.
FREE GIFTS WITH EVERY ORDER.
Recieve a FREE Random Item or two with every purchase Guaranteed
Whatever you are looking for Sex Toys Vibrators, or Dildos, LADY’S TOYS has something to
grab your interest and fulfill your fantasies. Our huge selection of sex toys includes all
kinds of sex toys like sex swings, love dolls, cock rings, penis pumps, and all other kinds
of toys. Blush Novelties and Giggles Glass Toys, And Adam&Eve Products and plenty of other
Manufacturers.Our collection of vibrators are the best on the Net with hundreds of the ever-popular rabbit
vibrators, G-Spot vibrators and waterproof vibrators to choose from. Ladies Sex Toys, Women
Toys, Sex Toys for Couples and Men.If you’re searching for dildos, we have dozens of dildos from the 15-inch Great American
Dildo to the 7-inch Wrapped Wand Glass Dildo. Huge selection. High quality. Low prices at
Lady’s Toys.Vibrators come in all shapes and sizes; including many specialty models: rabbit
vibrators, clit vibrators, mini vibrators, remote control vibrators and more! Sex Toys For Women !
A sex toy for everyone: glass dildos, anal sex toys, cock rings, and many more.
Don’t forget male masterbators, strap-ons, and gay and lesbian sex toys.
Whether your looking for sexy lingerie for you or someone else. Heat up your
bedroom with some crotchless panties or a sexy costume and Sex Toys for Ladies!
Add spice to your sex life; play an adult sex game, try a little kinky bondage or
wear extra sexy lingerie. Don’t forget to get slippery with a sex or anal lube.
The website also carries a massive collection of vibrators including rabbit vibrators
,G-Spot vibrators and waterproof vibrators to choose from. Toys are available for women,
couples and men.
That’s awesome! I’ve been looking into using a "cycle" plugin on my site soon, but didn’t really want to be loading yet another script from local server.
Now I won’t have to!
Thanks for such a nice plugin. It will be really helpful
thank you!