[Resolved] Button linked to a gallery open lightbox + Show images in edit form horizontally

[Author]

Posts

[Jaime]

-> Hi there. The first thing is I have two questions, so I'm not sure if it's better to add two tickets. If it's better just tell me and I'll open a new ticket with the question not resolved.

1 question)
I have a button which opens an image gallery, but I can only do it via bootstrap modal. What I want to do is when click the button it opens lightbox directly.
You can see the button here ("VER GALERIA"). In the top of the page.
hidden link

My code is this (but I don't want to launch the modal, but launch the lightbox with the field "wpcf-galeria-de-imagenes"):

<button type="button" class="btn-personalizado" data-toggle="modal" data-target="#myModal">VER GALERÍA</button></p>
</div>
<p><!-- Modal --></p>
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
<div class="modal-dialog modal-lg" role="gallery">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button></p>
<h3 class="modal-title" id="myModalLabel"><center>Galería de imágenes de [wpv-post-title]</center></h3>
</div>
<div class="modal-body">
<div class="row">
<p>[wpv-for-each field="wpcf-galeria-de-imagenes" start="1"][types field='galeria-de-imagenes' title='[wpv-post-title]' alt='' align='inline' size='custom' width='150' height='150' resize='crop' style="margin-right: 2px"][/types][/wpv-for-each]</p>
</div>
</div>
<div class="modal-footer">
<center><button type="button" class="btn btn-danger" data-dismiss="modal">Cerrar</button></center></div>
</div>
</div>

2 question)

I have a multi select field with images which creates a gallery.
Inside the edit form this field shows the images vertically (View screenshot).
Is it possible to show them horizontally inside the edit form? I would be more elegant.

[Luo Yang]

Hello,

Q1) Please elaborate the question with more details
What kind of lightbox do you want?
How do you setup the light box? with custom JS/CSS codes?

Q2) Yes, it is possible with some custom CSS codes, for example:

.wpt-repctl.wpt-repctl-flex {
    display: inline-flex;
    width: 22%;
    margin-right: 1%;
    top: 0px;
}

See screenshot: inline-flex.JPG

[Jaime]

Thanks a lot Luo!
Q2) Solved!
🙂

Q1) Sorry, I wasn't enough detailed.

What I mean with Lightbox is:
- When I click in an image from my gallery, it opens in a full page mode, with prev/next navigation. (This Lightbox I'm referring) Actually I didn't insert any code. I guess it came with my Theme.

The step by step which I have now (and you can follow in the page I provided to you) is:

A) User clicks on button "VER GALERIA"
B) A Modal opens with the gallery inside
C) User clicks on an image
D) The lightbox opens

The step by step I want to reach:

A) User clicks on button "VER GALERIA"
D) The lightbox opens

I hope it's detailed enough. If it's not, please tell me and I'll try to be more specific.

[Luo Yang]

Thanks for the details, I can see the images lightbox according to the steps you mentioned above.

But you did not answer my above question:
How do you setup the lightbox in your website? with other plugins/custom JS codes?

I have tested your webpage, it seems that it is setup by JS framework "Magnific Popup":

If it is, you will need to setup the lightbox by following their document:
hidden link

[Jaime]

My issue is resolved now. Thank you!