ImageHighlighter v1.01

ImageHighlighter is an updated version of my original imgHighLighter plugin with lot of improvements! Most are under the hood so you probably won't see too much of a difference on the surface.

This plugin allows you to highlight a portion of an image when you hover over a link. In the image below, the mouse is hovering over the different links and you can see the corresponding portion of the image becomes highlighted (there is an animate gif below, but just click on the image to go to the demo page).
I set up an demo page here.

Download: Uncompressed | Minified | Zipped Demo | Github

I have tested this plugin in IE8, Firefox and Chrome. Please leave me feedback if you any problems with how it works or if it doesn't work in other browsers.

7/6/2010: Updated this post to describe v1.01 where the editor portion of the script was moved into a plugin extension. And support for jCrop was added to allow selecting the entire box instead of just getting the mouse coordinates. Check out the updated demo page!

Setup

• This plugin requires jQuery.
• HoverIntent is an optional plugin, this plugin will use it's functionality if it is included.
• Follow this basic template with a quick summary for each image you want to apply imageHighlighter functionality. For more details, go to the specific section.
  
  HTML
  

  <div>
  <ul class="imgHL">
  <li>
  <a href="#" rel="sx1,sy1,ex2,ey2">Item #1</a>
  <p>Description for item #1</p>
  </li>
  <li>
  <a href="#" rel="sx1,sy1,ex2,ey2">Item #2</a>
  <p>Description for item #2</p>
  </li>
  <li>
  <a href="#" rel="sx1,sy1,ex2,ey2">Item #3</a>
  <p>Description for item #3</p>
  </li>
  </ul>
  <br>
  <img id="imgHL" src="myimage.jpg" alt="" />
  <div class="description"></div>
  </div>

  • In the HTML above, the highlight links are all wrapped in a div with a class name "imgHL" to make them easier to target.
    
  • The highlight links (<a>) must contain a rel attribute with the highlight box coordinates (see the Highlights section below for more detail).
    
  • Each link/description pair is wrapped together (inside an <li> in this case). See the Descriptions section below for more details.
    
  • The image is the central element. Once the script is initialized, the image will contain all of the plugin information. It is also the target of both the imageHighlighter and imageHighlighterEditor scripts.
  • The highlight description will be placed into the div with class "description". You can target a different class/Id when you modify the script options.
    
    
  CSS (basic example)
  

  /* List link: currently hovered/selected */
  a.current { color: #fff; }
  
  /* Hide & Position Descriptions */
  .imgHL p { display: none; }
  .description { margin: 1em auto; clear: both; width: 450px; height: 2.4em; }
  
  /* General imageHighlighter (overlay and highlight) */
  .imageHighlighter, .imgHLDark, .imgHLLight, .imgHLOverlay { padding: 0; margin: 0; } /* overlay and highlight divs */
  .imgHLOverlay { background: #000; opacity: .5; filter: alpha(opacity=50); } /* overlay color & opacity *

  • When a link is hovered and the image reveals the highlight box, the class "current" is applied to the link. You can use this to style the link and make it stand out.
  • The css definition ".imgHL p" hides the descriptions that appear under the image (in this example). The description is moved into the ".description" element when the highlight link is hovered.
  • The description class can be placed anywhere on the page; but because of this, the class name ".description" must be unique for each imageHighlighter instance on the page. You can easily modify this class name using the plugin options.
  • The general imageHighlighter definitions apply to the div wrapping the image (.imageHighlighter), the overlay (.imgHLOverlay & .imgHLDark) and the highlighted box (.imgHLLight). As you can see, the overlay has a background color and 50% opacity to darken the image behind the highlight. This can be set to transparent here in the CSS or disabled using the script.
    
    
  Javascript
  

  /* window load ensures all images are loaded */
  $(window).load(function(){
  $('#imgHL').imageHighlighter({
  list : '.imgHL a'
  });
  })

  • This script uses "window.load" instead of "document.ready" to ensure that all images have been loaded. This is necessary as the script needs the image dimensions in order to initialize properly.
  • In this basic example, the highlight links are targeted using the ".imgHL" div that wraps the entire list. The default list setting is "a" which is much too general to use, but the script will ignore any link that doesn't contain a rel tag.
  • There are more options that can be set. For a full list and detailed descriptions, look under the customizing/options section!
    
    
• Highlights: The highlight link's "rel" attribute contains all the information needed for the highlights.
  

  rel="sx1,sy1,ex2,ey2"
  sx1	Starting X position of the highlight box	} top left corner
  sy1	Starting Y position of the highlight box
  ex2	Ending X position of the highlight box	} bottom right corner
  ey2	Ending Y position of the highlight box

  You can change the highlight properties of each image using: borderColor, borderSize & borderType described in the Customizing/Options section below.
  
  
• Image: The image must be targeted when initializing the script. You could target the class ('.imgHL') in the example above and the script will initialize once it has found the image from that group of selections. The image contains all of the data associated with this plugin, from using the built in methods to targeting custom events.
  

  $("#imgHL").imageHighlighter();

• Descriptions: Each link/description pair should be wrapped together. In the demo where the links are in a paragraph, the link/description pairs are wrapped in a span:
  

  <span><a rel="sx1,sy1,ex2,ey2">Item #1</a><span class="desc">Description for Item #1</span></span>

  In the other example, the pair are wrapped inside of a list (<li>). Make sure that the descriptions are hidden and targeted by the "descrip" plugin option. The script will look inside the link highlight wrapper, so you don't necessarily have to have a specific class assigned to it as long as the element is unique (e.g. don't have two <p>'s inside with the highlight link otherwise the contents of both will be displayed in the description.
  
  The second part of the description is set using the "descripClass". The descriptions for the highlight will appear inside an element with this class, when hovering over a link. It can be located anywhere on the page, but the class/id needs to be set in the plugin options and unique for each instance of the plugin.
  
  
• Overlay: The overlay covers the image (darkens the background) to make the highlighted portion stand out more. You can adjust the opacity of this overlay in the CSS and you can turn off the overlay functi0nality by setting the overlay option to false.
  

Customizing / Options
This plugin has the following default options, so you will only need to include the line below if you want to change the default:

$("#imgHL").imageHighlighter({
borderColor : "#fff",         // highlight border color
borderSize  : 4,              // highlight border thickness
borderType  : "solid",        // highlight border type
list        : "a",            // links that contain the highlight coordinates (e.g. "li.imgHL a")
descrip     : "p",            // HTML tag sibling of the link, that contains the description text (hidden) (e.g. "p.desc")
descripClass: ".description", // HTML tag where description text is shown (placeholder)
overlay     : true,           // display an overlay to make the highlight stand out
current     : "current",      // class applied to link currently used to highlight the image
hoverTimeout: 100,            // hoverIntent timeout (only applied if hoverIntent plugin is loaded)
zindex      : 10              // z-index of highlight box, overlay is automatically made 1 less than this number
})

Methods
You can use the following methods to get and set the highlighted content. Note that these methods must target the image.

• Get: In the following example, the variable current will contain the current link object that has been highlighted. If nothing is currently highlighted, the script will return null.
  

  var $current = $('#imgHL').data('imageHighlighter').highlight();

• Set/Get:

Use a number (indexed from one: first, second, etc) - if the nth link doesn't exist, it will return null.


var $current = $('#imgHL').data('imageHighlighter').highlight(1); // select the first link

Search for the case-sensitive text within the link (uses the jQuery ":contains()" selector) - if the text is not found, the script will return null.


var $current = $('#imgHL').data('imageHighlighter').highlight("frames");

Search for the link with a class or ID - if the selector is not found, the script will return null.


var $current = $('#imgHL').data('imageHighlighter').highlight(".box");

Edit Mode

• Updated in v1.01:
  
  • The edit mode script was moved into an extension for the plugin. This was done because the edit script is not required once the coordinates are obtained and the script is deployed on your site.
    
  • Additionally, the script was made to work with the Jcrop plugin (included with the demo file zip) allowing you to use a resizable selection box to more easily get the coordinates.
  • If you click on the coordinates, the coordinates (contained in an input tag) become selected, so you can more easily copy them.
    
    
• Edit mode for this plugin should make it easier to obtain the coordinates of the highlight box - the coordinates added to the highlight link rel attribute.
  
  
• As of v1.01, edit mode can be activated by:
  
  
  1. Including the imageHighlighterEditor script & the jCrop plugin script, if desired.
     
  2. Set up the editor by calling the script on the same image(s) as the imageHighlighter script. You can generalize the call by targeting the ".imageHighlighter" class (applied to a div that wraps the image after the imageHighlighter script is applied to it). There is only one options, seen below:
     

     // Enable the editor and use the Jcrop plugin, if it is available
     $('div.imageHighlighter img').imageHighlighterEditor();
     
     // Enable the editor, but don't use the Jcrop plugin (even if it has been loaded)
     $('div.imageHighlighter img').imageHighlighterEditor({ useJcrop: false });

  3. Now activate or deactivate edit mode by double clicking on the image. A green bar (styled in the CSS) will appear below the image which will show the mouse coordinates (default editor) or the box coordinates (Jcrop plugin added).
     
     
• With the editor active:
  
  
  • Default editor - move the cursor over the image to find the coordinates. Then clicking on the image will lock the coordinate display and make copying these numbers easier.

    Mouse x,y coordinates (click to lock/unlock) : x,y

  • Jcrop plugin installed - single click anywhere on the image to make the a corner of the box, then drag your mouse any direction to create a resizeable box. The coordinates of the upper left and bottom right corners of the box will display under the image:

    Current box coordinates : x1,y1,x2,y2

  • Click on the coordinates (they are inside an input tag). The contents will automatically be selected, but not copied.
    
  • When you hover over a highlight link, the highlight link name and coordinates from that link is displayed above the coordinate bar.
    

Bugs / Suggestions

• When the window is repositioned, the highlights may be off until it is refreshed again when you hover over a link (especially while in edit mode), and sometimes you'll need to reload the page.
• To make suggestions or report any bugs please email me at wowmotty at g mail dot com.
  

Moving Boxes Updated

Update (10/8/2011): A plugin is now available for WordPress for MovingBoxes v2.1.4, which you can download here or search for 'movingboxes' in your 'Install Plugins' page of your site admin section. More features and options will be added once craftyhub, the author, gets settled in :)

Update (10/13/2010): Version 1.5 now available!

I've updated the Moving Boxes script by Chris Coyier by converting the script into a plugin so now you can add multiple Moving Boxes blocks on the page at one time.

I haven't done extensive testing of the script, so if you find any bugs please feel free to contact me.

Download: uncompressed | minified | zipped file | github (see a demo!)

Options

• Use these key : value pairs as follows; Note that the last key : value pair does not have a trailing comma

<script type="text/javascript">
$(function(){
$(selector).movingBoxes({ key: value, key: value, key: value })
})
</script>

Key	Value (default shown)	Description
startPanel	1	Choose the initial panel to show in the scroll window.
width	800	Overall width of movingBoxes.
panelWidth	.50	Current panel width adjusted to 50% of movingBoxes width.
reducedSize	.8	Non-current panel size: 80% of current panel size.
imageRatio	4/3	Image ratio set to 4:3. Wide screen would be 16:9 (16/9).
speed	500	Animation time in milliseconds for the scroll and expanding of the panel.
hashTags	true	If true, hash tags (browser history) are enabled.
wrap	false	If true,the panel will "wrap" at the ends.

Methods

Panels are numbered as a standard index (1st panel number is one, second is two, etc.).

• Get number of currently selected panel:

  $('.slider').data('movingBoxes').currentPanel();

• Set currently selected panel:

  $('.slider').data('movingBoxes').currentPanel(2);

External controls:

$('.slider').data('movingBoxes').goForward(); // go forward one slide (if possible)
$('.slider').data('movingBoxes').goBack();    // go back one slide (if possible)

Progress Indicator

I wrote this plugin to allow more control over the progress indicator. To the right is an animated gif progress indicator. All you can do is show or hide this image. This plugin allows you to make a similar indicator that you can fully control. The plugin will animate both text (including bullets) or images, I guess you could also animate embedded objects, but I haven't tested this. The reason I call this progress indicator dynamic is you can modify or update the objects in the indicator at any time (e.g. replace images or text while the indicator is active). I'll make a demo of this when I have more time :)

In the demo below, you can start or stop the timer to make the progression indicator simulate the animated image or you can move the slider to animate the indicator.



Download: uncompressed | minified | zipped file | github
(zip includes demo; go to link, then download... I'm not sure why you can't download it directly)

Setup

• CSS (basic setup)
  

  .progress {
  position: relative;
  top: 0;
  left: 0;
  width: 200px;
  height: 200px;
  overflow: hidden;
  }
  .progress span {
  position: absolute;
  left: -50px; /* hide spans until initialized */
  top: 0;
  padding: 0;
  margin: 0;
  border: 0;
  }
  .display {
  position: absolute;
  top: 95px;
  left: 90px;
  }

• HTML
  

  <div class="progress">
  <!-- this displays the percent value, position in the middle with CSS -->
  <div class="display"></div>
  <!-- add as many <span>s as you want, add any text or image inside -->
  <span>&bull;</span>
  <span>&bull;</span>
  <span>&bull;</span>
  <span>&bull;</span>
  <span>&bull;</span>
  <span>&bull;</span>
  </div>

• Script - Initialization
  

  <script type="text/javascript" src="jquery.progressindicator.min.js"></script>
  <script type="text/javascript">
  $(document).ready(function(){
  // initialize: initialValue is uaually zero, and a full list of "options" can be found below.
  $(selector).progressIndicator( initialValue, options );
  })

List of Default Settings:

• Use these key : value pairs as follows; Note that the last key : value pair does not have a trailing comma and values that use true or false (Boolean values) should not be in quotes.
  

  $(selector).progressIndicator( initialValue, { key: value, key: value, key: value })

  Key	Value (default shown)	Description
  max	100	The circle is split into this max number of increments (default set to 100 to match a percentage going from 0-99).
  radius	50	Sets the radius of the circle in pixels measured from the centerX and centerY position (middle).
  centerX	100	Positions the center of the circle 100 pixels from the left edge of its container.
  centerY	100	Positions the center of the circle 100 pixels from the top edge of the container.
  clockwise	true	Sets the direction of the rotation. Clockwise if true and counter (or anti for you British folk) clockwise if false.
  startPosition	0.75	This may not make sense if you don't know the coordinate system, but basically zero is the far right side of the circle or the x-y coordinates of ( x=radius, y=0 ) . So if you want to have the indicator start with the "zero" at the top of the circle, you need to start from 75% or 3/4 of your way around the circle. So basically, set 0 to start on the right, .25 (25%) for bottom, .5 (50%) for left and .75 (75%) would be the top of the circle where ( x = 0 , y = radius ).
  sizeStart	80	Sets the starting size of the element to 80 pixels. This sets the font size, the height & width of any element inside the span (like an image)
  sizeDec	4	Sets how much to decrement the size of the next element from the starting size. Try to avoid making the decrement size that would cause the last element to be too small or negative (for example: these settings would not look good, 10 spans inside the progress indicator (in the HTML), sizeStart = 20, sizeDec = 2; this would make the last span element have a size of zero (20 - 2 * 10 = 0).
  showValue	true	Adds the progress indicator value to the "display" class inside the progress div. If you want to be tricky, add the display class to one of your spans to have the indicator move around with the other elements.
  timerActive	false	Initialize progression indicator start and stop functions allowing the indicator to move independent of the percent value.
  timerSpeed	20	Sets the setInterval time in milliseconds.
  timerIncrement	1	At each setInterval call, the progression indicator is incremented by this value. Make this number bigger to speed up the animation, but the bigger the number, the more choppy the animation.

Methods

• Get & Set Progression Value
  

  // Get current value (percentage)
  var value = $(selector).data('progressIndicator').getValue();
  
  // Set/Update current value
  $(selector).data('progressIndicator').update( value );

• Animation timer functions (the timerActive option must be true before these will work)
  

  // Start animation timer
  $(selector).data('progressIndicator').start();
  
  // Stop animation timer
  $(selector).data('progressIndicator').stop();
  
  // Reset animation timer (just resets position)
  $(selector).data('progressIndicator').reset();

Examples - Be sure to look at the demo source to see some other examples of what is possible!

• These examples should be wrapped inside of a:
  
  $(document).ready(function(){ ... })
  
  replace the ellipsis (...) with the script in the column below.
  

Action	Script	Notes:
Set up timer, so the start & stop methods are available. And adjust animation speed.	$('.progress').progressIndicator( 0, { timerActive : true, showValue : false, timerSpeed : 20, timerIncrement : 1 });	The zero in the first line sets the initial position of the indicator, it's not really that important for the animation timer mode, but necessary to include. "timerActive" enables the start and stop timer methods. "showValue" is set to false to hide the progression value. "timerSpeed" and "timerIncrement" were adjusted to make the progression animation fairly quick. In the demo they are set to 50 and 5 respectively so you can see how much faster you could make this animation without it being too choppy.
Rotate counter (anti) clockwise & other adjustments	$('.progress').progressIndicator({ clockwise : false, startPosition : .32, sizeStart : 5, sizeDec : -1 });	Setting the clockwise option to false with reverse the indicator rotation. Note that reversing the direction also effects the "startPosition" so you may need to adjust this value as well. This example is from progression3 in the demo and it needs a startPostion of .32 (32%) to move the images to the top... the reason it isn't 25% is because the sizeStart begins small (5 pixels) and the sizeDec is negative so this actually increases the image size as it progresses through the elements. You'll probably end up tweeking these numbers to get the look you want.
Max value	$('.progress').progressIndicator({ max : 200 });	By default, the progress indicator is set to work with percentages.. it really only goes from 0 to 99%, but by changing the max option, you can set a full rotation of the progress indicator to any value. Note, the value, set using the update method, and the max value can be fractions.