Overview

What it is

ImgWheel is... Responsive

ImgWheel has a responsive display. Images and the slideshow container are resized on window resize events. Unlike with a lot of image slider plugins, images included in the ImgWheel slideshow always retain their original aspect ratio within the display.

ImgWheel is... Center Focused

The center image in the ImgWheel slideshow has some special properties. If additional content is included in the display, the content linked to each slideshow image will be displayed when that image is central. If slideshow images are wrapped in anchor tags (<a>), the associated links will only be active when an image is in the center position in the slideshow.

ImgWheel is... Adjustable

There are a number of built-in options and CSS classes that you can alter when using ImgWheel, including the event that triggers the animation (click, hover, or touch), the display width, and the animation speed.

ImgWheel is... Endless

At least 5 images need to be included in a slideshow for ImgWheel to function properly. Include as many images beyond 5 as you like... they will get looped through endlessly.

ImgWheel is... Extensible

You have the option to include content related to the slideshow images that becomes a part of the slideshow. This content could be something like an image caption or title, an article or blog entry, or whatever you might want. The content related to the central image will be displayed.

What is ImgWheel?

ImgWheel is an animated, endless, responsive slideshow that has the capability to display content related to your slideshow images as they appear. It has several options for how images are scrolled through, direction, speed, vertical alignment of images, and placement of the related content. Hover over either side of the display above to learn more about what ImgWheel is...

How to use it

The HTML

The first step in including ImgWheel on your site is to set up the HTML for your slideshow. All of the HTML for ImgWheel should go inside of a <div> with an assigned id or class. Within this <div> is placed a <div> with class="image-container". In this <div> go your images. The HTML for a basic slideshow would look like this:

<div id="my-slideshow">
  <div class="image-container">
	<img src="yourImage_1.jpg" />
	<img src="yourImage_2.jpg" />
	<img src="yourImage_3.jpg" />
	<img src="yourImage_4.jpg" />
	<img src="yourImage_5.jpg" />
	<img src="yourImage_6.jpg" />
	<img src="yourImage_7.jpg" />
	<!--Include as many images as you'd like!-->
  </div>
</div>

If you want to include additional content to be displayed as part of the ImgWheel slideshow, now is your chance. Simply add in another <div> with the class="article-container". Within this <div>, place as many <article>'s as there are images in your .image-container <div>, then fill those <article>'s with whatever content you like. When the first image in your .image-container <div> is central in the slideshow, the first article in your .article-container <div> will be displayed, and so on. The HTML looks like this:

<div id="my-slideshow">
  <div class="image-container">
	<img src="Image_1.jpg" />
	<img src="Image_2.jpg" />
	<img src="Image_3.jpg" />
	<img src="Image_4.jpg" />
	<img src="Image_5.jpg" />
	<!--Include as many images as you'd like!-->
  </div>
  <div class="article-container">
	<article><!--Content displayed when Image_1.jpg is central--></article>
	<article><!--Content displayed when Image_2.jpg is central--></article>
	<article><!--Content displayed when Image_3.jpg is central--></article>
	<article><!--Content displayed when Image_4.jpg is central--></article>
	<article><!--Content displayed when Image_5.jpg is central--></article>
	<!--Include as many articles as there are images in the .image-container-->
  </div>
</div>

Static content can also be included within the ImgWheel display. To have static content displayed alongside your rotating articles, add in another <div> containing this content:

<div id="my-slideshow">
  <div class="image-container">
	<img src="Image_1.jpg" />
	<img src="Image_2.jpg" />
	<img src="Image_3.jpg" />
	<img src="Image_4.jpg" />
	<img src="Image_5.jpg" />
	<!--Include as many images as you'd like!-->
  </div>
  <div class="article-container">
	<article><!--Content displayed when Image_1.jpg is central--></article>
	<article><!--Content displayed when Image_2.jpg is central--></article>
	<article><!--Content displayed when Image_3.jpg is central--></article>
	<article><!--Content displayed when Image_4.jpg is central--></article>
	<article><!--Content displayed when Image_5.jpg is central--></article>
	<!--Include as many articles as there are images in the .image-container-->
  </div>
  <div class="static-content"><!--Identify this div however you'd like-->
	<!--Insert whatever static content you'd like displayed-->
  </div>
</div>

The JavaScript

You need to download and save the jquery.ImgWheel.min.js file in your project or site directory. To use ImgWheel, link to this file in your HTML <head>. If you haven't done so already, also link to a version of jQuery (version 1.6 or later). You can link to jQuery via Google without downloading the library into your project directory:

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6/jquery.min.js"></script>
<script src="jquery.ImgWheel.min.js"></script>

With the jQuery library and ImgWheel loaded on your page, you can now access the ImgWheel() function for use on page elements. Using the HTML in the previous example, we can apply the function to a div on our page like so:

$('#my-slideshow').ImgWheel();

This would be included either in your page's main JavaScript file or right in your site's <head> tags. Options to be included when invoking the function are discussed in the Settings section!