Skip to content

Loading…

Add margin-bottom to #supersized img #72

Open
neurosismann opened this Issue · 3 comments

4 participants

@neurosismann

Hey Sam!

I'm trying to figure out if there is a way to have the control bar appear below the image instead of on top of it.
I'm using mostly vertical images and their is a lot of image detail I'm loosing behind the transparent .png.

Would be a nice option for the next version maybe. Any help would be appreciated!

Something like:

#supersized img { margin-bottom: 42px; ... }

But of course that's not working.

Thanks,
George

@eayres

i think you need little jquery that targets the #supersized container (or the li tag within it by #supersized li - you'd have to see which works) and detects height of the window then shaves off the height by the number of pixels that your control bar is....something like this in your $(document).ready(function() and then again for window resize:

$('#supersized').height($(window).height() - 125);

a

@ale-barbieri

Hi everybody,
just wanted to make the solution clearer for who is coming next.
It also works better if you want to make the margin responsive using CSS media queries.

Add this script

/*  Workaround to have left/right margins on slideshow
 *  https://github.com/buildinternet/supersized/issues/72
 *  ----------------------------------------------------------------------
 */
    function resize_slideshow(margin){
        $('#supersized')
            .width($(window).width() - margin * 2);
    }
    $(window)
        .resize( function() {
            var margin = $('#supersized').css('left'),
                margin = parseInt(margin, 10);
            resize_slideshow(margin)
        })
        .trigger('resize');

and on your CSS add

#supersized {
    left: your-margin;
}

where your-margin is the value the margin will be (10px, 20px, or whatever...).
If you need then to change this value with media queries, this should not create any problem.

I'm not a professional developer so the code it's not the cleanest ever, but it does the trick.

Ale

@ghost

Thank You, Ale, Your solution works great!

@AdalDesign

Thanks for solution Ale. Unfortunately it didn't work for me. I was trying to mod it for a top margin. So instead, I created this very un-fancy yet efficient solution:

$('#supersized li').height($(window).height() - 172);

Accompanied with this CSS:

#supersized li { top: 85px !important; }
#supersized li img {
    width: auto !important;
    max-height: 100% !important;
    top: 0 !important;
}

The result being that the main image is not covered by the top nav that is 85px nor by the thumbs list below that is 87px.

Adal

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Something went wrong with that request. Please try again.