###Demos
###Usage (default settings shown)
$(function(){
$('#todaysImage').todaysImage({
// Data
data : '', // data object: array, json or jquery object array
// dataObject contains the date, image and comment names as seen in the data
// (key names in JSON, or if the object is an array, use the index [0,1,2])
// The data object order must always be: 'dates', 'image url' and 'comment'
dataObject : ['dates','image','comment'],
// content added to the target element
content : '<img src="{url}" title="{comment}" alt="{url}"><p class="comment">{comment}</p>',
// language options
dayEndings : 'st|nd|rd|th', // 1st, 2nd, 3rd, 4th, etc. (e.g. 1stMon & 3rdThu)
dayLast : 'last', // last weekday/weekend of the month
dayWeek : ['sun','mon','tue','wed','thu','fri','sat'], // days of the week (case insensitive)
monthFirst : true, // true: U.S. date format mm/dd/yy, if false: dd/mm/yy format applied
// debugging options
locked : true, // prevent debug mode onscreen output if true (debug setting from browser URL only).
debug : false, // set debug mode.
defaultDate : '12/25/2011' // date used if setting debug mode but no default date.
});
});
###Data Sources
Obtain data from HTML tags/attributes, array or JSON (inline or remote). Please refer to the demo source or my blog post for more detailed information on data source setup and targeting with the script
###Methods
####Get & Set
// Get current image data
// (e.g. 2 = third (zero based index) image from the total number of matching images)
var current = $(image).data('todaysImage').currentImage(); // returns array ['dates','image url','comment']
// Get/Set current image from events within the date range
var current = $(image).data('todaysImage').currentImage(1); // returns array ['dates','image url','comment']
####Other
// Get the current number of the events that match the date range
var currentNumber = $(image).data('todaysImage').currentNumber();
// Show a random image from within the matching date range & returns array ['dates','image url','comment']
var current = $(image).data('todaysImage').randomImage();
// Show all images (added under current image)
$(image).data('todaysImage').showAll();
###Change Log
####Version 1.1.2
- Fixed a problem with events that cross a year (e.g. 12/31-1/5). It was improperly adding one to the year.
- Found a problem when including an event that crosses a year boundry using full date strings (12/31/2011-1/5/2012).
- The date is improperly parsed and does not work at all.
- When I have time, I will just completely rewrite the date comparison code.
####Version 1.1.1
- Updated to allow adding a specific date.
- Previously, the year at the end of the date would be ignored since it assumed the event would be repeated yearly. Now any event with a specific year will only be shown during that year.
- Set a single date: "1/18/2012".
- Or a date range: "2/18/2012-2/19/2012".
- Removed GPLv3 from plugin licenses. This plugin is now only under an MIT license.
####Version 1.1
- Updated the plugin so it is now initialized on a container instead of the actual image.
- Updated all demo pages:
- HTML5 baby!
- Debug mode can now easily be enabled.
- Random image button added. The image is selected from the images that fall within the date range.
- Added
content
option:-
It contains the HTML and place holder strings which are replaced with the URL or comment associated with the image
content : '<img src="{url}" title="{comment}" alt="{url}"><p class="comment">{comment}</p>'
-
{url}
place holder is replaced with the image url. -
{comment}
place holder is replaced with the image comment. -
This option replaces the
comment
option and removes the need for thenoImageTitle
option.
-
- Added
todays-image.css
file which includes basic styling for the image container, image, comment and debugging content. - Removed
comment
andnoImageTitle
options. Replaced bycontent
option. - Removed
debugId
anddebugElement
options as the debug content is now appended to the content. - Removed
inRangeColor
andnotInRangeColor
options because the styling is now done using css. See the todays-image.css file.
####Version 1.0
- Initial Commit - added to Github
For more details, see my blog entry and view the demo source.