Centering Portfolio Slideshow plugin

Oops, wrong key, here it is:

div.slideshow-next {display: none;}
div.portfolio-slideshow div.first.slideshow-next{display: block;}
div.portfolio-slideshow, div.slideshow-nav, div.slideshow-thumbs {display: none;}
div.slideshow-nav {padding:0 0 6px 0}
div.slideshow-nav a {text-decoration:underline; color: #444444;}
div.slideshow-nav a.pause {margin: 0 15px 0 0;}
div.slideshow-nav a.slideshow-prev {margin: 0 10px 0 0;}
div.slideshow-nav a.slideshow-next {margin: 0 25px 0 10px;}
div.slideshow-thumbs {width:600px;}
div.slideshow-thumbs img{width: 75px;height: 75px;}
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 0 0;}
.slides a img.attachment-thumbnail {opacity:0.5;filter:alpha(opacity=50)}
.slides a img.attachment-thumbnail {opacity:0.5;filter:alpha(opacity=50)}
.slides li a.activeSlide img.attachment-thumbnail, .slides li.activeSlide a img.attachment-thumbnail{opacity:1;filter:alpha(opacity=100)}

Hi there – can you post a link?

I’ve not put it on my site yet as I really want in to be centered before putting anything live but here’s my site if that helps?

It’s hard to say without seeing the slideshow in action on your page. One thing that I am pretty sure about is that you will need to create a fixed-width div to contain your images. Here is Mike Alsup’s demo of centered images using cycle.js, maybe this will help:

https://jquery.malsup.com/cycle/div-center.html

Try checking the source on that and see if it makes any sense.

Regards,
Dalton

Hello,

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)}

I have placed the description and title to the right of the slideshow, unfortunatly when there is a vertical image the title and description moves along and is no longer aligned with other elements of the right side. Since I dont want (nor is able to do) that the text just stays on the right side, I would like to have the image to spread from right to left instead.

If I just change the margins the horizontal image will also move and spread under the text…not nice.

I would love some help on this matter!