Allow an additional image caption (PR #269 followup)

README.md

@@ -75,6 +75,8 @@ loopAtEnd: false, // true will return to the first image after the last image is
 autoplayVideos: false // true will autoplay Youtube and Vimeo videos
 queryStringData: {} // plain object with custom query string arguments to pass/override for video URLs,
 toggleClassOnLoad: '' // CSS class that can be toggled when the slide will be loaded (like 'hidden' of Bootstrap)
+titleAttribute: 'title' // attribute to take the image title from
+captionAttribute: 'data-caption' // attribute to take the image caption from
 useSVG: true
 nextSlide: function(){} // called on next slide, works for next button, arrow keys and touch navigation
 prevSlide: function(){} // called on previous slide, works for previous button, arrow keys and touch navigation

index.html

@@ -61,7 +61,7 @@ <h1>Swipebox<span class="accent">.</span></h1>
 			<div id="try"></div>
 			<ul id="box-container">
 				<li class="box">
-					<a href="demo/images/big-1.jpg" class="swipebox" title="Fog" rel="gallery">
+					<a href="demo/images/big-1.jpg" class="swipebox" title="Fog" rel="gallery" data-caption="Two men fighting their way through the fog and storm. Nasty weather and a pretty long description of an old black'n'white photo.">
 						<img src="demo/images/small-1.jpg" alt="image">
 					</a>
 				</li>
@@ -205,6 +205,8 @@ <h3>Options</h3>
 		afterOpen: null, <span>// called after opening</span>
 		afterClose: function() {}, <span>// called after closing</span>
 		loopAtEnd: false <span>// true will return to the first image after the last image is reached</span>
+		titleAttribute: 'title', <span>// attribute to take the image title from</span>
+		captionAttribute: 'data-caption', <span>// attribute to take the image caption from</span>
 	} );
 
 } )( jQuery );

scss/swipebox.scss

@@ -115,7 +115,7 @@ html.swipebox-html.swipebox-touch {
 	position: absolute;
 	left: 0;
 	z-index: 999;
-	height: 50px;
+	min-height: 50px;
 	width: 100%;
 }
 
@@ -128,10 +128,10 @@ html.swipebox-html.swipebox-touch {
 }
 
 #swipebox-top-bar {
-	top: -50px;
+	bottom: 100%;
 
 	&.visible-bars {
-		transform: translate3d(0,50px,0);
+		transform: translate3d(0,100%,0);
 	}
 }
 
@@ -305,4 +305,9 @@ html.swipebox-html.swipebox-touch {
 	font-size: 15px;
 	line-height: 43px;
 	font-family: Helvetica, Arial, sans-serif;
+
+	div.caption {
+		font-size: 13px;
+		line-height: 20px;
+	}
 }

src/css/swipebox.css

@@ -99,7 +99,7 @@ html.swipebox-html.swipebox-touch {
   position: absolute;
   left: 0;
   z-index: 999;
-  height: 50px;
+  min-height: 50px;
   width: 100%;
 }
 
@@ -112,11 +112,11 @@ html.swipebox-html.swipebox-touch {
 }
 
 #swipebox-top-bar {
-  top: -50px;
+  bottom: 100%;
 }
 #swipebox-top-bar.visible-bars {
-  -webkit-transform: translate3d(0, 50px, 0);
-          transform: translate3d(0, 50px, 0);
+  -webkit-transform: translate3d(0, 100%, 0);
+          transform: translate3d(0, 100%, 0);
 }
 
 #swipebox-title {
@@ -293,3 +293,7 @@ html.swipebox-html.swipebox-touch {
   line-height: 43px;
   font-family: Helvetica, Arial, sans-serif;
 }
+#swipebox-top-bar div.caption {
+  font-size:13px;
+  line-height: 20px;
+}

src/js/jquery.swipebox.js

@@ -26,7 +26,9 @@
 				loopAtEnd: false,
 				autoplayVideos: false,
 				queryStringData: {},
-				toggleClassOnLoad: ''
+				toggleClassOnLoad: '',
+				titleAttribute: 'title',
+				captionAttribute: 'data-caption'
 			},
 
 			plugin = this,
@@ -116,10 +118,15 @@
 					$elem.each( function() {
 
 						var title = null,
+							caption = null,
 							href = null;
 
-						if ( $( this ).attr( 'title' ) ) {
-							title = $( this ).attr( 'title' );
+						if ( $( this ).attr( plugin.settings.titleAttribute ) ) {
+							title = $( this ).attr( plugin.settings.titleAttribute );
+						}
+
+						if ( $( this ).attr( plugin.settings.captionAttribute ) ) {
+							caption = $( this ).attr( plugin.settings.captionAttribute );
 						}
 
 						if ( $( this ).attr( 'href' ) ) {
@@ -128,7 +135,8 @@
 
 						elements.push( {
 							href: href,
-							title: title
+							title: title,
+							caption: caption
 						} );
 					} );
 
@@ -710,16 +718,27 @@
 			 */
 			setTitle : function ( index ) {
 				var title = null;
+				var caption = null;
 
 				$( '#swipebox-title' ).empty();
 
 				if ( elements[ index ] !== undefined ) {
 					title = elements[ index ].title;
+					caption = elements[ index ].caption;
 				}
 
-				if ( title ) {
+				if ( title || caption ) {
 					$( '#swipebox-top-bar' ).show();
-					$( '#swipebox-title' ).append( title );
+
+					if ( title ) {
+						var tdiv = $( '<div></div>' ).addClass( 'title' ).html( title );
+						$( '#swipebox-title' ).append( tdiv );
+					}
+
+					if ( caption ) {
+						var cdiv = $( '<div></div>' ).addClass( 'caption' ).html( caption );
+						$( '#swipebox-title' ).append( cdiv );
+					}
 				} else {
 					$( '#swipebox-top-bar' ).hide();
 				}