WordPress.org

Ready to get started?Download WordPress

Forums

Centering Portfolio Slideshow plugin (7 posts)

  1. girlswishlist
    Member
    Posted 3 years ago #

    Hi,

    I've donloaded a great gallery plugin - Portfolio Slideshow but it's showing the images left aligned and I really want them in the center instead. I have no CSS knowledge, if there's anything I can change here to make the images center aligned that'd be a great help. Here's the current CSS:

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

    Thanks

    Girls Wishlist

  2. girlswishlist
    Member
    Posted 3 years ago #

    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)}
  3. Dalton
    Member
    Posted 3 years ago #

    Hi there - can you post a link?

  4. girlswishlist
    Member
    Posted 3 years ago #

    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?

  5. Dalton
    Member
    Posted 3 years ago #

    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:

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

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

    Regards,
    Dalton

  6. Bobby Lowbar
    Member
    Posted 3 years ago #

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

  7. klarabara
    Member
    Posted 2 years ago #

    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!

Topic Closed

This topic has been closed to new replies.

About this Topic