WordPress.org

Support

Support » Plugins and Hacks » [Plugin: Easing Slider] center the image

[Plugin: Easing Slider] center the image

Viewing 6 replies - 1 through 6 (of 6 total)
  • Plugin Author MatthewRuddy

    @matthewruddy

    Sorry I don’t exactly understand what your trying to achieve. Do you want the slider in the center of your page?

    To do this you could try putting the slider in a div and then setting that div to margin: 0 auto;. That should center it.

    Bob

    @rfgoetz

    I’d like to have an option (in addition to adding padding) to center the images and the shadow.

    I did try putting the slider in a div as follows:

    <div class=”myeasingslider”>[easingslider]</div>

    I then added a .myeasingslider class to my CSS.

    However, WordPress, renders Easing Slider outside of the div I created. The html is below. Not sure how to fix that.

    Bob

    —————————————

    <div class=”post-bodycopy clearfix”> <!– Easing Slider –>
    <div class=”lof-container” style=”height:300px;padding-right:0px;padding-top:0px;padding-left:0px;padding-bottom:0px;”>
    <div class=”lof-slidecontent” id=”lofslidecontent45″ style=”border:3px solid #ccc;width:480px;height:300px;”>
    <div class=”preload” style=”background-image: url(http://localhost/wp/wp-content/plugins/easing-slider/images/indicator.gif); background-attachment: initial; background-origin: initial; background-clip: initial; background-color: rgb(255, 255, 255); display: none; background-position: 50% 50%; background-repeat: no-repeat no-repeat; “>

    </div>
    <div class=”lof-main-outer” style=”background: #fff;width:480px;height:300px;”>
    <ul class=”lof-main-wapper” style=”width: 2400px; left: -1920px; “>

  • <img src=”http://localhost/wp/wp-uploads/galleries/2010smallfrontpage/20100305-DSC_3299.jpg” style=”width:480px;” alt=””>
  • <img src=”http://localhost/wp/wp-uploads/galleries/2010smallfrontpage/20100305-DSC_2968.jpg” style=”width:480px;” alt=””>
  • <img src=”http://localhost/wp/wp-uploads/galleries/2010smallfrontpage/20100305-DSC_2828.jpg” style=”width:480px;” alt=””>
  • <img src=”http://localhost/wp/wp-uploads/galleries/2010smallfrontpage/20100305-DSC_3292.jpg” style=”width:480px;” alt=””>
  • <img src=”http://localhost/wp/wp-uploads/galleries/2010smallfrontpage/20100305-DSC_3029.jpg” style=”width:480px;” alt=””>
  • </div> <div class=”lof-navigator-wapper” style=”bottom:-35px;left: 0;padding:5px 5px;”>
    <div class=”lof-navigator-outer” style=”width: 125px; height: 15px; “>
    <ul class=”lof-navigator” style=”width: 125px; left: 0px; “>
    <li style=”height: 15px; width: 25px; ” class=””><span>.</span><li style=”height: 15px; width: 25px; ” class=””><span>.</span><li style=”height: 15px; width: 25px; ” class=””><span>.</span><li style=”height: 15px; width: 25px; ” class=””><span>.</span><li style=”height: 15px; width: 25px; ” class=”active”><span>.</span>
    </div>
    </div>

    </div>
    </div><img src=”http://localhost/wp/wp-content/plugins/easing-slider/images/shadow_large.png” style=”width:480px; padding-left:0px;padding-bottom:0px;padding-top:6px;margin-left:3px;” alt=””><!– End of Easing Slider –><div style=”height: 1.4em; visibility: hidden;”>A</div>
    <div style=”height: 1.4em; visibility: hidden;”>A</div>
    <div class=”myeasingslider”></div>
    <div style=”height: 1.4em; visibility: hidden;”>A</div>
    <hr size=”2″>

I figured it out need to change two files:

Change slider.css:
——————

Change second line:

From
.lof-container {}.lof-slidecontent{ position: relative;}

to
.lof-container {}.lof-slidecontent{ position: relative; margin-left: auto; margin-right: auto;}

2. add to end of css file:

img.lof-center {
display: block;
margin-left: auto;
margin-right: auto;}

Change easingslider.php
———————–

Find the code to add the shadow Add [class="lof-center"] and delete [margin-left:'.$slider->bwidth.'px]

From:

echo '<img src="'.WP_PLUGIN_URL.'/easing-slider/images/shadow_'.$shadowstyle.'.png" style="width:'.$width.'px; padding-left:'.$padleft.'px;padding-bottom:'.$padding.'px;padding-top:'.$padtop.'px;margin-left:auto;margin-right:auto;" alt="" />'; ?><!-- End of Easing Slider --><?php

To:

echo '<img src="'.WP_PLUGIN_URL.'/easing-slider/images/shadow_'.$shadowstyle.'.png" style="width:'.$width.'px; padding-left:'.$padleft.'px;padding-bottom:'.$padding.'px;padding-top:'.$padtop.'px;" alt="" class="lof-center" />'; ?><!-- End of Easing Slider --><?php

Plugin Author MatthewRuddy

@matthewruddy

So you managed to figure it out? Good 🙂

Hi,
I am trying to get the Easing Slder to appear in the centre of my page when added to the header.php, currently it is indented to the left.

I have followed the links and instructions above from rfgoetz but it hasnt worked.

I am fairly new to php and css so still learning.

Any guidance would be appreciated – test site for now to see it is http://nickburt.co.uk

Thanks

No worries guys, site seems to have updated itself now, must have been a lag of somesort

thanks

Viewing 6 replies - 1 through 6 (of 6 total)
  • The topic ‘[Plugin: Easing Slider] center the image’ is closed to new replies.