WordPress.org

Ready to get started?Download WordPress

Forums

Easing Slider "Lite"
Centering your slideshow (41 posts)

  1. MatthewRuddy
    Member
    Plugin Author

    Posted 1 year ago #

    Hi everyone. A few people have been asking me how to center align their slideshows, especially as the v2.0 update has re-aligned what was previously centered.

    For center alignment, there is a simple fix. Simply use the shortcode below:

    <div align="center">[easingsliderlite]</div>

    That should do the trick. In the future, we will be adding a shortcode attribute for this. Until then, use this!

    Matthew.

    http://wordpress.org/extend/plugins/easing-slider/

  2. Alexandre611
    Member
    Posted 1 year ago #

    Hey.
    What if you are using the function on a php file of the theme?
    I had an older version of the plugin and I managed to center the slideshow using the left padding on the options. On the latest version of the plugin there's no options for padding, so I can't center the slideshow.

  3. MatthewRuddy
    Member
    Plugin Author

    Posted 1 year ago #

    Hey, the same trick should work. Just replace the shortcode with the PHP function, like this:

    <div align="center">
    <?php if ( function_exists( 'easingsliderlite' ) ) { easingsliderlite(); } ?>
    </div>

    Should do the trick :)

  4. Alexandre611
    Member
    Posted 1 year ago #

    I had tried that but it would give me a syntax error. Turns out that I had forgot to write the closing tags for the php. lol
    Thank you for your reply though, it helped me anyway and it might help others as well.

  5. MatthewRuddy
    Member
    Plugin Author

    Posted 1 year ago #

    No problem at all :) Forgetting the tags is an easy mistake to make, always got to watch out for it!

  6. vlad90
    Member
    Posted 1 year ago #

    Not to be a party pooper, but I like to prefer to avoid deprecated markup where possible. I suppose I'll think up some convoluted css to fix it.

    edit: Probably not as simple as putting a div with a style attribute, since all the Riva Slider css is marked important. Any chance you can change the following css? It should keep it centered.

    http://oi50.tinypic.com/21e20yo.jpg

  7. MatthewRuddy
    Member
    Plugin Author

    Posted 1 year ago #

    Hi @vlad90, you're right, but using an align div is the quickest fix and has a much higher success rate than using CSS (learnt this the hard way). Setting the margin to auto doesn't always work.

    The CSS property you've mentioned has to remain the way it is to ensure the slideshow displays correctly. If you look at the CSS, the top section is rules I'd advise you don't change, important for structural purposes. The bottom section contains editable properties.

    Using important rules is never a great idea, but when it comes to ensuring that the slideshow is not destroyed visually by themes or other plugins, it is essential we override all of the possibilities to provide a solution "that just works".

    You could try putting a <div> around the slideshow and applying CSS 'margin: 0 auto;' to that, rather than altering the slideshow CSS itself. Alternatively, if you want to go "all out", you can disable the plugin styling in its "Settings" panel and use your own.

  8. aly22
    Member
    Posted 1 year ago #

    Thanks, added the tag around the PHP function in my template and back to center! Anxiously awaiting the arc effect and borders :)

  9. MatthewRuddy
    Member
    Plugin Author

    Posted 1 year ago #

    @aly22, they'll be here soon :) Stay tuned.

  10. Dawn Kelly
    Member
    Posted 1 year ago #

    I'm not very versed in code. My slideshow is no longer centered and I want to place the code you put at the top of this thread in my blog code, but I don't know where exactly to place it. Can you tell me where? Is it under "appearance," "editor"?

  11. MatthewRuddy
    Member
    Plugin Author

    Posted 1 year ago #

    If you're displaying the slideshow inside a particular post or page, you'll need to use the code above inside the post/page editor within WordPress. Simply add it to the post content.

    If you are editing the theme directly, you might need to get some help from the theme developer, if you're not familiar in doing so yourself. You'll need to use the PHP function to display the slideshow, rather than the shortcode. However, you still do the same and wrap it inside '<div align="center">' and '</div>'.

    Sadly I can't really help you much more from there. Have a look into some of the basic WordPress functionality such as shortcode and theme file structures for some information. Definitely a great place to get started.

  12. msagovac
    Member
    Posted 1 year ago #

    Hello, Matthew,

    Centering plugin looks okay. Image slides on center when resizing web browser stills good.

    This code works. Okay...

    <div align="center">
    <?php if ( function_exists( 'easingsliderlite' ) ) { easingsliderlite(); } ?>
    </div>

    But, how can I add neigbours images from left of center images and right image after center? Problems appears that center would't consistenlty if I'm resizing browser.

    if class easingsliderlite-slide is for inactive images this should be on left and right side, active class is center.

    How can I make to FULL width (full width screen) with fixed image on center and neighbour images on left and right sides?

    Maybe add duplicate of code and change function in easingsliderlite_left() and easingsliderlite_right? But how to constantly centering image on center so not moving? Hm maybe absolute class?

    Is there any plugin that can do with WP?

  13. MatthewRuddy
    Member
    Plugin Author

    Posted 1 year ago #

    Hi @msagovac, I'm not quite sure I understand, but it sounds like you are looking for a "carousel" rather than a slider. These tend to show multiple images at once, with the current active image in the center.

    Unfortunately Easing Slider can't do this.

  14. msagovac
    Member
    Posted 1 year ago #

    Hello, correct carousel. But if you resize it to full it will slides, you can view all slides (1,2,3) but only what you need it to centering all slides to page. I think that can do with this plugin too.

  15. MatthewRuddy
    Member
    Plugin Author

    Posted 1 year ago #

    I'm sorry, but I'm unsure what you mean. I'm not sure if Easing Slider can do this or not. My apologies.

  16. evgeniy.chme
    Member
    Posted 1 year ago #

    Where should I plugin this code: function.php? easing-slider/easingsliderlite.php?

  17. MatthewRuddy
    Member
    Plugin Author

    Posted 1 year ago #

    In the theme file you want to display the slideshow in. Index.php, header.php, page.php, etc. Definitely not functions.php or easing-slider/easingsliderlite.php!

  18. evgeniy.chme
    Member
    Posted 1 year ago #

    Fixed. Thank you for your help.

  19. MatthewRuddy
    Member
    Plugin Author

    Posted 1 year ago #

    No problem at all :)

  20. viv85e
    Member
    Posted 1 year ago #

    Hi,
    First thank you for taking the time to offer all this help.
    I'm not having success with the two options though, probably because I don't exactly understand your instructions.

    I tried inserting this into my home page, is that right? If so it did not work.

    <div align="center">[easingsliderlite]</div>

    Second, I tried inserting this code into my index.php without success.

    <div align="center">
    <?php if ( function_exists( 'easingsliderlite' ) ) { easingsliderlite(); } ?>
    </div>

  21. viv85e
    Member
    Posted 1 year ago #

    p.s. a link to my site vavisuals.com

  22. MatthewRuddy
    Member
    Plugin Author

    Posted 1 year ago #

    Hi @viv85e, I think I see the issue. Your theme's content area is restricted in width only allowing the slideshow to span to the dimensions it currently is.

    You'll need to find this line in your "index.php" file:

    <!-- start leftcol -->
    <div class="eleven columns" id="leftcol">

    And change it to:

    <!-- start leftcol -->
    <div class="sixteen columns" id="leftcol">

    Then, try inserting the centered code into the theme file again. Should work this time :)

  23. viv85e
    Member
    Posted 1 year ago #

    Yessss. Still tweaking some things but you've put me back on track with the site and saved me some headaches. Gracias!

  24. MatthewRuddy
    Member
    Plugin Author

    Posted 1 year ago #

    No problem at all! :)

  25. eln2
    Member
    Posted 1 year ago #

    This article very useful. I managed to hit the slider.
    But now how do you set a variable width and not fixed?
    In the parameters of the plugin you can only set a pixel width?
    I want it to be responsive.

    Thank you

  26. MatthewRuddy
    Member
    Plugin Author

    Posted 1 year ago #

    @eln2, the option for making the slideshow is underneath the width and height values. See this screenshot.

  27. eln2
    Member
    Posted 1 year ago #

    Thank you for your reply!
    Yes, but I would not want to set fixed values​​.
    I wish that the slide the practice spreads to 100% of the page.

  28. MatthewRuddy
    Member
    Plugin Author

    Posted 1 year ago #

    When responsive, the width and height values are "maximums". The slideshow will resize until it reaches the maximum width and height. It isn't possible to make it infinitely wide and high because the image resizing needs specified dimensions to work from.

    If the maximum width of your site is 960px, for example, set the slideshows width to that.

  29. eln2
    Member
    Posted 1 year ago #

    Ok thank you very much. You're very kind.

  30. MatthewRuddy
    Member
    Plugin Author

    Posted 1 year ago #

    No problem at all :)

Topic Closed

This topic has been closed to new replies.

About this Plugin

About this Topic