Cargo home Twitter Devlog

Centering slideshows

Last Updated: Dec 30, 2013 04:30PM PST

The following designs feature centered images and slideshows: CassiopeiaWarhol, Sirius, Europa, and Landsat.

If you are using Polaris, make this change to .slideshow_container in your CSS to center your slideshows:

.slideshow_container {
    cursor: pointer;
    display: block;
    margin: 0 auto 15px auto;
    position: relative;

    /* Disable selection */
    -webkit-touch-callout: none;
    -webkit-user-select  : none;
    -khtml-user-select   : none;
    -moz-user-select     : none;
    -ms-user-select      : none;
    user-select          : none;
}


If you are using any design other than the ones mentioned above, use one of the two following methods to center your slideshows instead. These methods are incompatible or unnecessary in the following designs: Polaris, Sirius, Cassiopeia, Europa, Andromeda, Vega, Runyon, Landsat.

Method 1:

To center your slideshows, add these selectors into your CSS:
.slideshow_container {
    width:100%!important;
    text-align:center;
}

.slideshow_wrapper img {
    position: absolute;
    margin: 0 auto 15px auto;
    right: 0;
} 

Find .slideshow_wrapper and .slideshow_component in your CSS and make these changes as well:

.slideshow_wrapper {
    width:100%!important;
    clear: both;
    margin: 0 auto 10px auto;
}

.slideshow_component {
    float: left;
    width: 100%;
    margin: 0;
    position: relative;
}
Note: This will cause many slideshow transitions to display incorrectly. It is recommended that you use the Fade, Scroll Up, or Scroll Down transition, or no transition at all.

 

Method 2:

If you have access to Custom HTML, you can place a script inside it to center your slideshow images automatically, based on the width of .project_content in your CSS:

	<script type="text/javascript">
$(document).ready(function(){
    centerSlideshow();
        if ( Cargo.Config.GetTemplate() == "feed" ) {
        $(document).bind('paginationComplete', function() {
            centerSlideshow();
         });
    } else {
        $(document).bind("projectLoadComplete", function(e, pid){
            centerSlideshow();
        });
    }
});

function centerSlideshow(){
    $('.project_content').each(function(){
        if ( ! $(this).hasClass("formatted") ){
            $('.slideshow_container').width($('.project_content').width());
            $('.slideshow_container img').each(function(){
                $(this).css({
                    marginLeft: $(this).attr("width")/-2 + "px",
                    left: "50%"
                });
            });
            $(this).addClass("formatted");
        }   
    });
}
</script>
For this to work, you will need to be using a slideshow transition that doesn't shift the slideshow images left or right.

If you are using the Hegel design, find .slideshow_wrapper in your CSS and make this change as well:
 .slideshow_wrapper {
    clear: both;
    margin: 0 0 10px 0;
}
tickets@cargocollective.com
http://assets1.desk.com/
desk
Loading
seconds ago
a minute ago
minutes ago
an hour ago
hours ago
a day ago
days ago
about
Invalid characters found
/customer/en/portal/articles/autocomplete