Support » Plugin: Meteor Slides » Meteor Slides – Individual IDs for Paged Navigation Buttons

  • Resolved InHouse


    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!

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


    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.

    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!

    Plugin Author Josh Leuze


    No problem!

Viewing 3 replies - 1 through 3 (of 3 total)
  • The topic ‘Meteor Slides – Individual IDs for Paged Navigation Buttons’ is closed to new replies.