jQuery addCaptions


/ Published in: jQuery
Save to your folder(s)

A simple script that will add captions to images and allow for easy styling.


Copy this code and paste it in your HTML
  1. /**
  2.  * jQuery addCaptions 0.2
  3.  *
  4.  * Adds the ability to add captions around images
  5.  *
  6.  * Changelog:
  7.  * 0.2
  8.  * Added exlude option
  9.  * Fixed attribute search order
  10.  * Changed the elemnts to find to bea jQuery selector
  11.  *
  12.  * 0.1
  13.  * Initial Version
  14.  */
  15. /**
  16.  * addCaptions
  17.  *
  18.  * Function to wrap an image in a styled div containing the image caption
  19.  *
  20.  * @param object options Object containing any options for processing
  21.  * @return void
  22.  * @author Dom Hastings
  23.  */
  24. (function($) {
  25. $.fn.addCaptions = function(options) {
  26. // the default settings
  27. var settings = {
  28. // attributes to check for caption (these are checked in order)
  29. attributes: [
  30. 'longdesc',
  31. 'title',
  32. 'alt'
  33. ],
  34.  
  35. // exclude any images that match these
  36. exclude: {
  37. // property to match
  38. src: [
  39. // condition (regexp or string)
  40. /recaptcha/
  41. ]
  42. },
  43.  
  44. // whether or not to add the caption box to images with no caption
  45. allowBlankCaption: true,
  46.  
  47. // the elements to find within the container (can be any valid find() selector)
  48. selector: 'img',
  49.  
  50. // remove the float directly on the element
  51. removeFloat: true,
  52.  
  53. // options for respective elements
  54. containerElement: 'div',
  55. containerClass: 'caption',
  56. //
  57. titleElement: 'p',
  58. titleClass: 'caption-title',
  59. //
  60. imageClass: ''
  61. //
  62. }
  63.  
  64. // update the settings, if the options aren't set, use an empty object
  65. $.extend(settings, options || {});
  66.  
  67. // get all the images in the current element
  68. var images = $(this).find(settings.selector);
  69.  
  70. // if there are some images
  71. if (images.length) {
  72. // loop through each
  73. $.each(images, function() {
  74. // check for any exclusion conditions met
  75. for (var property in settings.exclude) {
  76. // check the element has the specified property
  77. if (this[property]) {
  78. // loop through all the exclusion conditions
  79. for (var i = 0; i < settings.exclude[property].length; i++) {
  80. // if it matches
  81. if (this[property].match(settings.exclude[property][i])) {
  82. // return the function
  83. return;
  84. }
  85. }
  86. }
  87. }
  88.  
  89. // get the parent object
  90. var parent = $(this).parent().get(0);
  91.  
  92. // check it's not already got a caption
  93. if (parent.tagName.toLowerCase() == settings.containerElement && $(parent).hasClass(settings.containerClass)) {
  94. return true;
  95. }
  96.  
  97. // initialize the caption variable
  98. var caption = '';
  99.  
  100. // determine the image caption
  101. for (var i = 0; i < settings.attributes.length; i++) {
  102. caption = $(this).attr(settings.attributes[i]);
  103.  
  104. if (caption) {
  105. break;
  106. }
  107. }
  108.  
  109. // if the caption is empty, return unless explicitly allowed
  110. if (!caption && !settings.allowBlankCaption) {
  111. return true;
  112. }
  113.  
  114. // get the float
  115. var location = $(this).css('float');
  116.  
  117. // remove the float
  118. if (settings.removeFloat) {
  119. $(this).css('float', 'none');
  120. }
  121.  
  122. // if we;ve got to add a class...
  123. if (settings.imageClass) {
  124. $(this).addClass(settings.imageClass);
  125. }
  126.  
  127. // wrap the image in a div with the correct styling
  128. $(this).wrap('<' + settings.containerElement + ' class="' + settings.containerClass + '" style="float: ' + location + ';"></' + settings.containerElement + '>');
  129.  
  130. if (caption) {
  131. // add the caption in after the current element
  132. $(this).after('<' + settings.titleElement + ' class="' + settings.titleClass + '">' + caption + '</' + settings.titleElement + '>');
  133. }
  134. });
  135. }
  136. }
  137. })(jQuery);

URL: http://www.dom111.co.uk/blog/coding/jquery-addcaptions-0-2-minor-update/139

Report this snippet


Comments

RSS Icon Subscribe to comments

You need to login to post a comment.