为图片添加标题说明最好的jQuery插件和CSS3框架
Label.css
I want to start by introducing label.css as one of the best CSS3 image caption libraries. This allows you to add class names onto captioned images which will then be updated in the HTML. You can force captions to appear anywhere over the image, even in the corners. Plus the label.css library makes it easy to hide captions until the user hovers over an image. This technique is great because sometimes you will want captions to display as static text on the page, while at other times the hidden animation effects are more important.
Hongkiat Image Captions
What I like most about this Hongkiat article is that the various image captions will all be implemented using different CSS3 techniques. They are all coupled into one big caption gallery, and you can cherry pick out your favorite animations to build a brand new interface. The codes have all been tested within modern browsers and they support all of the major CSS3 prefixes.
However the biggest problem some users will have with this script is that it does not follow the figure/figcaption HTML structure. All of the caption content is held inside a span within a container div. Which obviously still renders perfectly fine, but it does not markup the exact type of content. But it only takes 5-10 minutes of updating the elements to get it working in a more formatted structure. Check out the live demo to see these captions in action.
Animated HTML5 Captions
The HTML5 figcaption example from Coalmarch is a beautifully simple CSS3 image caption tutorial. You can follow the steps in just a few minutes and have a brilliant layout displaying hidden captions upon hover. The script itself does include a small amount of jQuery, but it is completely plausible to replace this and use CSS3 transition effects instead.
Slide-In Image Captions
The CSS-Tricks blog is very well known amongst the web design community. Their tutorial on creating sliding image captions has been tested in a number of browsers and works flawlessly. I have been really impressed with this demonstration, not just because of the effects but also the standard HTML syntax. The figure and figcaption elements are not just implied for good measure. It is to help the browser differentiate context between the various page elements. Check out the live demo and see this effect for yourself.
jQuery
The largest benefit to using jQuery is a much higher percentage of browser support. Anybody with JavaScript enabled should be viewing your image captions exactly the same as any other browser. CSS3 is just easier because some developers would rather not get into scripting. But these solutions are just as important and they contribute greatly into the frontend experience.
Caption.js
I just found Caption.js a little while ago and this library has stood out as an excellent source for web developers. The script will target images based on your own jQuery selector(classes, IDs, etc) and it will automatically include the figure and figcaption elements. This is crucial because the final page render will be displayed properly, along with the help of some CSS positioning. Caption.js is open source and free to contribute or download off Github.
Capty
The Capty plugin is a bit different from Caption.js in that the default settings will hide your initial text. As users hover the image it will slide up or fade into the caption, then re-hide once the user is not hovering anymore. It’s great because you actually have the option to keep this caption fixed or hidden, plus a myriad of additional plugin options.
Check out the Capty live demo page to see a few examples. These also provide code snippets that you can tie into your own webpage. Since you can pass the caption text via JavaScript, it is possible to include links and other semantic HTML right inside the image.
jQuery.imageCaption
Now I would say jQuery.imageCaption is the perfect solution for developers running a CMS engine. This plugin is super easy to customize and quickly pulls out captions based on the image’s alt text. Similarly this will render out the figure and figcaption elements, which is great for SEO benefits.
By calling the function imageCaption() you do not need to pass any parameters into the call. This will still render properly on the page and you can apply this into any WordPress blog post. Similarly any classes added onto the img element will transfer to the containing
jQuery.caption
jQuery.caption is another solution with a very simple initiation. Many of these jQuery plugins are plug-and-play where you just need to initiate the function by targeting all of your captioned images. Naturally the jQuery.caption plugin will automatically implement figure and figcaption elements, plus you may customize the caption text with HTML elements. The project’s Github page delves into greater detail about the various options you might want to use.
Captionate
Captionate is definitely an underrated open source project because of all the other solutions out there. It was developed by North Krimsly for use in various CMS engines. You can find a tutorial guide explaining the process to implement Captionate in your own website.
Basically you will write an HTML5 img element with the class .caption and this will get picked up by the jQuery script. The alt attribute text then gets transferred into a figcaption element and written into the HTML. Skim through the example page and you can see the Captionate syntax is rather minimalist in comparison to other solutions.
HCaptions
Delving into this final example I think HCaptions may hold a broader spectrum than just images. This jQuery plugin was developed for handling all caption content which can be rendered into HTML. Check out the live demo page and you will see a nice collection of examples. Similarly the various options allow you to control the speed and positioning of each caption. There are some better solutions for solely managing HTML images, but the HCaptions plugin does serve a terrific purpose for captioning other standard webpage elements.