[Plugin: Portfolio Slideshow] Center the slideshow (7 posts)

  1. tinoro
    Posted 6 years ago #

    It's a fantastic plugin, but I want to center vertically the slideshow. There is any form to do this?

    Thanks for your time Dalton!


  2. Dalton Rooney
    Posted 6 years ago #

    Hi Tinoro,
    Can you do that with CSS? I'm honestly not sure how to make this work, there are no examples with vertical centering on the jQuery Cycle page (there are horizontal centered slideshow examples, though). Can you post a link with an example page and I'll take a look.

  3. yoyoyosef
    Posted 6 years ago #

    how about how to center it horizontally?

  4. Dalton Rooney
    Posted 6 years ago #

    You can style it any way you like with CSS in your theme.

  5. Bobby Lowbar
    Posted 5 years ago #


    I've had the same problem for ages. I figured out all you had to do was set a width of the portfolio slideshow's div and then state that all the images have a margin left and right to auto. This code works perfectly for me.

    div.slideshow-next {display: none;width:900px;}
    div.portfolio-slideshow {width:900px;margin-top:10px;margin-right:auto;margin-left:auto;position: relative;}
    div.portfolio-slideshow div.first.slideshow-next{display: block;width:900px;}
    div.portfolio-slideshow, div.slideshow-nav, div.slideshow-thumbs {display: none;}
    div.portfolio-slideshow img {margin-right:auto;margin-left:auto;}
    div.slideshow-nav {padding:0 0 6px 0;color: #999;}
    div.slideshow-nav a {color: #999;border-bottom:none;}
    div.slideshow-nav a.pause {margin: 0 15px 0 0;color: #999;border-bottom:none;}
    div.slideshow-nav a.play{margin: 0 15px 0 0;color: #999;border-bottom:none;}
    div.slideshow-nav a.slideshow-prev {margin: 0 10px 0 0;color: #999;border-bottom:none;}
    div.slideshow-nav a.slideshow-next {margin: 0 25px 0 10px;color: #999;border-bottom:none;}
    div.slideshow-thumbs {margin-top:50px;width:100%;}
    div.slideshow-thumbs img{width: 50px;height: 50px;}
    div.slideshow-thumbs ul#slides{margin:0 0 0px 0;padding: 0;}
    div.slideshow-thumbs li {display: block;float: left;list-style-type: none;padding: 0 10px 10px 0;}
    .slides a img.attachment-thumbnail {opacity:0.25;filter:alpha(opacity=25)}
    .slides a img.attachment-thumbnail {opacity:0.25;filter:alpha(opacity=25)}
    .slides li a.activeSlide img.attachment-thumbnail, .slides li.activeSlide a img.attachment-thumbnail{opacity:1;filter:alpha(opacity=100)}

  6. Dalton Rooney
    Posted 5 years ago #

    Dog Bones - thanks for posting that code! Other people have asked for this before, I will point them to your post!!!

  7. Gavinross
    Posted 5 years ago #

    Maybe i am stupid but is the above a replacement for the whole css or do I paste it somewhere else.

    Great plug in.

Topic Closed

This topic has been closed to new replies.

About this Topic