Responsive Image Gallery

pbatts commented 9 years ago

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

o-l-e commented 9 years ago

@pbatts could you elaborate please?

pbatts commented 9 years ago

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.

o-l-e commented 9 years ago

could you show an example of this?

o-l-e commented 9 years ago

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>

o-l-e commented 9 years ago

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.

pbatts commented 9 years ago

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.

o-l-e commented 9 years ago

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.

pbatts commented 9 years ago

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.

o-l-e commented 9 years ago

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.

kolber / stacey

Responsive Image Gallery #137