Forums

Meteor Slides
[closed] Adding images near to the slideshow (10 posts)

  1. dkingalon
    Member
    Posted 4 months ago #

    Hello,
    i want in my site to add 4 buttons near the slideshow,2 in the left and 2 in the right,and those buttons will change the Slides every time i go on them (like hover).
    The buttons should be a simple text, how can i do that and which file should i edit ?

    Thanks in advance

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

    [No bumping, thank you.]

  2. JLeuze
    Member
    Posted 4 months ago #

    You can add thumbnail navigation to the slideshow, but it's complicated and might not work for what you want to do if those buttons need to be different than the slide image they need to go to.

    But you can more easily do this just using CSS. First, make sure you use a custom stylesheet in your theme so that you don't lose any changes when you update the plugin.

    Now, what you need to do is create a background image for your slideshow that has those four buttons built into it. Like mock the thing up in Photoshop how you want it to look and use that as the background image of the .meteor-slides slideshow container. After that you can add some padding to the slideshow container and some margins to the slides so that the slideshow is positioned within the background how you want it.

    Then you can take the four paged buttons and style them differently.(make sure paged nav is on and the slide quantity is set to 4). You can see in the CSS that they have a number in them which is hidden and a background image added. Leave the text indented and just get rid of the background. You will need to change the size to match your buttons, make the .meteor-buttons container large enough to cover all four buttons, and then move the four buttons around to overlap the buttons in the background.

    The tricky part will be styling the pager buttons to fit over the graphics as you cannot style each one individually, they have to all have the same CSS rules. Firebug will be a big help in positioning them.

    Finally, if you want the buttons to work on hover instead of click, there's an option for that, you can use metadata to change it.

  3. dkingalon
    Member
    Posted 4 months ago #

    Hello, you can see in my website that i made a built in spaces for hte buttons,so those should be just texts.
    the website is : http://www.iatar.co.il
    I want the 4 little bullets in the bottom of the slideshow will stay and there will be more 4 buttons with in the places you can see.
    How can i do that ?
    i didnt understand what you were trying to tell me

  4. JLeuze
    Member
    Posted 4 months ago #

    You won't be able to keep the paged navigation as bullets and use it as for the larger buttons on the left and right, you need to use it for one or the other.

  5. dkingalon
    Member
    Posted 4 months ago #

    I can try.. this could be very useful for me and other members
    I search the bullets code i thought maybe i will be able to copy it to the larber buttons,but i couldn't find it.
    Can you send it to me modified to 4 posts ?

    And assuming i cant do that.. can you explain me again how can i take those little bullets and spread them where i need them to be with hover ?

  6. JLeuze
    Member
    Posted 4 months ago #

    The code for the paged navigation is dynamically generated by the slideshow script, so if there are two slides it makes two buttons, and for four slides it makes four buttons. So you can just make a second copy of those buttons, there is only the one set you have to work with in your stylesheet.

    The first thing you would have to do is set the overflow of the slideshow to visible and change the size and position of the .meteor-buttons container to overlap the four buttons.

  7. dkingalon
    Member
    Posted 4 months ago #

    How do i do that?
    I don't know css so well, can you give me the codes i need ?
    Thank you very much for your support

  8. JLeuze
    Member
    Posted 4 months ago #

    This is a unique layout, you're going to have to do some custom CSS to get it to look like that.

  9. dkingalon
    Member
    Posted 4 months ago #

    would you like me to pay you to do that ?

  10. esmi
    Theme Diva & Forum Moderator
    Posted 4 months ago #

    Please try http://jobs.wordpress.net/
    Topic now closed as per the Forum Rules

Topic Closed

This topic has been closed to new replies.

About this Plugin

About this Topic