allow an addtional image caption

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
 ```
 

index.html

@@ -84,7 +84,8 @@ <h1>Swipebox.</h1>
 			<div id="try"></div>
 			<ul id="box-container">
 				<li class="box">
-					<a href="http://swipebox.csag.co/images/image-1.jpg" class="swipebox" title="Fog">
+					<a href="http://swipebox.csag.co/images/image-1.jpg" class="swipebox" title="Fog"
+					   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="http://swipebox.csag.co/images/image-1.jpg" alt="image">
 					</a>
 				</li>
@@ -227,7 +228,9 @@ <h3>Options</h3>
 		beforeOpen: function() {}, <span>// called before opening</span>
 		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>
+		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 {
@@ -215,11 +215,9 @@ html.swipebox-html.swipebox-touch {
   0% {
     left: 0;
   }
-
   50% {
     left: -30px;
   }
-
   100% {
     left: 0;
   }
@@ -229,11 +227,9 @@ html.swipebox-html.swipebox-touch {
   0% {
     left: 0;
   }
-
   50% {
     left: -30px;
   }
-
   100% {
     left: 0;
   }
@@ -242,11 +238,9 @@ html.swipebox-html.swipebox-touch {
   0% {
     left: 0;
   }
-
   50% {
     left: 30px;
   }
-
   100% {
     left: 0;
   }
@@ -255,11 +249,9 @@ html.swipebox-html.swipebox-touch {
   0% {
     left: 0;
   }
-
   50% {
     left: 30px;
   }
-
   100% {
     left: 0;
   }
@@ -293,3 +285,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

@@ -24,7 +24,9 @@
 				loopAtEnd: false,
 				autoplayVideos: false,
 				queryStringData: {},
-				toggleClassOnLoad: ''
+				toggleClassOnLoad: '',
+				titleAttribute: 'title',
+				captionAttribute: 'data-caption'
 			},
 
 			plugin = this,
@@ -114,20 +116,25 @@
 					$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' ) ) {
 							href = $( this ).attr( 'href' );
 						}
 
 						elements.push( {
 							href: href,
-							title: title
+							title: title,
+							caption: caption
 						} );
 					} );
 
@@ -707,16 +714,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').text(title);
+						$('#swipebox-title').append(tdiv);
+					}
+
+					if(caption) {
+						var cdiv = $('<div></div>').addClass('caption').text(caption);
+						$('#swipebox-title').append(cdiv);
+					}
 				} else {
 					$( '#swipebox-top-bar' ).hide();
 				}