[Plugin: Meteor Slides] Titles for paging

Hi Spencer, you’re on the right track, you need to use a second loop to get the slide titles, this would replace the empty “meteor-buttons” container which is used twice in the slideshow template:

<div id="meteor-buttons<?php echo $slideshow; ?>" class="meteor-buttons"></div>

You might try replacing it with something like this:

<div id="meteor-buttons<?php echo $slideshow; ?>" class="meteor-buttons">

				<?php // Loop which loads the slide title buttons

				while ( $loop->have_posts() ) : $loop->the_post(); ?>

					<div class="meteor-title meteor-title-<?php echo $i; ?>">

						<a href="#"><?php the_title(); ?></a>

					</div><!-- .meteor-title -->

				<?php $i++; ?>

				<?php endwhile; ?>

				<?php wp_reset_query(); ?>

			</div><!-- .meteor-buttons -->

Then you need to customize the slideshow script, which is also mentioned in that thread.

You can follow the example in the documentation, but the code for targeting the title links you are creating might look like this:

pagerAnchorBuilder: function(idx, slide) { 

			return '#meteor-buttons div:eq(' + idx + ') a'; 

		}

Let me know how that works for you!

Perfecto!

Thanks Josh worked perfectly all I needed to do on to of this was alter the class of meteor-buttons so it would display the text not the little icons.

Thanks very much again! I appreciate your hard work in not only producing a great plugin in but also offering support.

Cheers

Spencer

No problem Spencer, glad to hear that worked for you!

Wow I’m stumped. I’ve been at this for a while and I just have to ask. I feel like I’ve followed your clear and straightforward directions but I must be missing something somewhere. I’m just looking to have the titles below the slides and they don’t need to link anywhere. Just straight up text.

Here’s the example: mellyi.com

Thanks for any help. Great plugin!

@bucchow, this thread pertains to adding the titles as navigation.

Adding the title as a caption is much simpler. The documentation on customizing the slideshow template will show you how to do this. The CSS in that example will place the title over the slide, but you can adjust that.

Thanks for the reply! Yes, I’d tried that route initially but I couldn’t figure out how to adjust the placement of the titles to go below the images. I’ve set it up now with the customizing the slideshow template method that you’ve suggested. How do I adjust the css to place the titles below the images? Thanks so much again!

The trick is that you need to make some extra room below the slides to place the title down there. Firebug is helpful for inspecting your page to see how it all fits together.

There is already some padding below the slides for the paged nav, you just need to increase it for the titles like this:

.navpaged, .navboth {
    padding: 0 0 40px;
}

And then you can move the captions down by adjusting the bottom position:

.meteor-slides p {
    background: url("images/title-bg.png") repeat scroll left top transparent;
    bottom: -28px;
    color: #FFFFFF;
    font-size: 12px;
    left: 0;
    margin: 0;
    padding: 5px 0;
    position: absolute;
    text-align: center;
    width: 100%;
}

I also tweaked the font color and size so that it would fit that space better.

You certainly rock! Thank you so much! Just a note to future readers, and please correct me if I’m wrong, that the slides setting “Slideshow Navigation” must be set to Paged or Both in order for the Titles to appear. I didn’t want the page buttons shown so I added this CSS modification:

.meteor-buttons {
	display:none;
}

Thanks again!

No problem! You don’t need to have Paged or Both selected for the title. I just used a class that those options add to the slideshow, you could also style it like this if you aren’t using the paged navigation:

.meteor-slides {
    padding: 0 0 30px;
}

Hi,

I am trying to do the same ( buttons with titles for pageing )

and I Just can not get it to work.

I followed the exact procedure as written here ( to Spencer).

And pressing the text links Just dosent work.

Any idea what could be the problem?

Thanks,

Koff

Koff, can you post a link to the site you’re working on?

Josh, Thanks for the reply. I Found the problem.But I don’t know to solve it.

The problem is That I need the slider in a Widgetised home page.
On the top of the homepage I Need the slider with title buttons.
and i need to use another slider in another widget area in the homepage with a regular buttons.

Now, How can I add pagerAnchorBuilder just for one slider and not the other?

Thanks you again

Koff

p.s. the problem was the ID of the buttons Div.
<div id="meteor-slideshow<?php echo $slideshow; ?>" I forgot the $slideshow ??

I would just add the titles to all of them, but leave the default styling for the buttons, which will hide those titles the same as if they were just numbered and they won’t look any different.

Then for the one slideshow you want to show the titles on, target the ID of that slideshow and style the titles so that they are shown how you want them.

Thanks.

No problem, let me know if you have any issues getting it setup like that.