[Plugin: Meteor Slides] Titles for paging

Hello Josh,
I hope you may be able to help. I’ve followed the instructions here and from your website https://www.jleuze.com/plugins/meteor-slides/customizing-the-slideshow-script/, on my local site and can’t get the title text to display.
The styling is as shown on your website and displays as 2 square grey dots as expected. each linking to the slide successfully and firebug
shows”map2
map1” when inspecting the button element.
In the test site ‘map1’ and ‘map2’ are the respective titles of the slides, its just that the text isn’t displaying. I think I have followed your instructions correctly and am probably missing something pretty basic as ‘basic’ is the level of my skill level doing this.

My eventual hope is to have the title in h3, and the excerpt for each slide displayed together in its own pager button, in a vertical list to the left of the slides. Hope that makes sense. I would appreciate any assistance you may be able to offer
Thanks
Mark

Whoops! the firebug info didn’t display. I’lltry again here

<a class="meteor-title meteor-title-1" href="#">map2</a>
<a class="meteor-title meteor-title-2 activeSlide" href="#">map1</a>

@marklcm Can you post a link to the site you’re working on?

I’ve uploaded my test localhost site for you to look at & will email you the address. I’m happy to post the link to the site here when it goes live for the benefit of others if necessary, just not as it is now.
The text next to the slide image is just a place holder for an example of how I hope to have the pagers in list style down the left of the image, which will eventually be maps. I will set the slider on that page to a slow transition speed so the viewer will have the information about each map available in the pager button and be able to choose.
Of interest, I have found that addingrel=prettyPhoto after the slide link will open the larger version of the image in this lightbox without leaving the page. It will also be able to do the same for a pdf file for users to be able to print the map. Anyway that is the plan

Thanks
Mark

Hi Mark, I got your link and it looks like you are on the right track!

I can see the titles in the pager links, but they aren’t styled quite right. You need to change the text indent to show the text and change the width so that the text fits correctly:

.meteor-slides.maps .meteor-buttons a {
    background: none repeat scroll 0 0 #EDEDED;
    color: #000000;
    display: block;
    font-size: 10px;
    line-height: 10px;
    margin: 0 3px 0 0;
    outline: medium none;
    padding: 5px;
    text-decoration: none;
    text-indent: 0;
    text-transform: uppercase;
    width: 312px;
}

To start with on moving the buttons to the left, change the positioning, bottom and left, to look like this:

.meteor-slides.maps .meteor-buttons {
    height: 20px;
    left: 30px;
    margin: 0;
    padding: 0;
    position: absolute;
    top: 0;
    width: 100%;
    z-index: 999;
}

Thanks Josh
that works.
Your help is invaluable and much appreciated.
I tried to add the excerpt to the button as well as the title by adding<a class="meteor-excerpt meteor-excerpt-<?php echo $meteor_count; ?>" href="#"><?php the_excerpt(); ?></a> to the loop which loads the pager nav with slideshow titles. This does display the excerpt but not in the same button. I tried wrapping the title and excerpt calls in a div but that didn’t seem to work.
Would you be able to show me how to do that?
Mark

No problem Mark, each slide will be attached to a single link in the pager nav, so all the content needs to be within the anchor like this:

<div id="meteor-buttons<?php echo $slideshow; ?>" class="meteor-buttons">
	<?php while ( $meteor_loop->have_posts() ) : $meteor_loop->the_post(); ?>
		<a class="meteor-title meteor-title-<?php echo $meteor_count; ?>" href="#"><h4><?php the_title(); ?></h4>
		<?php the_excerpt(); ?></a>
		<?php $meteor_count++;
	endwhile;
	$meteor_count = 1;
	wp_reset_postdata(); ?>
</div><!-- .meteor-buttons -->

Hello!

I have problem.
I′am absolute amateur, Please I need your advice.
I′am working on this site: https://www.lenyxclass.cz/ with super STB (special text boxes works good only in Opera browser.
In Mozilla, Google Chrome and Internet explorer is error in view.
I do not want to switch to CSS mode, because I want JAVA′s better desing.
What to do?

Thanks for help

Dany

Hello Josh

Thank you, your support is remarkable

Mark

Hello again Josh
sorry to worry you again.
I also use

<div class="meteor-caption">
<h3><?php the_title(); ?></h3>
<?php the_excerpt(); ?>
</div>

for a caption and title in a different layout on another page. Using both causes the excerpt to be shown twice at
https://www.boynevalley.org.au/bvcdc/boyne-bush-getaway/
Could you help again
Mark

Is this other slideshow not supposed to use the paged navigation with the title like the first one?

I would hide them on this slideshow like this:

meteor-buttonsdiscovery-centre-ubobo {
display: none;
}

The slides in the slideshow at the above page were set up to show the title and excerpt placed above the slide image on a semi transparent background, and the normal buttons were showing below the slideshow. That is how I wanted it and doesn’t use the paged navigation with (title and excerpt displayed in the buttons) as the other slideshow does. However, since adding the code (from 5 posts above) the excerpt is now repeated below this slideshow

hope this makes sense
Mark

Yeah, it is going to add the custom pager to all the slideshows, the changes are global.

If you want the standard paged navigation on the other slideshows, you want to leave the default styles for this in the slideshow stylesheet, and then add new custom styles for just the custom slideshow.

I think you have the custom CSS setup to target only the map slideshow, but make sure you also have the default CSS for the other slideshows.

many thanks
Mark

You’re welcome Mark!