Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Responsive Image Gallery #137

Open
pbatts opened this issue Apr 8, 2015 · 9 comments
Open

Responsive Image Gallery #137

pbatts opened this issue Apr 8, 2015 · 9 comments

Comments

@pbatts
Copy link

pbatts commented Apr 8, 2015

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
Copy link

o-l-e commented Apr 8, 2015

@pbatts could you elaborate please?

@pbatts
Copy link
Author

pbatts commented Apr 8, 2015

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
Copy link

o-l-e commented Apr 8, 2015

could you show an example of this?

@o-l-e
Copy link

o-l-e commented Apr 8, 2015

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
Copy link

o-l-e commented Apr 8, 2015

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
Copy link
Author

pbatts commented Apr 8, 2015

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
Copy link

o-l-e commented Apr 8, 2015

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
Copy link
Author

pbatts commented Apr 8, 2015

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
Copy link

o-l-e commented Apr 8, 2015

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.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
2 participants
@o-l-e @pbatts