Add Captions to Slideshow

[bornegraphics]

Afternoon fellow designers and developers,

After hours of searching the net I found this I found this alternate slideshow online that a client of mine really likes.

http://tympanus.net/codrops/2011/01/...nails-gallery/

I really do like this slideshow myself but I am having problems adding a caption to each image. I am hoping to have the caption located under the image and slide in with each image.

Can anyone help me out?

Thanks in advance.
Best regards,
Alan

[jscheuer1]

Like:

http://home.comcast.net/~jscheuer1/s...thumbs_cap.zip

?

[bornegraphics]

OMG!!!! You are an absolute genius. That is exactly, I mean exactly what I am looking for. I can't thank you enough. WOW. You have made my day.

I can't thank you enough John. I really do appreciate your help.

Thanks again,
Alan

[bornegraphics]

John,
Quick favour to ask. I am trying to make my caption look similar to the caption in this slideshow on NG: http://ngm.nationalgeographic.com/vi...to-gallery#/52

I can get it to work on the first image but I can't repeat it on any other image.

As of right now the only Caption I can get to work is a single line, which I have in the code below as Image 1, Image 2, etc.

Any chance you could help me out with this?

Many thanks,


Below is my HTML code:

<div id="slideshow_container">  
<!-- slideshow -->
	  <div id="loader" class="loader_galleries"></div>
		<div class="wrapper">
			<div id="ps_container" class="ps_container">
				<div class="ps_image_wrapper">
					<!-- First initial image -->
                    <div><div class="ps_caption_bg"></div><img src="the blue whale/gallery1/large/blue1.jpg"/><div class="ps_caption">Image 1</div></div>
				</div>
				<!-- Navigation items -->
				<div class="ps_next"></div>
				<div class="ps_prev"></div>
				<!-- Dot list with thumbnail preview -->
				<ul class="ps_nav">
				<li class="selected"><a href="the blue whale/gallery1/large/blue1.jpg" rel="the blue whale/gallery1/thumbnails/blue1.jpg">Image 1</a></li>
				<li><a href="the blue whale/gallery1/large/blue2.jpg" rel="the blue whale/gallery1/thumbnails/blue2.jpg">Image 2</a></li>
			    <li><a href="the blue whale/gallery1/large/blue3.jpg" rel="the blue whale/gallery1/thumbnails/blue3.jpg">Image 3</a></li>
			    <li><a href="the blue whale/gallery1/large/blue4.jpg" rel="the blue whale/gallery1/thumbnails/blue4.jpg">Image 4</a></li>
			    <li><a href="the blue whale/gallery1/large/blue5.jpg" rel="the blue whale/gallery1/thumbnails/blue5.jpg">Image 5</a></li>
			    <li><a href="the blue whale/gallery1/large/blue6.jpg" rel="the blue whale/gallery1/thumbnails/blue6.jpg">Image 6</a></li>
			    <li><a href="the blue whale/gallery1/large/blue7.jpg" rel="the blue whale/gallery1/thumbnails/blue7.jpg">Image 7</a></li>
			    <li><a href="the blue whale/gallery1/large/blue8.jpg" rel="the blue whale/gallery1/thumbnails/blue8.jpg">Image 8</a></li>
			    <li><a href="the blue whale/gallery1/large/blue9.jpg" rel="the blue whale/gallery1/thumbnails/blue9.jpg">Image 9</a></li>
			    <li><a href="the blue whale/gallery1/large/blue10.jpg" rel="the blue whale/gallery1/thumbnails/blue10.jpg">Image 10</a></li>
			    <li><a href="the blue whale/gallery1/large/blue11.jpg" rel="the blue whale/gallery1/thumbnails/blue11.jpg">Image 11</a></li>
				  <li class="ps_preview">
						<div class="ps_preview_wrapper">
							<!-- Thumbnail comes here -->
						</div>
						<!-- Little triangle -->
						<span></span>
				  </li>
				</ul>
			</div>
		</div>
        <!-- slideshow --></div>

[jscheuer1]

Yes, but it will take some time and I'm tied up the rest of the day pretty much. You can change where it says Image 1, Image 2, and so on but you currently cannot format that text by using HTML tags in it. And it will be centered, not left justified. That last is controlled in the css file:

.ps_caption {
	position: absolute;
	bottom: 11px;
	left: 0;
	text-align: center;
	width: 100%;
	text-transform: none;
	font: normal 95% verdana, helvetica, arial, sans-serif;
	color: #333;
}

While I was working this out, in an earlier version I used an additional division in each li to hold the caption texts. Reverting to that will allow rich HTML in the captions, but I never considered formatting multiple lines to orient well in the caption display area. It should be doable, I have done so with other scripts.

I notice on the Nat Geo page that there is a fixed amount of height allotted for the descriptions, they're justified left and if there are shorter descriptions the extra space is at the bottom. Is that what you want?

Also the NG descriptions have a solid white background. I had gone for a semi-opaque background in keeping with the overall quality of the rest of the demo show. But that is easily commented out if you prefer it solid. Let me know about that as well. I think I will make it a sort of configuration option, as it looks good when you do want it.

[bornegraphics]

John,

I would appreciate any help on this matter for I just can't seem to figure it out. Similar to the NG site I would want the extra space to appear at the botton, underneath the caption if you will for smaller image descriptions. I will have a set height for the space allocated for the caption which I have done so using CSS.

I know how to change the background colour, font style, etc just having multiple lines of caption is the part I am having difficulty with. In the past I have used 'span class' to highlight different titles and description which I do believe is an option that can be used here. Correct me if I am wrong?

If you could offer any advice or suggestions on how to solve my problem I would greatly appreciate it. Upon completion I will share the URL with you so you can see how I have implemented the slideshow.

Again thank you for taking the time to respond and for all your help with this slideshow. I think once I have the multiple captions it will be a slideshow I use for a lot of my projects.

Best regards,
Alan

[bornegraphics]

John,

I played around with adding different divisions like you suggested and adding a new CSS style so I can include Rich HTML. This is what I've come up with.

Probably not the best way for right now I had to use a specific margin to keep the second title away from the first title, which I would prefer not to do.

I'm sure there is a better solution? Any suggestions?

Best regards,
Alan

<li><a href="the blue whale/gallery1/large/blue2.jpg" rel="the blue whale/gallery1/thumbnails/blue2.jpg">
                <div class="ps_caption_title">Image Title:</div><div class="ps_caption_title2">Blue Whale swimming in the open waters.</div><br />
                <div class="ps_caption_desc">Description</div><br />
                </a></li>

Here is the CSS I've setup for the titles and description.

.ps_caption_title {
	position: absolute;
	bottom: 25px;
	left: 0;
	text-align: left;
	width: 100%;
	color: #333;
	font-family: "Times New Roman", Times, serif;
	font-size: 14px;
	margin-left: 20px;
	font-weight: bold;
}
.ps_caption_title2 {
	position: absolute;
	bottom: 25px;
	left: 0;
	text-align: left;
	width: 100%;
	color: #999;
	font-family: "Times New Roman", Times, serif;
	font-size: 13px;
	margin-left: 100px;
}
.ps_caption_desc {
	position: absolute;
	bottom: 10px;
	left: 0;
	text-align: left;
	width: 100%;
	color: #F00;
	font-family: "Times New Roman", Times, serif;
	font-size: 13px;
	margin-left: 20px;
}

[bornegraphics]

John,

Seems I might have solved the margin problem. I removed on <div class> and made it into a <span class> which I include in the first <div tag>. Seems to work like gem.

See new HTML code below.

Thanks again for all your help and pointing me in the right direction. Your suggestions and knowledge have been very very useful and if you don't mind I might be looking at you for future problems.

Thanks again John.

Best regards,
Alan

<li><a href="the blue whale/gallery1/large/blue2.jpg" rel="the blue whale/gallery1/thumbnails/blue2.jpg">
                <div class="ps_caption_title">Image Title: <span class="ps_caption_title2">Blue Whale swimming in the open waters.</span></div><br />
                <div class="ps_caption_desc">Description</div><br />
                </a></li>

[jscheuer1]

Well I finally got a chance to play with this some more myself. I found that extra care needs to be taken because IE 8 and less can behave oddly even while others look good.

This time I'm only including the index file and the css, as those are all that have changed:

Attachment 4331

In this version I've documented some of the changes/additions in the css file, those you would need to pay attention to if you were to further modify them to suit your images/captions:

.ps_image_wrapper{
	width:680px; /* set to width of the initial image */
	height:510px; /* set to height of the images + room for captions */
	overflow:hidden;
	position:relative;
	margin:0 auto;
	-moz-box-shadow:0px 5px 1px #999;
	-webkit-box-shadow:0px 5px 1px #999;
	box-shadow:0px 0px 5px 1px #999;	
}
.ps_caption_bg { /* caption background - partial opacity if desired is set in the script */
	background-color: #bbb;
	width: 100%;
	height: 510px; /* set to height of the ps_image_wrapper */
}
.ps_nav div {
	display: none;
}
.ps_image_wrapper img{
	position:absolute;
	left:0px;
	top:0px;
	-moz-box-shadow:0px 0px 5px #999;
	-webkit-box-shadow:0px 0px 5px #999;
	box-shadow:0px 0px 5px #999;
}
.ps_caption { /* caption foreground */
	position: absolute;
	top: 450px; /* set to height of the images */
	left: 0;
	text-align: left;
	width: 670px; /* set to width of initial image minus the width of any left and right padding, margin and/or border of this element */
	padding: 5px 5px 0 5px; /* the width of any padding, margin and/or borders used for this element must be in px units only */
	text-transform: none;
	font: normal 95% verdana, helvetica, arial, sans-serif;
	color: #333;
}

I've also made the partial opacity of the background of the captions optional as promised:

        <script type="text/javascript">
			jQuery(function($) {
				var caption_bg_opacity = 0.4; // set to false for solid description background
				if(caption_bg_opacity){
					$('.ps_caption_bg').css({opacity:caption_bg_opacity});
				}
				//some elements..

[bornegraphics]

John,

Thanks again for all your help on this. This has turned into one of my favourite slideshows that I expect I will be using for years to come. I can't thank you enough.

Perhaps when you have time you can check out my personal online portfolio and give me some feedback on it. Only if you have time ofcourse.

www.bornegraphics.com

Thanks again,
Alan