search

miromannino / Justified-Gallery

Javascript library to help creating high quality justified galleries of images. Used by thousands of websites as well as the photography community 500px.
http://miromannino.github.io/Justified-Gallery/
MIT License
1.69k stars 299 forks source link

Display caption beneath image #188

Open spinachio opened 8 years ago

spinachio commented 8 years ago

Is there a way to display captions beneath images rather than inside them?

This is a great plugin, thanks for creating it!

miromannino commented 8 years ago

Hi thank you! the problem here is: how I know how big the caption should be? Also I don't really think it is appealing; have you tried to do a mockup to see how it will be? Would you like that?

spinachio commented 8 years ago

I created a mock up of my site layout before I found your plugin. I'm sure what I'm asking for will work well for my intentions. My problem is I want a responsive image gallery where the user is able to always see the caption to an image without the caption taking up any of the image area. My captions are at most two words long (they're really category titles rather than captions). I would style the CSS/text so that the caption only ever takes up one line.

What about calculating caption height as a percentage of the image height? Or could I somehow use extra code to add to the height of the containing div, allowing me to move the caption beneath the image?

estudiooka commented 7 years ago

+1

itty53 commented 5 years ago

+1, this should be a standard option on pretty much any image gallery.

Hi thank you! the problem here is: how I know how big the caption should be? Also I don't really think it is appealing; have you tried to do a mockup to see how it will be? Would you like that?

I think it's best to allow for flexibility; right now there is very little.

It's worth noting that Google's Image results page now shows a justified grid of images, along with showing captions beneath it. This update just rolled out in the last week or so.

Is it as pretty as before? That's a matter of opinion. But if Google is doing it, you can be sure people will want to emulate it. And currently it's next to impossible to achieve with this gallery, sadly enough. The gallery itself works great, but this particular item is giving me a headache.

Regarding "how I know how big the caption should be?", at a minimum you could just make one that's large enough for a single line, and then truncate the caption with ... at the end, showing the full caption in a title tag. That's how I'd do it.

acwolff commented 5 years ago

Just another approach: I show the captions as small popup hints which can also be used on mobile devices, see the first and third thumbnail in this album.

But of course captions below the thumbs would be great!

itty53 commented 5 years ago

The thing about the hover-popup is that it's no different from the built in captions: The item has to be hovered to show the data. Displaying the data at all times is the goal of showing captions underneath the images.

I spent this morning implementing a new setting, "heightAdj", which defaults to 0 (meaning standard operation). Giving that any int above 0 will provide some extra space below the image in each entry. Then the text fields just have to be manually positioned to the bottom.

A JSFiddle can be found here: https://jsfiddle.net/hmv2uner/3/.

It isn't perfect by any means, but it's getting the job done on my end.

On the JS panel, the entire minified jQuery gallery is within. The very very end has the function that triggers the gallery display, as standard, but with the new option "heightAdj".

Then the items themselves have a text-fields class element containing the text. See the CSS panel (top most rule, that's the only important one, the rest are just the defaults below). .text-fields places the text in absolute position, anchored at the bottom below the image. The CSS used prevents them from wrapping and truncates with ellipses, as I found that looked a lot nicer than multi-line fields.

If you or anyone else wants to fork or fine-tune this, feel free: Search the minified code for this.settings.heightAdj to see everywhere it's implemented. Hopefully this might inspire the author to bump this particular feature and wire it up properly. Right now the method I used is little more than a kludge.