WordPress › Support » [Plugin: Meteor Slides] Center slideshow within div and move buttons

Aloris
Member
Posted 6 months ago #
Hello,

I'm using weaver 2.2.6 and this plugin is the first option if we want slideshow and now I see why, is really good plugin for us! thank you.

I was wondering if someone could help me out.

I have been testing centering the slideshow within a div inserting the CSS code in HEAD section in Advanced options in Weaver and I think I'm close. It looks like this:
http://socceroid.com/blog/?page_id=2

You can see that the first is the slideshow itself, below of it is an example image of how I would like the slideshow within the div.

In words would be:
* I would like to have it centered horizontally and vertically within the div (within the blue background).
* Move a little the Prev button to left and the Next button to right to appear in the blue area and the button that are below the slides I would like them centered horizontally.

The code I have so far is:
HTML:
```
<div id="apDivMenuSlide">
   [meteor_slideshow]
</div>
```
CSS:
[CSS moderated as per the Forum Rules. Please just post a link to your site.]

Any help would be very appreaciated.

Greetings

http://wordpress.org/extend/plugins/meteor-slides/
JLeuze
Member
Posted 6 months ago #
Hi Aloris, it looks like you already have the slideshow centered horizontally using auto margins, to position it vertically, try adding some padding to the top like this:
```
#apDivMenuSlide {
    background-color: #000033;
    border: 4px solid #D49F17;
    border-radius: 50px 50px 50px 50px;
    box-shadow: 5px 5px 5px 2px rgba(47, 178, 55, 0.5);
    height: 335px;
    margin-left: auto;
    margin-right: auto;
    padding: 15px 0 0;
    width: 540px;
}
```
You can get the prev/next nav outside of the slideshow just by changing the positioning:
```
.meteor-nav .prev a {
    left: -32px;
}

.meteor-nav .next a {
    right: -32px;
}
```
Make sure that you using a custom stylesheet rather than editing the stylesheet inside the plugin.
Aloris
Member
Posted 6 months ago #
Hey JLeuze,

Thanks for your reply, your code works as I need thank youuu.

But I'm trying without success to center the buttons that are below of the slides. Currently they are to the left.

I've tried with:
```
#apDivMenuSlide .meteor-nav .meteor-buttons {
    right: 100px;
}
```
But is not working.

Additionally, is there a way to show those buttons that are below of the slides as thumbnails of the slides?

Thanks for help so far.

Regards
Aloris
Member
Posted 6 months ago #

Hello again JLeuze,

I've been able to center the buttons below the slide but using the same CSS rules in another website that has running under weaver 2.2.6 the prev and next buttons are being cutted when I try to move them outside the slide area, please see this test page.

As you can see with firebug, the images are shifted to the left within the slideshow box even when it looks the slideshow box is centered within the div. The images aren't filling completely the slideshow box.

If I move Next button to the right let say 30px, it disappears.
If I move Prev button to the left let say 30px, it disappears.

Please some help on this:

Many thanks in advance.
JLeuze
Member
Posted 6 months ago #
The navigation is being cutoff because of the overflow, set it to visible on the main slideshow container and they will show up:
```
.meteor-slides {
    margin: 0;
    overflow: visible;
    padding: 0;
    position: relative;
    z-index: 1;
}
```
For the paged buttons, there is no good way to make them auto center because it is absolutely positioned. You are doing it just right by changing the left position to center it based on a certain number of slides.
Aloris
Member
Posted 6 months ago #

Hello Jleuze,

Many thanks for your support, that fixed the cutoff problem, I could center the slide moving it left because for some reason margin:0 doesn't work.

The last question, It seems the rules work but only when I inserted them in <HEAD> section within Weaver Admin-->Advance Options. If I use this rules putting a custom stylesheet in theme's directory, doesn't work.

My confusion is because when I put the same custom stylesheet in the other website doing the same steps, it works, only the behaviour in this website is different.

How can I do to work the custom stylesheet in the other website?

Many thanks for your help.

Regards
JLeuze
Member
Posted 6 months ago #

Are you trying to create your own custom stylesheet for your theme, or are you trying to add a custom stylesheet for Meteor Slides?
Aloris
Member
Posted 6 months ago #

Hello JLeuze,

I've been trying following the steps in your link about custom stylesheets.

I've copied the meteor-slideshow.css into weaver directory and this css file is the same as the original except that has the changes to the rules to center slideshow and move buttons. Besides that contains a rule for the div where the slideshow is centered.

I've tried the same file and copying the png buttons to images theme folder and works in one site, but in other site doesn't work doing the same steps. In this 2nd site, in order to get the changes I want, I have to add the rules into <HEAD> section within Advance options of Weaver.

I'm not sure why the behaviour is different in both sites using the same theme (weaver 2.2.6) and using the same CSS code for the div and same images size (467x300 px).

Thanks for your help really.

Regards

JLeuze
Member
Posted 6 months ago #

It looks like it is loading fine from your theme to me:

<link rel='stylesheet' id='meteor-slides-css'  href='http://socceroid.com/blog/wp-content/themes/weaver/meteor-slides.css?ver=1.0' type='text/css' media='all' />

Or are you referring to a different site?

Aloris
Member
Posted 6 months ago #

Thank you for all your help. I found what was the problem. My error, the other website's server has another config for files, then the file meteor-slide.css in theme directory it had not permissions. I changed to 774 and works. I only had to change a little bit the same rules because for some reason, the rules exactly as in the other site didn't work. I mean, some pixel more or less.

My very last question, is possible to show thumbnails below the slides (replacing the slide buttons that are below the slideshow)?

Many thanks to guide me to solve my problem.

Best regards
JLeuze
Member
Posted 6 months ago #

That's good news! It is possible to add thumbnail navigation, but it takes quite a bit of customization. You will need to use a custom slideshow template and a custom script, this thread is a good starting point.
Aloris
Member
Posted 6 months ago #

Many thanks for your kinf and great support through all the thread.

With the info you share to get a thumbnail navigation I hope I could get that feature working.

Many thanks again really man.

Best regards
JLeuze
Member
Posted 5 months ago #

No problem at all!
LooseNeutral
Member
Posted 4 months ago #

I think this topic is close to what I'm searching for, here in these forums. I'd like to place this (great!) slideshow in <div id="main"> just under the nav/menu bar in my Twenty Eleven "Child" theme. I've expanded that area to be the size of the header banner. I'm clueless as to how to go about it. I see that bit of code @ line 124 in the header.php file. Would appreciate a little hand holding here on this issue. Thank you
LooseNeutral
Member
Posted 4 months ago #

Okay, I apologize .... I got it working! YaY ! "I love this plugin". Thank you. Keep it simple JL. It's better for me to add functions than to take one with all the layers built in and strip it down. Now to track down some adjustments mentioned here 1n these posts. :)
LooseNeutral
Member
Posted 4 months ago #

:\ spoke to soon! Slide show now shows in area above the <div id="main"> while the [meteor_slideshow] words are now seen on the page inside the <div id="main"> . I placed a border around it in hopes to have the slide show inside of it. not above.
here's what I used in a copy of the header.php file placed in my "Child" theme. @ line 124

<?php if ( function_exists( 'meteor_slideshow' ) ) { meteor_slideshow(); } ?>
<div id="main">
[meteor_slideshow]
</div>

this pushes the div bordered area down. and the slideshow appears in the area under the menu (which is what I want). I don't want to see the words "[meteor_slideshow]" in the div .. would much rather the slideshow appear inside the borders. help me please! Thanks
JLeuze
Member
Posted 4 months ago #
The template tag (<?php if ( function_exists( 'meteor_slideshow' ) ) { meteor_slideshow(); } ?>), and the shortcode([meteor_slideshow]), both do the same thing. The template tag is for adding the slideshow directly to a theme file and the shortcode is for adding it to a post or page in the visual editor.

For what you want to do, use just the template tag, like this:
```
<div id="main">
<?php if ( function_exists( 'meteor_slideshow' ) ) { meteor_slideshow(); } ?>
</div>
```
LooseNeutral
Member
Posted 4 months ago #

Thanks for such a quick response! Ah, so I didn't need to include the extra [meteor_slideshow]in there as I showed in the post above. you'll most likely see me post up questions on some other topics you've covered, I just need a bit more clarification. I'm also interested in running it as a back ground. Just want to keep options open. The topic was posted here but was vague in answer as you pointed out it's more involved. Any other posts here or information you could point me to would be much appreciated. Again, thanks for the quick response, this plugin works well out of the gate you can add function as needed. Awesome!
JLeuze
Member
Posted 4 months ago #

No problem, glad that helped! The best place to start would be in the Meteor Slides documentation.
tgt2882
Member
Posted 3 months ago #
Hi JLeuze,

What great support! and what a great plugin. thanks for all your work and contributions.

I'm having problems trying to get the nav buttons to display outside the actual slides. I've tried changing the main overflow as descried above to
```
.meteor-slides {
    margin: 0;
    overflow: visible;
    padding: 0;
    position: relative;
    z-index: 1;
}
```
but it doesn't seem to be working. they still disappear when i place the outside. The other thing is i've got the slider at a lower z-index than an image I'm using over it as a frame. Is there any way to have just the nav buttons at a higher z-index, and the slides lower?

here's the page: http://www.bouncemedia.ca

Thanks!
JLeuze
Member
Posted 3 months ago #
The overflow is set to hidden in the jQuery, so you need to set it to important to override it with CSS:
```
.meteor-slides {
    margin: 0;
    overflow: visible !important;
    padding: 0;
    position: relative;
    z-index: 1;
}
```
One issue with this is that the overflow is intended to crop the slides in some the transitions like "scrollRight", to use this effect you have to use a simpler transition like "fade".

To get the layers right with the z-index, they image frame would have to be at the same level in the markup as the slide navigation by adding it to the slideshow using a custom slideshow template. This way you can stack the navigation, then the image frame, and finally the slides. The way it is setup now, the frame has to be stacked above or below the whole slideshow.
tgt2882
Member
Posted 3 months ago #

Great thanks for the help. It appears that the fact that it was sliding and not fading was the issue.

I'll look at adding the image in the template. The one thing i'm confused about is creating a custom css style sheet. In the instructions you provide, you say to copy meteor-slides.css into my theme folder. I have copied it there (in the root of u-design folder) but the plugin doesn't seem to be pulling from there. Am I missing a step?

Thanks again and keep up the great work :)
tgt2882
Member
Posted 3 months ago #

oops! i got it working - was just a matter of moving the image files and re-pointing to them in the new css file within my theme folder.

thanks!
tgt2882
Member
Posted 3 months ago #

Okay So i'm working on stacking the image slides, navigation, and the frame i designed. This is a bit advanced for me, but I'm going to give it a shot.

here's my approach:
To change the stacking order - would i do this by inserting the image within the template, then give the class for each element (nav, slides, frame) the appropriate z-index within the css file?
JLeuze
Member
Posted 3 months ago #

it looks like you have it working great. That's exactly right, you need to set the frame to the highest z-index, the nav just below that, and the slides will automatically start at 1 and work their way up with each slide.

Reply

You must log in to post.

WordPress.org

Forums

Meteor Slides
Center slideshow within div and move buttons (25 posts)

Reply

About this Plugin

About this Topic

Tags

Code is Poetry

WordPress.org

Forums

Meteor Slides Center slideshow within div and move buttons (25 posts)

Reply

About this Plugin

About this Topic

Tags

Code is Poetry

Meteor Slides
Center slideshow within div and move buttons (25 posts)