Skip to content
Grav 2.0 is officially stable. Read the announcement →
Archive

Lightbox

Started by Muut Archive 11 years ago · 9 replies · 898 views
11 years ago

What we see in documentation:
LightBox image title
...but it doesn't work.
LightBox image title
...works fine.
Why?

P.S. In Russian: Ребята, то, что вы делаете, нереально круто. Это вне мыслимых пределов даже для меня, старой айтишной собаки. Восхищён!

11 years ago

Oops... How can I put the code? Exuse moi...

11 years ago

Please, see a LINK in the first message. "&" vs "," there. Thanks.

11 years ago

Congratulations, you found a typo. I've fixed the docs now. Should be:

TXT
![Sample Image](sample-image.jpg?lightbox=1024,768&cropResize=200,200)
11 years ago

Is there a way to add a "close-button" to the lightbox?

11 years ago

there is a close button in the top right corner if you use the Featherlight plugin.

11 years ago

Hm, it seems not to be working correctly ... I have added <a href="geschichte/1.jpg" data-featherlight="image">Open image in lightbox</a> to my default.md but when I click on the link the image is displayed with a black background (not really lightbox-style).

11 years ago

Damn, I cant't get this working ... Here's what I did regarding the documentation:
1) copy plugin to /users/plugins/featherlight
2) copy featherlight.yaml to /users/plugins
3) created the following link in my default.md: Sample Image

The image shows cropped in the page but when I click on it, it opens in a new window (no lightbox-style). What I`m doing wrong?

What I want to have on my site:
1) a small image centered on my page (dummy_small..jpg)
2) on click it should display in a lightbox a bigger picture (dummy.jpg)

11 years ago

First off, you should install the plugin with GPM, this is the preferred approach.

BASH
$ bin/gpm install featherlight

You shouldn't even need to copy the .yaml file unless you plan to change any of the default settings. It should just work at this point if you use the correct link format. I can't really tell what your link was because you didn't put it in back ticks to display it as code. but should be something like this:

TXT
![Sample Image](sample-image.jpg?lightbox=1024,768&cropResize=200,200)

If that doesn't work, then as I said before check your browser developer tools to see if there are any errors. Maybe you can upload some screenshots of what you are seeing of even better, provide a link to the site so I can see it for myself.

Suggested topics

Topic Participants Replies Views Activity
Archive · by Deleted User, 9 years ago
0 1323 9 years ago
Archive · by Muut Archive, 9 years ago
2 920 9 years ago
Archive · by Muut Archive, 9 years ago
2 4048 9 years ago
Archive · by Muut Archive, 9 years ago
1 2924 9 years ago
Archive · by Muut Archive, 9 years ago
3 1106 9 years ago