WordPress.org

Ready to get started?Download WordPress

Forums

Meteor Slides
[resolved] Feature request - Replace paging with smaller thumbnails (20 posts)

  1. cwulff
    Member
    Posted 3 years ago #

    Hi there,

    I'm wondering if you might have an idea as to how to change the paging icons over to thumbnails of the slides they refer to. Probably not a simple matter, but something a group I'm volunteering with really wants to implement and, having looked at the plugin, I'm not sure where exactly to start.

    Many thanks,
    Christopher

  2. Josh Leuze
    Member
    Plugin Author

    Posted 3 years ago #

    Hi Christopher, you would have to make some customizations to your theme, but this wouldn't be too tough to do.

    Meteor Slides uses the jQuery Cycle plugin to power the slideshow. The paged links that are generated by default are just numbers that have been styled as icons.

    These could be replaced with thumbnail images, there is an example of this on the jQuery Cycle site.

    To do this, you would need to setup an additional featured image size in your theme's function.php file for the thumbnail links.

    You will also need to create your own loop to load the slideshow. There is a file in my plugin called meteor-slideshow.php which contains the loop. You could add that code right to the template you want the slideshow on, but it is kind of long so I'd suggest making a copy of the file in your theme and creating a function in your functions.php file to load it in your theme.

    You could adapt the code from the theme to create the function, just give the loop file and function itself new unique names:

    // Adds function to load slideshow in theme
    
    	function meteor_slideshow($slideshow=NULL, $metadata=NULL) {
    
    		include( 'meteor-slideshow.php' );
    
    	}

    Now you'd need to edit that loop to load a second loop after the slideshow loop which loads the thumbnail sized featured images as paged links for the slideshow.

    To get that to layout right with the thumbnail links you'd also have to customize the CSS for the slideshow a bit. You can do that from your theme too:

    Copy meteor-slides.css from /meteor-slides/css/ to your theme's directory to replace the plugin's default stylesheet. If you have navigation enabled, be sure to copy the buttons.png, next.png, and prev.png files to your theme's images folder, or create new graphics to replace them.

    Let me know if you run into any problems!

  3. cwulff
    Member
    Posted 3 years ago #

    Can't believe I never came back to say Thank You! This worked perfectly. Enormous apologies and thanks so much for your help.

  4. Josh Leuze
    Member
    Plugin Author

    Posted 3 years ago #

    No problem Christopher, glad to hear you got it figured out!

  5. majorlee
    Member
    Posted 3 years ago #

    I have a question as well, how would you go about adding a text field to the options for it to display over the image?

  6. Josh Leuze
    Member
    Plugin Author

    Posted 3 years ago #

    @majorlee You could add a text field metabox, but it would take a lot of customization. You can simplify the process of adding text to the slideshow by using the slide title as the caption of the slide as shown in this example.

  7. majorlee
    Member
    Posted 3 years ago #

    Thanks mate, d but if I wanted to implement and add a text field how would I go about that within the plugin. Also is there a way to create thumbnails to click on to slide to the appropriate slide?

    Thanks again for a great plugin it helps out a lot.

  8. Josh Leuze
    Member
    Plugin Author

    Posted 3 years ago #

    Adding a text field would use the same code from the plugin that adds the URL box, but you would want to add this to your theme's functions.php file rather than editing the plugin. You can learn more about creating metaboxes like this in this tutorial.

    Using the above info for adding thumbnail navigation, the thumbnails are automatically generated with the custom loop, you don't have to create them separately.

  9. hexagongirl
    Member
    Posted 3 years ago #

    Hello,

    I'm trying to follow the guidelines above to create a Meteor slideshow with thumbnails. I've managed to create a new thumbnail size and added a loop directly after the slideshow loop to generate the thumbnails.

    But... I've come unstuck with creating the thumbnails as paged links, so the slide changes when thumbnail clicked on. I'm guessing I need to add a chunk of javascript somewhere, but js is not my strong point!!

    Can anyone point me in the right direction?

    Many thanks,
    Sarah

  10. Josh Leuze
    Member
    Plugin Author

    Posted 3 years ago #

    Hi Sarah, the example I linked to above actually generates the thumbnail links for the pager dynamically.

    Here is another example that uses existing markup, so you could use that with the thumbnail loop that you created, just make sure the thumbnails have anchors.

    You shouldn't have to do too much to the JavaScript in that example, just need to add this bit to the cycle function and change it to target the the correct anchors:

    pagerAnchorBuilder: function(idx, slide) {
            // return selector string for existing anchor
            return '#nav li:eq(' + idx + ') a';
        }

    And you'll have to add this in after the cycle function and update it for your anchors:

    $('#direct').click(function() {
        $('#nav li:eq(2) a').trigger('click');
        return false;
    });

    Let me know if you run into any problems with this, the next version of Meteor Slides will support custom slideshow scripts so that it is possible to make changes like this without hacking the plugin.

  11. livehc
    Member
    Posted 3 years ago #

    Hello,

    I have a problem with the Slide Height. When I setup the size from 200px to 377px the picture in the page doesn't show in that size. I mean it still showing the picture with 2OOpx, but the box is in 377px
    Here the link:
    http://www.cadedental.com/cadedental/?page_id=5

    Please help me to resolve this issue.
    Thanks,
    Lili

  12. hexagongirl
    Member
    Posted 3 years ago #

    Many thanks for the quick response, that worked a treat - I just added the first chunk of code to slideshow.js, changing the anchors to my containing ul id. (I think the second is for if you want a separate link to change the slides too??)

    One thing that's not working though, and I can't work out... the 'activeSlide' class doesn't appear any longer - meaning I can't highlight the current thumbnail. Any ideas?

    Thanks again, and for the plugin too - it's brilliant!

  13. Josh Leuze
    Member
    Plugin Author

    Posted 3 years ago #

    No problem, glad to hear you are making some progress on it! I think that if you manually create the pager, you might need to manually specify the active slide functionality as well: http://jquery.malsup.com/cycle/pager7.html

  14. Josh Leuze
    Member
    Plugin Author

    Posted 3 years ago #

    I've been building a slideshow with thumbnails and I figured out that the 'activeSlide' class is still there. But is being added to the container that the anchor is in instead of the anchor itself, so the CSS has to be updated to target that correctly.

  15. kaylamatthews
    Member
    Posted 3 years ago #

    Hi JLeuze,

    Thank you so much for such an awesome plugin, I keep coming back to pick meteor slides over the other galleries :)

    I was wondering if there's an easy way to assign a specific css class to the paged navigation option - currently the active slide gets an "a.activeSlide" class, but is there a way to assign a unique css class to all the paged <a> buttons? Perhaps have them echo their respective slide's title?

    I have been looking through the source codes for the plugin but could not find a function that defines the paged navigation...pardon me as I am not well versed with php :(

    Any help would be greatly appreciated!

    Kayla

  16. kaylamatthews
    Member
    Posted 3 years ago #

    Ah I got it sorted out, it's not very pretty but it will work -

    Since the slideshow is powered by jquery.cycle.all.js found in the plugin's js folder, I figured out that the slideshow navigation is built upon pagerAnchorBuilder, so around line 725 is where the paged navigation option is build -

    line 732:
    a = '<a href="#">'+(i+1)+'</a>';

    Change to something like:
    a = '<a href="#" class="'+(i+1)+'">'+(i+1)+'</a>';

    I honestly don't know any jquery but I needed the class to be dynamically generated, so I just used the same '+(i+1)+' so that the class will increase by 1 number at a time, so that in css it will be:

    a.1
    a.2
    a.3

    and so on depending on how many slides you have in the slideshow. I needed this to assign each thumbnail to a slide and to be able to style each thumbnail specifically with a custom image (WordPress' automatic thumbnail generation always gives you a smaller image of your main slider image, which is not what I was after)

  17. kaylamatthews
    Member
    Posted 3 years ago #

    And of course I forgot that css class cannot start with numbers...not unless you put it into UTF-8 code, go here:

    http://rishida.net/tools/conversion/

    type in the number you want and copy the UTF-8 code value then add a slash in front of it so that a css class of "1" would become:

    a.\1 (there must be a space after 1)

  18. Josh Leuze
    Member
    Plugin Author

    Posted 3 years ago #

    Hi Kayla, thanks for trying Meteor Slides!

    There are a couple of ways to approach this issue. If you need actual unique content in the pager buttons, like a thumbnail of the slide or the slide title, I would say to create a custom slideshow template with a second loop. With this you could have far more control over the markup and make sure each button has its own class to make styling them easier.

    But it sounds like you just need the unique classes and the content of the pager links can still just be numbers, so that would be overkill.

    I think you are doing it correctly for this situation by just tweaking the output of the pager links that are already being generated. But I wouldn't edit the cycle script if you can avoid it, it will make updates difficult and there are a lot of moving parts so it is easy to break!

    I would instead do this in the slideshow.js script so that your hack is easier to re-apply and less likely to break anything. Here you can see an example of this in the Cycle site, though it is a bit more complex than you need: http://jquery.malsup.com/cycle/pager2.html

    This is the code I would use to do that:

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

    With that code, it is still simply using numbers for the links, but they are also added as classes so that each has a unique class so that they end up looking like this:

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

    The classes use the same convention as the slide classes where they each have a generic class they share and then a specific numbered version. This is more semantic and will avoid the problem of classes that start with numbers.

    By the way, the next version of Meteor Slides will support custom slideshow scripts, so if you drop a copy of slideshow.js into your theme when you are done editing it, it will switch to that copy when you update the plugin and won't break your hack.

  19. kaylamatthews
    Member
    Posted 2 years ago #

    Thank you so much for the detailed post and timely help Josh! I really appreciate it!

  20. Josh Leuze
    Member
    Plugin Author

    Posted 2 years ago #

    No problem Kayla!

Topic Closed

This topic has been closed to new replies.

About this Plugin

About this Topic