jQuery Plugin: gpImageRotate – Create Portfolios, Carousels, Galleries, and more

A few years ago, I created the jQuery plugin imBannerRotater. I have tweaked this plugin for various projects over the years, but I recently made so many changes to the plugin that I decided to create a new plugin: gpImageRotate. The code in the new plugin is more optimized than the original. And, not only did I enhance the existing functionality, I added 4-5 additional image rotation options. Lastly, one of the major reasons that I decided to create a new plugin is that I am working on a Drupal module based upon the plugin and so I changed the code so that the Drupal module could easily interact with it – so the naming convention for many of the styles is more verbose than the original imBannerRotater plugin.

gpImageRotate Modes

The gpImageRotate has 11 modes of image rotation:

  1. Random – Displays a random image on the page.
  2. Fade – Images fade in and out on the page.
  3. Curtains – Images rotate in and out using a vertical or horizontal curtain effect.
  4. Blinds – Images rotate in and out using a vertical or horizontal blinds effect.
  5. Zoom – Images zoom in and out.
  6. Squeeze – Images rotate in and out using a squeeze effect.
  7. Pixels – Images segmented into pixels and each pixel randomly removed from (or added to) the screen.
  8. Carousel – Images are displayed using a carousel effect.
  9. Portfolio – Image slideshow.
  10. Steps – Images are displayed using carousel/stair step effect.
  11. Simplegallery – A simple image gallery with lightbox option.

gpImageRotate Options

Many of the plugin’s options are mode-specific. The list below describes the options that are used with most modes:

mode: The rotation/display mode. The default is random.
interval: The amount of time in milliseconds that the image will be displayed before rotating the next image. The interval option is not used when the mode is random or simplegallery.
speed: The speed in milliseconds in which the next image rotates in and out. The default is 1500.
image_url: The url where the image information will be retrieved (image name, etc). The url should return a JSON object. More on this later.
images: Rather than using the image_url option, you can load the JSON object directly into the plugin using the images option.
base_path: If the images are all stored in the same location, you can enter a base url path that will be prefixed to all images that are loaded (optional).
data_map: This option tells the plugin how to map the fields in the JSON object. This option was created so that if the fields in the JSON object are named differently than the names needed by the plugin, JSON object does not have to change to accommodate the plugin. For instance, the JSON object may have been created from a database query and the field name for an image may be url. Rather than trying to alter the JSON object, just let the plugin know that it should look for the field url to retrieve the value of the image name/url. The data map attribute options are:

  1. image_name: The field name for the image url. This is mandatory if the class_name field attribute is not used.
  2. class_name: The field name of the image class. Must be used if the image_name field attribute is not used.
  3. image_title: The field name for the image title (optional and only displays in certain modes).
  4. image_desc: The field name for the image description (optional and only display in certain modes).
  5. url_name: The field name for the image url – when clicked (optional. Can be used in all modes).
  6. url_target: The field name for the image url target (optional. Can be used in all modes).
  7. image_width: The field name for the width of the image (optional).
  8. image_height: The field name for the height of the image (optional).
  9. on_show: the field name for the ‘on show’ event (optional).

data_map example:

?View Code JAVASCRIPT
data_map: {
  // the image name. If the base_path option is not used, then the value should include the full url of the image
  image_name: " name",
 
  // The class name. Use this option when you want to display an image class from your style sheet(s) instead of loading from a url.
  class_name: "class_name", 
 
  // In a few of the modes, the image title will be added to the ‘title’ attribute of the image. The plugin will default to the image name if the image_title attribute is not present.
  image_title: "image_title",
 
  // An image description can optionally be displayed in all modes except blinds, curtains, pixels.   
  image_desc: "desc",
 
  // Each image can have a url associated with it. 
  url_name: "url",
 
  // You can specify a url target for each image or you can opt to set all images at once using the url_target option (see below) 
  url_target: "url_target",
 
  // The image width
  image_width: "image_width", 
 
  // The image height
  image_height: "image_height"
}

Using the gpImageRotate Plugin

To use the gpImageRotate plugin, you must first load it after jQuery has loaded.

<script type="text/javascript" src="/assets/js/jquery/jquery-1.7.1.min.js"></script> 		
<script type="text/javascript" src="/assets/js/jquery/gpimagerotate/jquery.gpImageRotate-0.5.js"></script>

Loading the plugin:

?View Code JAVASCRIPT
$(document).ready(function(){
    $("#cast").gpImageRotate({
	data_map: {
		image_name: 'name'
	},
	image_url: "/assets/gpimagerotate/random_links.php",
	base_path: "/assets/gpimagerotate/bobmarley/"
    });
});

JSON Object

When loading image information with either the plugin’s image_url or images option, the data returned must be in JSON format.

?View Code JAVASCRIPT
[{"name": "joneil.jpg", "url": "http://www.imdb.com/character/ch0005968/"},{"name": "scarter.jpg", "url": "http://www.imdb.com/character/ch0005974/"},
{"name": "djackson.jpg", "url": "http://www.imdb.com/character/ch0005966/"},{"name": "tealc.jpg", "url": "http://www.imdb.com/character/ch0005979/"},
{"name": "cmitchell.jpg", "url": "http://www.imdb.com/character/ch0005982/"},{"name": "vala.jpg", "url": "http://www.imdb.com/character/ch0005977/"}]

Multiple Links

The field names in JSON object should be the same as names supplied in the data_map option. However, there is one attribute that does not have to be supplied in the data_map. As stated above, if there is a url associated with an image, then the url_name and url_target should exist in the data_map. But if multiple urls are associated with an image, the gpImageRotate plugin will look for a links field in the JSON object. For instance, if you have a banner that has two buttons on it and each button is associated with a different url, you can supply the links information is the JSON object (but you do not have to add links to the data_map option).

The values in the links field, tell the plugin how to create a clickable link. You have two options for placing links on an image:

link_class: supply the name of a class that you created in your style sheet.

Or, supply the width, height, and dimensions for the link

link_width: The width of the link.
link_height: The height of the link.
link_left: The left position of the link.
link_top: Th top position of the link.

#cast a {
	background-color:#000066;
}
a.btnOne, a.btnTwo {
	position:absolute;
	top:350px;
	left: 60px;
	width:100px;
	height:30px;
}
#cast a.btnTwo {
	left:220px;
}
?View Code JAVASCRIPT
[{"name": "bobmarley.jpg", 
      "links": [
            {"link_url": "http://www.bobmarley.com", "link_class": "btnOne", "link_target": "_blank"}, 
            {"link_url": "http://www.imdb.com/character/ch0005968/", "link_height": "30px", "link_width": "100px", "link_top": "350px", "link_left": "220px"}]},
{"name": "burnin.jpg", 
      "links": [
            {"link_url": "http://en.wikipedia.org/wiki/Burnin%27_%28The_Wailers_album%29", "link_class": "btnOne", "link_target": "_blank"}, 
            {"link_url": "http://www.imdb.com/character/ch0005974/", "link_class": "btnTwo"}]
}]

Also, note that the JSON object is not restricted to using links only or url_name only – one image may have multiple links and another may have just a single link.

Modes

The gpImageRotate plugin has two mode categories: stacked and linear. The stacked category contains all modes where the images are stacked on top of each other (fade, curtains, blinds, zoom, squeeze, and pixels). The linear category contains all modes where the images move linearly (carousel, portfolio, and steps).

Note: The mode simplegallery does not fit into either mode category and will be discussed separately.

Stacked Modes

The stacked modes share many of the same options:

transition_direction: Describes the direction of the image animation as it transitions to the next image (used by all stacked modes). The options are:

  1. out – transition out only. All images have an initial state of display:block. When the current image transitions out, the next image is already displayed. This is the default option.
  2. inOut – transition in and out simultaneously. All images have an initial state of display:none. The current image transitions in. As it transitions out, the next image transitions in (at the same time).
  3. inOutIn – transition in and out. All images have an initial state of display:none. The current image will transition in and then back out before the next image transitions in.

transition_axis: The axis for the transition. This option is used with modes blinds, curtains, and squeeze. The options are:

  1. x – the x-axis. The default.
  2. y – the y-axis.

segments: Used with modes blinds and pixels. If the mode is “blinds”, the value is number of blind segments to create (if blank, default = 4). If the mode is “pixels”, the value is the number of segments that will be created on both the x and y axis (if blank, default = 10: width/10 and height/10).

Fade Mode

In this mode, the group of images will continuously fade in and out.

?View Code JAVASCRIPT
// default – fade out
$(document).ready(function(){
    $("#cast").gpImageRotate({
	mode: 'fade',
	interval: '5000',
	image_url: "/assets/imbannerrotater/rotate.php",
	base_path: "/assets/gpimagerotate/"
    });
});
 
// fade in and out
$(document).ready(function(){
    $("#cast").gpImageRotate({
	mode: 'fade',
	transition_direction: 'inOut',
	interval: 5000,
	data_map: {
		image_name: 'name',
		url_name: 'url'
	},
	image_url: "/assets/imbannerrotater/rotate.php",
	base_path: "/assets/gpimagerotate/"
    });
});
 
// fade in and out simultaneoulsly
$(document).ready(function(){
    $("#cast").gpImageRotate({
	mode: 'fade',
	transition_direction: 'inOutIn',
	interval: 5000,
	data_map: {
		image_name: 'name',
		url_name: 'url'
	},
	image_url: "/assets/imbannerrotater/rotate.php",
	base_path: "/assets/gpimagerotate/"
    });
});

Curtains Mode

In curtains mode, the image is segmented into two vertical or horizontal slices. The two slices slide in and/or out.

?View Code JAVASCRIPT
// Curtains default (transition_direction: out, transition_axis: x, speed: 1500)
$(document).ready(function(){
    $("#cast").gpImageRotate({
	mode: 'curtains',
	interval: 5000,
	data_map: {
		image_name: 'name',
		url_name: 'url'
	},
	image_url: "/assets/imbannerrotater/rotate.php",
	base_path: "/assets/gpimagerotate/"
    });
});
 
// Curtains (transition_direction: inOut, transition_axis: y)
$(document).ready(function(){
    $("#cast").gpImageRotate({
	mode: 'curtains',
	transition_direction: 'inOut',
	transition_axis: ‘y’,
	interval: 5000,
	data_map: {
		image_name: 'name',
		url_name: 'url'
	},
	image_url: "/assets/imbannerrotater/rotate.php",
	base_path: "/assets/gpimagerotate/"
    });
});

Blinds Mode

The Blinds Mode is similar to curtains, except that you are able to specify the number of segments.

?View Code JAVASCRIPT
//blinds default (transition_direction: out, transition_axis: x, segments: 4, speed: 1500)
$(document).ready(function(){
    $("#cast").gpImageRotate({
	mode: 'blinds',
	interval: 5000,
	data_map: {
		image_name: 'name',
		url_name: 'url'
	},
	image_url: "/assets/imbannerrotater/rotate.php",
	base_path: "/assets/gpimagerotate/"
    });
});
 
//blinds (transition_direction: inOutIn, transition_axis: y, segments: 10, speed: 2000)
$(document).ready(function(){
    $("#cast").gpImageRotate({
	mode: 'blinds',
	transition_direction: 'inOutIn',
	transition_axis: ‘y’,
	segments: 10,
	interval: 5000,
	speed: 2000,
	data_map: {
		image_name: 'name',
		url_name: 'url'
	},
	image_url: "/assets/imbannerrotater/rotate.php",
	base_path: "/assets/gpimagerotate/"
    });
});

Squeeze Mode

The image width or height animates to 0.

?View Code JAVASCRIPT
//squeeze default (transition_direction: out, transition_axis: x, speed: 1500)
$(document).ready(function(){
    $("#cast").gpImageRotate({
	mode: 'squeeze',
	interval: 5000,
	data_map: {
		image_name: 'name',
		url_name: 'url'
	},
	image_url: "/assets/imbannerrotater/rotate.php",
	base_path: "/assets/gpimagerotate/"
    });
});
 
//squeeze (transition_direction: inOutIn, transition_axis: y, speed: 3000)
$(document).ready(function(){
    $("#cast").gpImageRotate({
	mode: 'squeeze',
	interval: 5000,
	speed: 3000,
        transition_direction: 'inOutIn',
	transition_axis: ‘y’,
	data_map: {
		image_name: 'name',
		url_name: 'url'
	},
	image_url: "/assets/imbannerrotater/rotate.php",
	base_path: "/assets/gpimagerotate/"
    });
});

Zoom Mode

In zoom mode, an image zooms in and out of the screen as it rotates to the next image. Zoom mode has an additional option:

zoom_type: Specifies the direction of the zoom.

  • center – the default. The image zooms in and/or out from the center of the container.
  • tlbr – The image zooms from top-left to bottom-right.
  • trbl – The image zooms from top-right to bottom-left.
  • bltr – The image zooms from bottom-left to top-right.
  • brtl – The image zooms from bottom-right to top-left.
?View Code JAVASCRIPT
//zoom default (transition_direction: out, zoom_type: center, speed: 1500)
$(document).ready(function(){
    $("#cast").gpImageRotate({
	mode: 'zoom',
	interval: 5000,
	data_map: {
		image_name: 'name',
		url_name: 'url'
	},
	image_url: "/assets/imbannerrotater/rotate.php",
	base_path: "/assets/gpimagerotate/"
    });
});
 
//zoom (transition_direction: inOutIn, zoom_type: tlbr, speed: 2000)
$(document).ready(function(){
    $("#cast").gpImageRotate({
	mode: 'zoom',
	interval: 6000,
	speed: 2000,
	zoom_type: 'tlbr',
	transition_direction: 'inOutIn',
	data_map: {
		image_name: 'name',
		url_name: 'url'
	},
	image_url: "/assets/imbannerrotater/rotate.php",
	base_path: "/assets/gpimagerotate/"
    });
});

Pixels Mode

In pixels mode, the image is sliced vertically and horizontally into a specified number of segments. During the transition, each segment will randomly appear and/or disappear.

?View Code JAVASCRIPT
//pixels default (transition_direction: out, segments: 10)
$(document).ready(function(){
    $("#cast").gpImageRotate({
	mode: 'pixels',
	interval: 5000,
	data_map: {
		image_name: 'name',
		url_name: 'url'
	},
	image_url: "/assets/imbannerrotater/rotate.php",
	base_path: "/assets/gpimagerotate/"
    });
});
 
//pixels (transition_direction: inOut, segments: 5)
$(document).ready(function(){
    $("#cast").gpImageRotate({
	mode: 'pixels',
	interval: 5000,
	transition_direction: 'inOut',
	segments: 5,
	data_map: {
		image_name: 'name',
		url_name: 'url'
	},
	image_url: "/assets/imbannerrotater/rotate.php",
	base_path: "/assets/gpimagerotate/"
    });
});

Linear Modes

As with the Stacked Modes, the Linear Modes share many of the same options:

side_nav: Side Navigation can be displayed over each image (next and previous buttons). This option describes how to display the side navigation. The options values are:

  • none – do not display. The default.
  • onload – when the image is loaded.
  • onhover – when a mouse hovers over the image.

primary_nav: The primary navigation. This option describes how to display the primary navigation. This option has multiple attributes:

  • display – where to display the primary navigation. The option values are:
    • none – do not display. The default.
    • top – display above the images.
    • Bottom – display below the images.
  • display_type – The type of navigation to display. The option values are:
    • default – the default navigation will contain row of icons that represent each image.
    • thumb – A row of thumb images will display.
    • thumb_height – If the display_type is set to ‘thumb’, the height of the thumb image (in pixels). The default is ‘30px’.
    • show_thumb_nav – If the display_type is set to ‘thumb’, tells the plugin whether to display previous and next buttons for the row of thumb images. The option values are:
      • false – the default. Thumbs will be placed sequentially within a container and will wrap to the next line if the thumb container is not wide enough to hold all the thumb images.
      • true – The images will not wrap within in the container (all will remain in a single row). Navigation buttons will be placed to the left and right side of the thumb container.

      desc_display: The description display options. Describes how to display the image description. This option has multiple attributes:

      • display – when to display the description. The option values are:
        • none – do not display. The default.
        • onload – display description when the image is loaded.
        • onhover – display description when the mouse hovers over the image.
      • anim_type – The animation type for the display of the description. The option values are:
        • none – do no animate. The default. The description will just appear.
        • slideX – The description will slide in on the x-axis.
        • slideY – The description will slide in on the y-axis.
        • fade – The description will fade into view.
      • desc_placement – Where the description will be placed. The option values are:
        • top – The top of the description container will be aligned with the top of image container.
        • bottom – the default. The description will be aligned with the bottom of the image container.
      • desc_width – You can optionally set the width of the description container.

      easing: Use this option to set an easing method for the animated rotation. In order to use the easing option, you must load the jquery.easing plugin (link).

      <script type="text/javascript" src="/assets/js/jquery/jquery-1.7.1.min.js"></script> 
      <script type="text/javascript" src="/assets/js/jquery/jquery.easing.js"></script> 		
      <script type="text/javascript" src="/assets/js/jquery/gpimagerotate/jquery.gpImageRotate-0.5.js"></script>

      The default easing option is: easeOutElastic

      Carousel Mode

      In carousel mode, a group of images are displayed and rotated using a carousel effect (multiple images are displayed at a time).

      ?View Code JAVASCRIPT
      // carousel default
      $(document).ready(function(){
          $("#gpImageRotateCntnr").gpImageRotate({
      	mode: 'carousel',
      	interval: 5000,
      	data_map: {
      		image_name: 'name',
      		url_name: 'url',
      		image_title: 'image_title'
      	},
      	image_url: "/assets/gpimagerotate/carousel.php",
      	base_path: "/assets/gpimagerotate/"
          });
      });
       
      // carousel with navigation elements
      $(document).ready(function(){
          $("#gpImageRotateCntnr").gpImageRotate({
      	mode: 'carousel',
      	interval: 5000,
      	data_map: {
      		image_name: 'name',
      		url_name: 'url',
      		image_title: 'image_title'
      	},
      	primary_nav: {'display': 'bottom'},
      	side_nav: {'display': 'onhover'},
      	image_url: "/assets/gpimagerotate/carousel.php",
      	base_path: "/assets/gpimagerotate/"
          });
      });

      Portfolio Mode

      Portfolio mode is similar to the carousel mode, except that only a single image is displayed at a time.

      ?View Code JAVASCRIPT
      // portfolio example
      $(document).ready(function(){
          $("#gpImageRotateCntnr").gpImageRotate({
      	mode: 'portfolio',
      	interval: 8000,
      	speed: 2000,
      	return_type: 'json',
      	data_map: {
      		image_name: 'name',
      		url_name: 'url',
      		image_title: 'image_title',
      		image_desc: 'image_desc'
      	},
      	primary_nav: {'display': 'top'},
      	side_nav: {'display': 'onload'},
      	image_url: "/assets/gpimagerotate/portfolio.php",
      	base_path: "/assets/gpimagerotate/bobmarley/"
          });
      });
       
      // portfolio with description sliding in on x-axis and easing set to easeOutBack
      $(document).ready(function(){
          $("#gpImageRotateCntnr").gpImageRotate({
      	mode: 'portfolio',
      	interval: 8000,
      	speed: 2000,
      	easing: ‘easeOutBack’,
      	data_map: {
      		image_name: 'name',
      		url_name: 'url',
      		image_title: 'image_title',
      		image_desc: 'image_desc'
      	},
      	primary_nav: {'display': 'top'},
      	side_nav: {'display': 'onload'},
      	desc_display: {'display': 'onload', 'anim_type': 'slideX'},
      	image_url: "/assets/gpimagerotate/portfolio.php",
      	base_path: "/assets/gpimagerotate/bobmarley/"
          });
      });
       
      // portfolio with thumb navigation
      $(document).ready(function(){
          $("#gpImageRotateCntnr").gpImageRotate({
      	mode: 'portfolio',
      	interval: 8000,
      	speed: 2000,
      	data_map: {
      		image_name: 'name',
      		url_name: 'url',
      		image_title: 'image_title',
      		image_desc: 'image_desc'
      	},
      	primary_nav: {'display': 'bottom', 'display_type': 'thumb', 'thumb_height': '75px', 'show_thumb_nav': true},
      	side_nav: {'display': 'onload'},
      	desc_display: {'display': 'onload', 'anim_type': 'slideX'},
      	image_url: "/assets/gpimagerotate/portfolio.php",
      	base_path: "/assets/gpimagerotate/bobmarley/"
          });
      });

      Steps Mode

      In steps mode, 3 images are displayed – 1 large and 2 small. The large image (or showcase image) is displayed between the two smaller images. As the plugin rotates to the next image, the small image on the left transitions off of the screen. The large middle image moves to left and shrinks to the size of the small image. The small image to the right of the large image, moves to the center and increases to the height of the large image (i.e, becomes the new showcase image).

      Steps mode has two additional options:

      steps_large_height: The height of the center (showcase) image.
      steps_small_height: The height of the two smaller images.

      ?View Code JAVASCRIPT
      //steps example
      $(document).ready(function(){
          $("#gpImageRotateCntnr").gpImageRotate({
      	mode: 'steps',
      	interval: 8000,
      	speed: 2000,
      	steps_large_height: '400',
      	steps_small_height: '100',
      	easing: '',
      		data_map: {
      		image_name: 'name',
      		url_name: 'url',
      		image_title: 'image_title',
      		image_desc: 'image_desc'
      	},
      	image_url: "/assets/gpimagerotate/portfolio.php",
      	base_path: "/assets/gpimagerotate/bobmarley/"
          });
      });

      SimpleGallery Mode

      In simplegallery mode, you have the option of displaying a simple photo gallery. This mode has an additional option:

      large_display_mode: tells the gpImageRotate plugin how to display the large image. The option values are:

      • default – The large image is displayed above or below the thumbnails.
      • anim-border – The border around the large image will animate to the new size before the image appears.
      • lightbox – The large image is displayed in a lightbox.

      Note: The imBannerRotater plugin used the jQuery Lightbox plugin to display the lightbox. The gpImageRotate plugin uses the Colorbox plugin. I changed the plugin because I liked the Drupal Colorbox module more than the Lightbox module.

      You must load the colorbox plugin before the gpImageRotate plugin:

      <script type="text/javascript" src="/assets/js/jquery/jquery-1.7.1.min.js"></script> 		
      <script type="text/javascript" src="/assets/js/jquery/jquery.colorbox.js"></script> 		
      <script type="text/javascript" src="/assets/js/jquery/gpimagerotate/jquery.gpImageRotate-0.5.js"></script>
      ?View Code JAVASCRIPT
      // simplegallery with thumbs on the top
      $(document).ready(function(){
          $("#gpImageRotateCntnr").gpImageRotate({
      	mode: 'simplegallery',
      	data_map: {
      		image_name: 'name'
      	},
      	primary_nav: {'display': 'top'},
      	image_url: "/assets/gpimagerotate/portfolio.php",
      	base_path: "/assets/gpimagerotate/bobmarley/"
          });
      });
       
      //simplegallery using lightbox
      $(document).ready(function(){
          $("#gpImageRotateCntnr").gpImageRotate({
      	mode: 'simplegallery',
      	data_map: {
      		image_name: 'name',
      		image_title: 'image_title'
      	},
      	primary_nav: {'thumb_height': '75px'},
      	large_display_mode: 'lightbox',		
              image_url: "/assets/gpimagerotate/portfolio.php",
      	base_path: "/assets/gpimagerotate/bobmarley/"
          });
      });

      Styling the gpImageRotate Plugin

      The styles used with the plugin are dependent upon the mode category. The names of the styles prefixed with gpImageRotate can’t be change (the style name can’t be changed).

      The Stacked Modes

      In stacked mode, there are only two primary styles: The style for the plugin container and a style for the display container (the display container is dynamically created).

      ?View Code JAVASCRIPT
      $(document).ready(function(){
          // #cast is the plugin container
          $("#cast").gpImageRotate({
      	mode: 'fade',
      	interval: '5000',
      	image_url: "/assets/imbannerrotater/rotate.php",
      	base_path: "/assets/gpimagerotate/"
          });
      });

      Fade, Squeeze, Zoom, and Pixels Modes

      #cast {
      	/* the position for the plugin container must be set to relative when the mode is set to fade, squeeze zoom, or pixels */
      	position:relative;
      	margin-left:40px;
      	margin-top:20px;
      }
       
      .gpImageRotate-DisplayCntnr {
      	top:0;
      	left:0;
      	position:absolute;
      }

      Blinds and Curtains Mode

      /* the position of the plugin container can be set to float, position:absolute, or position: relative when the mode is set to blinds or curtains */
      #cast {
      	float:left;
      	margin-left:40px;
      	margin-top:20px;
      	height:100px;
      	width:150px;
      }
       
      .gpImageRotate-DisplayCntnr {
      	position:relative;
      	top:0;
      	left:0;
      }

      Linear Modes

      The styling for the linear modes is much more involved.

      ?View Code JAVASCRIPT
      $(document).ready(function(){
          // #gpImageRotateCntnr  is the plugin container. This can be changed to whatever name you like
          $("#gpImageRotateCntnr").gpImageRotate({
      	mode: 'portfolio',
      	interval: 8000,
      	speed: 2000,
      	return_type: 'json',
      	data_map: {
      		image_name: 'name',
      		url_name: 'url',
      		image_title: 'image_title',
      		image_desc: 'image_desc'
      	},
      	primary_nav: {'display': 'top'},
      	side_nav: {'display': 'onload'},
      	image_url: "/assets/gpimagerotate/portfolio.php",
      	base_path: "/assets/gpimagerotate/bobmarley/"
          });
      });

      The styles below is the relevant css for a typical linear category mode display using the default primary navigation.

      #gpImageRotateCntnr {
      	float:left;
      	width:460px;
      	margin-left:40px;
      	margin-bottom:20px;
      }
       
      .gpImageRotate-Primary-Nav {
      	float:left;
      	width:100%;
      	height:15px;
      	margin-bottom:10px;
      	display:none;
      }
       
      .gpImageRotate-Primary-Nav ul {
      	float:right;
      	list-style:none;
      	margin: 5px 0 0 5px;
      	padding:0;
      	width:400px;
      }
       
      .gpImageRotate-Primary-Nav ul li {
      	float:left;
      	display:block;
      	cursor:pointer;
      	height:9px;
      	width:9px;
      	margin-left:5px;
      }
       
      .gpImageRotate-Primary-Nav ul li.gpImageRotate-nav-default {
      	background: url("/assets/gpimagerotate/images/dot-nav-blue2.png") no-repeat;
      }
       
      .gpImageRotate-Primary-Nav ul li.gpImageRotate-nav-default-selected  {
      	background: url("/assets/gpimagerotate/images/dot-nav-blue1.png") no-repeat;
      }
       
      .gpImageRotate-SlideCntnr {
      	position:relative;
      	width:400px;
      	height:400px;
      	overflow:hidden;
      	margin:0;
      	padding:0;
      }
       
      .gpImageRotate-Slider {
      	position:absolute;
      	left:0;
      	top:0;
      	width:5000px;
      	margin:0;
      	padding:0;
      }
       
      a.gpImageRotate-PrevBtn, a.gpImageRotate-NextBtn {
      	position:absolute;
      	background-image: url("/assets/gpimagerotate/images/image_rotate_side_nav.png");
      	top:200px;
      	width:34px;
      	height:68px;
      	opacity: 0.7;
      	cursor:pointer;
      }
       
      a.gpImageRotate-PrevBtn {
      	left:0;
      	background-position:0 0;
      }
       
      a.gpImageRotate-NextBtn {
      	right:0;
      	background-position: 34px 0;
      }
       
      .gpImageRotate-DisplayCntnr {
      	float:left;
      	margin:0;
      	padding:0;
      	width:400px;
      	height:400px;
      	font-family:Arial, Helvetica, sans-serif;
      }
       
      .gpImageRotate-TextCntnr {
      	color:#fff;
      	position:relative;
      	background: rgba(85, 85, 85, 0.7);
      	display:none;
      	height:120px;
      }
       
      .gpImageRotate-TextCntnr h2 {
      	color:#fff;
      	font: 16px bold Arial, Helvetica, sans-serif; 
      	text-align:center;
      	line-height:24px;
      }
       
      .gpImageRotate-TextCntnr p {
      	color:#fff;
      	font: 12px Arial, Helvetica, sans-serif;
      	margin:7px; 
      }

      To use the thumb navigation instead of the default navigation, the styles change somewhat:

      #gpImageRotateCntnr {
      	float:left;
      	width:400px;
      	margin-left:40px;
      	margin-bottom:20px;
      }
       
      .gpImageRotate-Primary-Nav {
      	float:left;
      	/* specify height and width */
      	width:400px;
      	height:40px;
      	margin-bottom:10px;
      	display:none;
      	background-color:#727272;
      }
       
      .gpImageRotate-Primary-Nav ul {
      	float:left;
      	list-style:none;
      	margin: 5px 0 0 0;
      	padding:0;
      	width:400px;
      }
       
      .gpImageRotate-Primary-Nav ul li {
      	float:left;
      	display:block;
      	cursor:pointer;
      	margin-left:5px;
      	padding:0;
      }
       
      .gpImageRotate-Primary-Nav ul li.gpImageRotate-nav-thumb img {
      	border: thin solid #000;
      }
       
      .gpImageRotate-Primary-Nav ul li.gpImageRotate-nav-thumb-selected img {
      	border-color:#F0A000;
      }
       
      .gpImageRotate-Primary-Nav ul li.gpImageRotate-nav-thumb img:hover {
      	border-color:#0000FF;
      }
       
      .gpImageRotate-SlideCntnr {
      	position:relative;
      	width:400px;
      	height:400px;
      	overflow:hidden;
      	margin:0;
      	padding:0;
      }
       
      .gpImageRotate-Slider {
      	position:absolute;
      	left:0;
      	top:0;
      	width:5000px;
      	margin:0;
      	padding:0;
      }
       
      a.gpImageRotate-PrevBtn, a.gpImageRotate-NextBtn {
      	position:absolute;
      	background-image: url("/assets/gpimagerotate/images/image_rotate_side_nav.png");
      	top:200px;
      	width:34px;
      	height:68px;
      	opacity: 0.7;
      	cursor:pointer;
      }
       
      a.gpImageRotate-PrevBtn {
      	left:0;
      	background-position:0 0;
      }
      a.gpImageRotate-NextBtn {
      	right:0;
      	background-position: 34px 0;
      }
      .gpImageRotate-DisplayCntnr {
      	float:left;
      	margin:0;
      	padding:0;
      	width:400px;
      	height:400px;
      	font-family:Arial, Helvetica, sans-serif;
      }
      .gpImageRotate-TextCntnr {
      	color:#fff;
      	position:relative;
      	/*top:-120px;*/
      	background: rgba(85, 85, 85, 0.7);
      	/*height:120px;*/
      	display:none;
      	height:120px;
      }
       
      .gpImageRotate-TextCntnr h2 {
      	color:#fff;
      	font: 16px bold Arial, Helvetica, sans-serif; 
      	text-align:center;
      	line-height:24px;
      }
      .gpImageRotate-TextCntnr p {
      	color:#fff;
      	font: 12px Arial, Helvetica, sans-serif;
      	margin:7px; 
      }

      SimpleGallery Mode

      The styling for simplegallery mode is similar to the linear category modes.

      #gpImageRotateCntnr {
      	float:left;
      	width:400px;
      	margin-left:40px;
      	margin-bottom:20px;
      }
       
      .gpImageRotate-Primary-Nav {
      	float:left;
      	width:400px;
      	height:40px;
      	margin-bottom:10px;
      	background-color:#727272;
      }
       
      .gpImageRotate-Primary-Nav ul {
      	float:left;
      	list-style:none;
      	margin: 5px 0 0 0;
      	padding:0;
      	width:400px;
      }
       
      .gpImageRotate-Primary-Nav ul li {
      	float:left;
      	display:block;
      	cursor:pointer;
      	margin-left:5px;
      	padding:0;
      }
       
      .gpImageRotate-Primary-Nav ul li.gpImageRotate-nav-thumb img {
      	border: thin solid #000;
      }
       
      .gpImageRotate-Primary-Nav ul li.gpImageRotate-nav-thumb-selected img {
      	border-color:#F0A000;
      }
       
      .gpImageRotate-Primary-Nav ul li.gpImageRotate-nav-thumb img:hover {
      	border-color:#0000FF;
      }
       
      .gpImageRotate-SlideCntnr {
      	position:relative;
      	width:400px;
      	height:400px;
      	overflow:hidden;
      	margin:0;
      	padding:0;
      }
       
      .gpImageRotate-Slider {
      	position:absolute;
      	left:0;
      	top:0;
      	width:5000px;
      	margin:0;
      	padding:0;
      }
       
      a.gpImageRotate-PrevBtn, a.gpImageRotate-NextBtn {
      	position:absolute;
      	background-image: url("/assets/gpimagerotate/images/image_rotate_side_nav.png");
      	top:200px;
      	width:34px;
      	height:68px;
      	opacity: 0.7;
      	cursor:pointer;
      }
       
      a.gpImageRotate-PrevBtn {
      	left:0;
      	background-position:0 0;
      }
       
      a.gpImageRotate-NextBtn {
      	right:0;
      	background-position: 34px 0;
      }
       
      .gpImageRotate-GalleryLargeCntnr {
      	float:left;
      	border: solid thin #fff;
      }
       
      .gpImageRotate-DisplayCntnr {
      	float:left;
      	margin:0;
      	padding:0;
      	width:400px;
      	height:400px;
      	font-family:Arial, Helvetica, sans-serif;
      }
       
      .gpImageRotate-TextCntnr {
      	color:#fff;
      	position:relative;
      	background: rgba(85, 85, 85, 0.7);
      	display:none;
      	height:120px;
      }
       
      .gpImageRotate-TextCntnr h2 {
      	color:#fff;
      	font: 16px bold Arial, Helvetica, sans-serif; 
      	text-align:center;
      	line-height:24px;
      }
       
      .gpImageRotate-TextCntnr p {
      	color:#fff;
      	font: 12px Arial, Helvetica, sans-serif;
      	margin:7px; 
      }

      That’s it. The gpImageRotate plugin should be able to handle most of your image rotation display needs. To view a demo of the gpImageRotate plugin, go to: http://grasshopperpebbles.com/demos/.

      The plugin can be downloaded from GitHub.

      I hope to have the Drupal Module available soon. Enjoy.

Be Sociable, Share!

Checkout My New Site - T-shirts For Geeks