Which is your preferred Gallery Style for lots of photos?

MarkSykes

Which is your preferred Gallery Style for displaying lots of photos, of the same subject matter in one gallery?
In my case the subject is theatre/theater interiors.

I'm trying out the SmugMug style, having always used the equivalent of the Collage Landscape style on my previous hosting site.
I like the idea of the Lightbox and thumbnails on the SmugMug style, but the thumbnails are too small and there's not enough of them per page.
But, I prefer the Collage Landscape style, but miss the Lightbox.

For lots of photos, I mean 100 to 500 type numbers.
Culling them to 10 to 20 isn't an option.

Do you find people are more happy to scroll and scroll the page (Collage Landscape style) as opposed to keep clicking the next page button (SmugMug style)?

Thank you.

denisegoldberg

@MarkSykes said:
Which is your preferred Gallery Style for displaying lots of photos, of the same subject matter in one gallery?

But, I prefer the Collage Landscape style, but miss the Lightbox.

Lightbox is available in Collage Landscape style (for all styles) - just click a photo to open it.

I use Collage Landscape for almost all of my galleries. For "running" galleries that I add to often I have the sort set to descending by date taken. This way the newest photos are on the top of the browser window.

I use Journal style for a few galleries, again sorted with the newest photos at the top.

MarkSykes

> @denisegoldberg said:
> Lightbox is available in Collage Landscape style (for all styles) - just click a photo to open it.
>
> I use Collage Landscape for almost all of my galleries. For "running" galleries that I add to often I have the sort set to descending by date taken. This way the newest photos are on the top of the browser window.
>
> I use Journal style for a few galleries, again sorted with the newest photos at the top.

Thank you.
Sorry, I meant the Lightbox photo frame thing, that appears alongside the thumbnails in the SmugMug gallery style.
Not when you click a photo.

denisegoldberg

@MarkSykes said:
Sorry, I meant the Lightbox photo frame thing, that appears alongside the thumbnails in the SmugMug gallery style.

Not when you click a photo.

That only shows in SmugMug style. Have you tried Collage Landscape with a different photo size specified?

Allen

The huge problem with those scroll galleries is your visitors will never re-find a photo. Plus there no way to mark or know what photos to re-look at or reference in an email. In Smugmug style you can write down the photo number (246 of 346) and return to it.

MarkSykes

@denisegoldberg said:

That only shows in SmugMug style. Have you tried Collage Landscape with a different photo size specified?

Oh OK thank you. I was hoping some CSS witchcraft and magic would fix that
I've tried larger photos, I prefer to just share smallish photos.
I'm using a 4k screen, they look small on my screen, but I've got no idea how they will appear on regular screens. My guess is pretty big.

MarkSykes

@Allen said:
The huge problem with those scroll galleries is your visitors will never re-find a photo. Plus there no way to mark or know what photos to re-look at or reference in an email. In Smugmug style you can write down the photo number (246 of 346) and return to it.

Thank you.
Good points there. I didn't think of that at all.

Richard

@MarkSykes said:

@Allen said:
The huge problem with those scroll galleries is your visitors will never re-find a photo. Plus there no way to mark or know what photos to re-look at or reference in an email. In Smugmug style you can write down the photo number (246 of 346) and return to it.

Thank you.
Good points there. I didn't think of that at all.

You can add CSS that will display an index number when you hover the mouse over a pic in a collage gallery. Works great. Nick Sherlock developed the code, though I'm not sure he's supporting it anymore. You can see it in action on my site. I'll send you the code if you want.

MarkSykes

@Richard said:

@MarkSykes said:

@Allen said:
The huge problem with those scroll galleries is your visitors will never re-find a photo. Plus there no way to mark or know what photos to re-look at or reference in an email. In Smugmug style you can write down the photo number (246 of 346) and return to it.

Thank you.
Good points there. I didn't think of that at all.

You can add CSS that will display an index number when you hover the mouse over a pic in a collage gallery. Works great. Nick Sherlock developed the code, though I'm not sure he's supporting it anymore. You can see it in action on my site. I'll send you the code if you want.

Thank you Richard. Yes, could you please send me the code.
Excellent photos on your site too

denisegoldberg

@MarkSykes said:
I've tried larger photos, I prefer to just share smallish photos.
I'm using a 4k screen, they look small on my screen, but I've got no idea how they will appear on regular screens. My guess is pretty big.

You might want to look at your site using a smaller browser window or by using a tool like http://quirktools.com/screenfly/ to see how your site looks on different sized devices.

MarkSykes

@denisegoldberg said:

@MarkSykes said:
I've tried larger photos, I prefer to just share smallish photos.
I'm using a 4k screen, they look small on my screen, but I've got no idea how they will appear on regular screens. My guess is pretty big.

You might want to look at your site using a smaller browser window or by using a tool like http://quirktools.com/screenfly/ to see how your site looks on different sized devices.

Thank you very much for the link. That's a great site.
You've answered a future question I had, before I'd even posted it

Richard

@MarkSykes said:
Thank you Richard. Yes, could you please send me the code.
Excellent photos on your site too

Thanks, Mark.

Nick's site no longer is showing his customizations, so I'll post it here. Hope he doesn't mind. Just copy and paste this into the CSS section for All Galleries. I'm only using Collage style so I don't know how well it works with other styles.

/* Display photo numbers on top of thumbnails */
.sm-gallery-tiles-container .sm-tiles-row-organic,
.sm-gallery-tiles-container .sm-tiles-column-organic,
.sm-gallery-tiles-container .sm-tiles-grid,
.sm-gallery-tiles-container .sm-tiles-vertical {
    counter-reset: thumbindex;
}
.sm-gallery-tiles-container .sm-tiles-row-organic .sm-tile-content:after,
.sm-gallery-tiles-container .sm-tiles-column-organic .sm-tile-content:after,
.sm-gallery-tiles-container .sm-tiles-grid .sm-tile-content:after,
.sm-gallery-tiles-container .sm-tiles-vertical .sm-tile-content:after {
    display:block;
    position:absolute;
    left:50%;
    top:50%;

    line-height:1em;
    margin-top:-1em;

    padding:0.5em;

    background-color:rgba(36,37,40, 0.6);
    color:white;

    counter-increment: thumbindex;
    content: "#" counter(thumbindex);
}
/* Don't include hidden photos in the count */
.sm-gallery-tiles-container .sm-tiles-row-organic .sm-tile-hidden .sm-tile-content:after,
.sm-gallery-tiles-container .sm-tiles-column-organic .sm-tile-hidden .sm-tile-content:after,
.sm-gallery-tiles-container .sm-tiles-grid .sm-tile-hidden .sm-tile-content:after,
.sm-gallery-tiles-container .sm-tiles-vertical .sm-tile-hidden .sm-tile-content:after {
    display: none;
}

/* Only show photo numbers upon hover */
.sm-gallery-tiles-container .sm-tiles-row-organic .sm-tile-content:after,
.sm-gallery-tiles-container .sm-tiles-column-organic .sm-tile-content:after,
.sm-gallery-tiles-container .sm-tiles-grid .sm-tile-content:after,
.sm-gallery-tiles-container .sm-tiles-vertical .sm-tile-content:after {
    opacity:0;

    -webkit-transition: .25s opacity;
    -moz-transition: .25s opacity;
    transition: .25s opacity;
    -webkit-backface-visibility: hidden;    
}
.sm-gallery-tiles-container .sm-tiles-row-organic .sm-tile-content:hover:after,
.sm-gallery-tiles-container .sm-tiles-column-organic .sm-tile-content:hover:after,
.sm-gallery-tiles-container .sm-tiles-grid .sm-tile-content:hover:after,
.sm-gallery-tiles-container .sm-tiles-vertical .sm-tile-content:hover:after {
    opacity:1;
}

MarkSykes

@Richard said:

@MarkSykes said:
Thank you Richard. Yes, could you please send me the code.
Excellent photos on your site too

Thanks, Mark.

Nick's site no longer is showing his customizations, so I'll post it here. Hope he doesn't mind. Just copy and paste this into the CSS section for All Galleries. I'm only using Collage style so I don't know how well it works with other styles.

Thank you very much, I really appreciate that

MarkSykes

I tried the code above and it works with all gallery styles, except for Slideshow