Multiple images in the same lightbox

[SM-26]

Hello!

First and foremost, thank you! works amazing! and so far I love the zoomable option

but I was wondering if its an option to put more than one picture in the same lightbox? if so, what is the syntax?

when I zoom in, I already see 1/1 so, how can I tell him that there is more than 1 picture for this lightbox?

Thanks in advance. @mementum maybe you have any idea?

my code is here: https://gitlab.com/SM26/swm_wiki and the output is here: https://sm26.gitlab.io/swm_wiki/SM500R/info%20and%20specs/

label:question

[SM-26]

is this still under some kind of development?

I'm getting error from the Setup.py script... Any ideas?

gcc -Wno-unused-result -Wsign-compare -DNDEBUG -g -fwrapv -O3 -Wall -DTHREAD_STACK_SIZE=0x100000 -fPIC -I/usr/local/include/python3.8 -c regex_3/_regex.c -o build/temp.linux-x86_64-3.8/regex_3/_regex.o
     unable to execute 'gcc': No such file or directory
     error: command 'gcc' failed with exit status 1

 ERROR: Command errored out with exit status 1: /usr/local/bin/python -u -c 'import sys, setuptools, tokenize; sys.argv[0] = '"'"'/tmp/pip-install-4ni54tk0/regex/setup.py'"'"'; __file__='"'"'/tmp/pip-install-4ni54tk0/regex/setup.py'"'"';f=getattr(tokenize, '"'"'open'"'"', open)(__file__);code=f.read().replace('"'"'\r\n'"'"', '"'"'\n'"'"');f.close();exec(compile(code, __file__, '"'"'exec'"'"'))' install --record /tmp/pip-record-mph920yo/install-record.txt --single-version-externally-managed --compile --install-headers /usr/local/include/python3.8/regex Check the logs for full command output.

[StanzillaManticore]

I don't think it's maintained, no

[SM-26]

Just wanted to point out that I sorted the problem with the build (if anyone ever encounter it again)

TL;DR: change the start of the YML to this:

image: python:3.7-stretch

More info about what help me understand it is here: https://stackoverflow.com/questions/58718993/gitlab-ci-failing-to-install-regex-from-pipfile-lock

https://pypi.org/project/regex/ does not (yet) has support for python 3.8, it's still on 3.7.

I'm guessing that once in a while this error will occur to some folks, and I hope this will help

[g-provost]

As for now this extension only support a single image per lightbox. It would be effectively great to be able to add multiple picture under one lightbox since the lightgallery

However this would require most probably to create a dedicated markup and rethink completely this extension markdown processor. Need to think about it.

[SM-26]

I'd love to help in any way I can. I'm not sure my coding skills are up to the task, but I'll lend a hand wherever I can.

[0timsmit0]

Those looking for a quick hack to enable multiple images in the same lightbox, this seemed to work for me. Note that I'm not a web developer and this could probably be done more nicely.

It requires patching the lightgallery.py and main.html file, and will only work for one lightbox per page (but more should be doable). Note that after modifying lightgallery.py the plugin will need to be reinstalled (this may require manual removing of previously installed files, run python setup.py install --record files.txt to see which in files.txt, or better use a venv)

Firstly, remove the encompassing div element from the generated html in lightgallery.py (line 26-36):

#div_node = etree.Element('div')
#div_node.set("class", "lightgallery")
new_node = etree.Element('a')
new_node.set("class", "lightgallery-item") # add class to anchors
new_node.set("href", image.attrib["src"])

if self.config["show_description_in_lightgallery"]:
    new_node.set("data-sub-html", desc)

new_node.append(image)
#div_node.append(new_node)
parent.insert(ix, new_node) #Note the new_node here

This basically adds a lightgallery-item class to each image link in the page, which we will use in main.html:

    {{ super() }}
    <script>
    var elements_old = document.getElementsByClassName("lightgallery");  // Leave this in for backward compatibility if you like
    for(var i=0; i<elements_old .length; i++) {
       lightGallery(elements_old [i]);
    }
    // new part:
    var elements = document.getElementsByClassName("md-content");  // the encompassing content div to scan all elements in
    for(var i=0; i<elements.length; i++) {
       lightGallery(elements[i], {selector:'.lightgallery-item'}); // creates the lightGallery with multiple items selected with selector
    }
    </script>

Untested but will probably also work:

<script>
$('.md-content').lightGallery({
    selector: '.lightgallery-item'
});
</script>

If anyone has improvements or comments feel free to post. Enjoy!