https://github.com/dynamicdriverepo/imagefigurecaptioneffects

This script transforms any image into a HTML5 compliant figure element with a nice caption.
https://github.com/dynamicdriverepo/imagefigurecaptioneffects

Last synced: about 1 month ago
JSON representation

This script transforms any image into a HTML5 compliant figure element with a nice caption.

• Host: GitHub
• URL: https://github.com/dynamicdriverepo/imagefigurecaptioneffects
• Owner: dynamicdriverepo
• Created: 2015-06-26T23:27:20.000Z (over 9 years ago)
• Default Branch: master
• Last Pushed: 2015-06-26T23:27:26.000Z (over 9 years ago)
• Last Synced: 2023-04-06T14:06:58.250Z (over 1 year ago)
• Language: JavaScript
• Size: 102 KB
• Stars: 0
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# Image Figure Caption effects #

*Description:* Images may tell a thousand words, but with a nice caption it can tell a few more. This script transforms any image into a HTML5 compliant figure element with a nice caption. It also works on existing figure elements. Choose from 7 different effects to unveil the caption in style. Captions can be dynamically defined or literally inside the figure element. For captions that exceed the height of the image, scrollbars are added to make the hidden portion accessible.

## Directions ##

*Step 1:* This script uses the following external files:

+ jQuery 1.113 or above (served via Google CDN)

+ TweenMax.min.js (served via CDN)

+ figurecaptions.css

+ figurecaptions.js

*Step 2:* Add the below code to the HEAD section of your page:

	

	

	

	

	

	

	

	

	/***********************************************

	* Image Figure Caption effects- (c) Dynamic Drive DHTML code library (www.dynamicdrive.com)

	* This notice MUST stay intact for legal use

	* Visit Dynamic Drive at http://www.dynamicdrive.com/ for this script and 100s more

	***********************************************/

	

	

	

	

	

	$(function(){ // on DOM load

		$('#eg1').addCaption({ // very long caption

			caption: '<p>An awesome picture caption!</p><p>An awesome picture caption!</p><p>An awesome picture caption!</p><p>An awesome picture caption!</p><p>An awesome picture caption!</p>'

		})

	

		$('#eg2').addCaption({ // dynamic caption

			fx: 'zoomin',

			caption: 'An awesome picture caption!'

		})

	

		$('#eg3').addCaption({

			fx: 'dualpanels',

			caption: 'An awesome picture caption!'

		})

	

		$('#eg4').addCaption({ // caption from container's "title" attribute

			fx: 'dualpanels2',

			caption: 'title'

		})

	

		$('#eg5').addCaption({

			fx: 'pushup',

			caption: 'title'

		})

	

		$('#eg6').addCaption({ // caption from figure element's figcaption element

			fx: 'flipopen'

		})

	

		$('#eg7').addCaption({

			fx: 'flipreveal'

		})

	

	})

	

	

*Step 3:* Add the below to the BODY section of your page

	 

	

	

	

	

	

	

	

	

	

	

			

		An awesome picture caption! A link

	

	

	

			

		An awesome picture caption! A link

	

## Image Figure Caption effects ##

See script project page for additional details on setup and documentation: