Support » Plugins and Hacks » Meteor Slides » [Resolved] [Plugin: Meteor Slides] Titles for paging

[Resolved] [Plugin: Meteor Slides] Titles for paging

  • Hi Josh,

    Wondering if you could help me, i am looking to replace the paging icons with the title of each slide so that i can click on the title of the slide and it will take you to it.

    Is this possible?

    i have looked at this thread but it all went a little over my head. I understand that i can make a second loop that will display the titles, but i do not understand how to link them so it will change to the corresponding slide.

    Any help will be appreciated.




Viewing 15 replies - 1 through 15 (of 30 total)
  • Plugin Author Josh Leuze


    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!


    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.



    Plugin Author Josh Leuze


    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!

    Plugin Author Josh Leuze


    @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!

    Plugin Author Josh Leuze


    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 {

    Thanks again!

    Plugin Author Josh Leuze


    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;


    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?



    Plugin Author Josh Leuze


    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


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

    Plugin Author Josh Leuze


    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.


    Plugin Author Josh Leuze


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

Viewing 15 replies - 1 through 15 (of 30 total)
  • The topic ‘[Resolved] [Plugin: Meteor Slides] Titles for paging’ is closed to new replies.
Skip to toolbar