WordPress.org

Ready to get started?Download WordPress

Forums

Meteor Slides
[resolved] Titles for paging (31 posts)

  1. spencerjuk
    Member
    Posted 2 years ago #

    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.

    Cheers

    Spencer

    http://wordpress.org/extend/plugins/meteor-slides/

  2. Josh Leuze
    Member
    Plugin Author

    Posted 2 years ago #

    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!

  3. spencerjuk
    Member
    Posted 2 years ago #

    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

  4. Josh Leuze
    Member
    Plugin Author

    Posted 2 years ago #

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

  5. bucchow
    Member
    Posted 2 years ago #

    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!

  6. Josh Leuze
    Member
    Plugin Author

    Posted 2 years ago #

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

  7. bucchow
    Member
    Posted 2 years ago #

    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!

  8. Josh Leuze
    Member
    Plugin Author

    Posted 2 years ago #

    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.

  9. bucchow
    Member
    Posted 2 years ago #

    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!

  10. Josh Leuze
    Member
    Plugin Author

    Posted 2 years ago #

    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;
    }
  11. Koff
    Member
    Posted 2 years ago #

    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

  12. Josh Leuze
    Member
    Plugin Author

    Posted 2 years ago #

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

  13. Koff
    Member
    Posted 2 years ago #

    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 :)

  14. Josh Leuze
    Member
    Plugin Author

    Posted 2 years ago #

    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.

  15. Koff
    Member
    Posted 2 years ago #

    Thanks.

  16. Josh Leuze
    Member
    Plugin Author

    Posted 2 years ago #

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

  17. Marklcm
    Member
    Posted 1 year ago #

    Hello Josh,
    I hope you may be able to help. I've followed the instructions here and from your website http://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

  18. Marklcm
    Member
    Posted 1 year ago #

    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>
  19. Josh Leuze
    Member
    Plugin Author

    Posted 1 year ago #

    @Marklcm Can you post a link to the site you're working on?

  20. Marklcm
    Member
    Posted 1 year ago #

    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

  21. Josh Leuze
    Member
    Plugin Author

    Posted 1 year ago #

    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;
    }
  22. Marklcm
    Member
    Posted 1 year ago #

    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

  23. Josh Leuze
    Member
    Plugin Author

    Posted 1 year ago #

    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 -->
  24. danyjaneway
    Member
    Posted 1 year ago #

    Hello!

    I have problem.
    I´am absolute amateur, Please I need your advice.
    I´am working on this site: http://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

  25. Marklcm
    Member
    Posted 1 year ago #

    Hello Josh

    Thank you, your support is remarkable

    Mark

  26. Marklcm
    Member
    Posted 1 year ago #

    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
    http://www.boynevalley.org.au/bvcdc/boyne-bush-getaway/
    Could you help again
    Mark

  27. Josh Leuze
    Member
    Plugin Author

    Posted 1 year ago #

    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;
    }
  28. Marklcm
    Member
    Posted 1 year ago #

    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

  29. Josh Leuze
    Member
    Plugin Author

    Posted 1 year ago #

    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.

  30. Marklcm
    Member
    Posted 1 year ago #

    many thanks
    Mark

Topic Closed

This topic has been closed to new replies.

About this Plugin

About this Topic