stacey Responsive Image Gallery

I've been working on a responsive (mobile friendly) layout for Stacey and the image gallery has me totally stumped. I don't know JavaScript very well. I have managed to figure out that the problem I am having is related to the divs image-wrapper and image-holder. Single images work perfectly with what I currently have but multiple images in a project folder that invoke the image gallery just run off of the page when re-sizing.

Thanks

Apr 08 '15 12:04 pbatts

@pbatts could you elaborate please?

Apr 08 '15 18:04 o-l-e

For a single image I can use CSS to resize the image with the size of the window with:

    img { 
        max-width: 100%;
        height: auto;
    }

But no matter how I apply that same style to #image-wrapper and #image-holder it doesn't work on a project with more than one image. When the window is resized (smaller) the image overflows off of the page.

Apr 08 '15 21:04 pbatts

could you show an example of this?

Apr 08 '15 21:04 o-l-e

try this, if i understant you correctly:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>Title</title>
    <style>
        *               { padding: 0; margin: 0; }
        .container      { margin: 0 auto; max-width: 70%; background: lightyellow; min-height: 100px; }
        .image-wrapper  { }
        .image-wrapper-2{ }
        img             { max-width: 100%; height: auto; vertical-align: middle/*removes space between images*/; }
    </style>
</head>
<body>
    <header class="container cf">
        Header
    </header>
    <div id="main">
        <div class="container">
            Main
        </div>
        <div class="image-wrapper">
            <img src="http://placehold.it/1536x768/eee" />
        </div>
        <div class="image-wrapper">
            <img src="http://placehold.it/1536x768/bbb" />
        </div>
        <div class="image-wrapper">
            <div class="image-wrapper-2">
                <img src="http://placehold.it/1536x768/ddd" />
            </div>
        </div>
        <!-- next one has no wrapper -->
        <img src="http://placehold.it/1536x768/222" />
    </div>
    <footer class="container">
        Footer
    </footer>
</body>
</html>

Apr 08 '15 21:04 o-l-e

oh, are you using id's on more than one element? "...But no matter how I apply that same style to #image-wrapper and #image-holder it doesn't work...". If this is the case, use classes not id's.

Apr 08 '15 22:04 o-l-e

Thanks for the input @o-l-e. I appreciate you taking a look at this.

I apologize for not explaining myself better.

The problem I am having is specific to the Stacey core. Whenever a project directory contains more than one image the js gallery is automatically invoked. If there is only one image in the project directory, no gallery.

Responsive scaling of the images works perfectly for a project with a single image but does not work for a project with multiple images.

I hope that makes better sense.

Here is an example of a page with a single image. http://guitdev.com/Stacey%20Image%20Test/

Here is an example of a page with the image gallery. http://guitdev.com/Stacey%20Image%20Test/project-name-3/

Thanks again.

Apr 08 '15 23:04 pbatts

I think i know what you are saying now. But (and with all respect to the default gallery in stacey), i would use a different slider plugin if where you. The default gallery in stacey is not really made for responsive images i think, so maybe you should try some other? A few good sliders would be: http://dimsemenov.com/plugins/royal-slider/ (not free, but very robust) http://kenwheeler.github.io/slick/ (have not tried this yet, but looks good) http://responsiveslides.com (very simple and light, have tried it. No swiping or lazy loading, just very plain) http://flickity.metafizzy.co (have not tried this yet, but looks brilliant)

There are many others out there, but if you are simply looking to make the stacey gallery responsive(and no swiping or video etc) i would try the ResponsiveSlides plugin. It would do the job.

Apr 08 '15 23:04 o-l-e

Yeah, my first thought, after not being able to get it to work, was to go with a different slider/gallery plugin. I really wanted to make this one work. Thanks for the links. I will give them a look.

Apr 08 '15 23:04 pbatts

Let me know how it goes, i would be happy to help, if/when i find the time :) As i said, if you just want to keep it simple, go for the third one.

Apr 08 '15 23:04 o-l-e