Meteor Slides
[resolved] Meteor Slides - Individual IDs for Paged Navigation Buttons (4 posts)

  1. InHouse
    Posted 4 years ago #

    Hi Josh,

    I was looking around the forum and attempting some things myself but I can't seem to figure out how I could implement individual IDs for each paged navigation button. For instance, the HTML would look like:

    <a href="#" class="activeSlide" id="slide1">1</a>
    <a href="#" id="slide2">2</a></div>
    <a href="#" id="slide3">3</a></div>

    The end goal is to use CSS to replace the text "1, 2, 3, etc" with individual background graphics specific to each number. These would be "thumbnails" but NOT the same image as the slide itself so CSS would work perfectly.

    I'm already using a custom template (meteor-slideshow.php) and have been trying to tweak the code myself.

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

    Thanks in advance!


  2. Josh Leuze
    Plugin Author

    Posted 4 years ago #

    Since the paged navigation is generated by jQuery Cycle, you have to customize the "pagerAnchorBuilder" option of the script to do this. Take a look at the documentation on custom slideshow scripts, it has an example if how add a generic class and a specific one to the pager buttons, just like the slide containers have.

  3. InHouse
    Posted 4 years ago #

    Oh, right on Josh, that worked perfectly. I didn't know it would require modifying the js template.

    Added this to the slideshow.js file after copying to my theme folder.

    pagerAnchorBuilder: function(idx, slide) {
    	return '<a href="#" class="mbutton mbutton-' + ( idx + 1 ) + '">' + ( idx + 1 ) + '</a>';


    <a href="#" class="mbutton mbutton-1 activeSlide">1</a>
    <a href="#" class="mbutton mbutton-2">2</a></div>

    Thanks Josh!

  4. Josh Leuze
    Plugin Author

    Posted 4 years ago #

    No problem!

Topic Closed

This topic has been closed to new replies.

About this Plugin

About this Topic