[Plugin: Meteor Slides] Show image title

By default the title isn’t displayed in the slideshow, but with a custom slideshow template you can easily add it.

‘Ello,

If I understand that post correctly as I’ve tried it out does that method put the title of the post in the slideshow? What I am hoping to get done is display the title of the image it self in the slideshow, is this possible?

Yes, that adds the title of the slide post to the slide. I don’t think you could get just the alt or title tag of the image, with featured images you use a function to get the image and it loads the whole img tag, title and all.

‘Ello,

Thanks for the replies, very good plugin and glad to see you actually helping people out with problems.

I worked out a method of getting the title tags value to be displayed, I wrote a small bit of jQuery to get the current slide number, find the image inside it, get the title tags value and then append it to the same div the image paged box things are in.

If anyone’s interested I’ve posted what I did below:

if (changed && opts.pager)
	{
		opts.updateActivePagerLink(opts.pager, opts.currSlide, opts.activePagerClass);

//N Nand - Changes to display image alt tag as an title in the slideshow
		nnCurSlide = opts.currSlide + 1
		nnImageTitle = $j('div#slide-'+nnCurSlide+' img').attr("alt");

		$j('div.meteor-buttons span').remove();
		$j('div.meteor-buttons').append('<span>'+nnImageTitle+'</span>');
	}

The above code replaces (on line 639 I think):

if (changed && opts.pager)
	{
		opts.updateActivePagerLink(opts.pager, opts.currSlide, opts.activePagerClass);

Also after the code below goes at the bottom of the “function buildPager” function.

//N Nand - Changes to display image alt tag as an title in the slideshow
	nnCurSlide = opts.currSlide + 1
	nnImageTitle = $j('div#slide-'+nnCurSlide+' img').attr("title");

	$j('div.meteor-buttons').append('<span>'+nnImageTitle+'</span>');

Hope this helps someone else and thanks for the replies JLeuze.

Forgot to say it’s the jquery.cycle.all.js file the changes in my last post were made in.

That’s a great idea, thanks for sharing your solution!

Hi,

With the update to 4, where can one find the code above to change?

Many thanx

There is probably a simpler way to do it. Are you trying to add a caption to the slideshow?

Do you specifically need to get the image title or alt text, or do you just need add text to each slide? I’ve found that it is easier to use the slide post title so that the content can all be easily edited from one place.

Hi,

Thanks for replying so quickly

Yes, I specifically want a title and description for separate images, though some images won’t have an description or title at all.

This is a perfect example, which I accomplish through next gen and monoslideshow.

https://www.outoforder.co.za/site-06/the-town/

Regards

Here is some code that I have used in a custom slideshow template to get the featured image’s title:

<?php // Get the featured <?php // Get the featured image's title

	$ms_thumb_id = get_post_thumbnail_id($id);

	$ms_title = esc_attr( get_post_field( 'post_title', $ms_thumb_id ) );

	echo '<p>' . $ms_title . '</p>';

?>

And I have used this to get the image’s description:

<?php // Get the featured image's description

	$ms_thumb_id = get_post_thumbnail_id($id);

	$ms_caption = esc_attr( get_post_field( 'post_content', $ms_thumb_id ) );

	echo '<p>' . $ms_caption . '</p>';

?>

Here is a post which shows what each bit of metadata for the image is stored as.

`

thank you, this is great help,
Any chance thou you can point me in the right direction to get the css displaying the description like the example here, thus only showing when one hovers….
https://www.outoforder.co.za/site-06/the-town/

i’ll google around anyway,
much appreciate
s

No problem, you could do this the same way I am hiding and revealing the prev/next navigation:

.meteor-slides .caption {
	display: none;
}

.meteor-slides:hover .caption {
	display: block;
}