Hi,
I need a link to a gallery.
I worked with thi code:
[wpv-for-each field="wpcf-accommodation-gallery"]
<a class="thickbox" rel="gallery" href='[types field="accommodation-gallery" raw="true" link="false"][/types]'>[types field='accommodation-gallery' class="accommodation-gallery" title='%%TITLE%%' alt='%%ALT%%' align='left' size='custom' width='150' height='150' resize='proportional' separator=', '][/types]</a>
[/wpv-for-each]
It works with images displayed.
I need to use it just to create a button link "Show pictures" opening the thumbnail without the preview images.
How can I seti it?
The thick box is not intended to work like that.
As you see you need to have that HTML in a for each ShortCode, so it applies to EACH post in a Loop.
If you want a Button, that opens something (for example a View, that lists Pictures in a certain Gallery layout) then you can add that button anywhere you want.
If this is a repeating field Group and you want to open that specific Group with the Button - it's the same, just that you would add the Button HTML in the Loop and a PopUp or Modal linked to it, and within that Modal's HTML, a foreach code showing the single repeating fields images.
The thick box as you use it however is exactly made to have thumbnails (many) linked to (single) bigger images.
I think if I understand you right, you just want a button instead of single preview image, so just change the Title:
[php]
[wpv-for-each field="wpcf-accommodation-gallery"]
LINK TEXT
[/wpv-for-each]
Buttons are HTML syntax:
versteckter Link
Hi Beda,
I tried with this
[wpv-for-each field="wpcf-accommodation-gallery"]
<button><a class="thickbox" rel="gallery" href='[types field="accommodation-gallery" raw="true" link="false"][/types]'>LINK TEXT 2</a></button>
[/wpv-for-each]
The result doesn't sounds good. In this way I have many button.
The result I aspected is one button to many images
Yes, this is what I outlined.
That Code, in the [wpv-for-each field="wpcf-accommodation-gallery"], applies to each instance of a Field.
The rest, in it, is simple HTML and will be repeated as many times there are fields.
So, if you want a button that does not repeat, but instead when you click, it opens those repeating fields in one place, then you need to put the Button's HTML in one place (where it cannot repeat, usually, OUTSIDE the loop)
After, INSIDE the loop (or if it's a repeating fields just for the field) you apply the foreach code.
That, must be wrapped in the container that you hide/show with the click on the button, exactly the same way as your current link/target works.
This is the basic HTML that you need, you can grab it from here:
versteckter Link
versteckter Link
Example is above, this below is for the Toolset details
OUTSIDE THE LOOP
Button (outside the loop or foreach) as in <em><u>versteckter Link</u></em>
<!-- Button trigger modal -->
<button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">
Launch demo modal
</button>
INSIDE THE LOOP
If clicked open a previously hidden HTML container:
(anything, really, this is just an example, it requires any HTML container that you can hide/show)
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
<div class="modal-dialog" role="document">
<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>
<h4 class="modal-title" id="myModalLabel">Modal title</h4>
</div>
<div class="modal-body">
THIS IS WHERE YOU INSERT YOUR LOOP OR FOR EACH
(this will show when you click the button, hence here you want either your view, displaying only images, or a Repeating field that is showing images in a certain grid layout)
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
</div>
When you take the button out of either the loop or foreach (since you do not need it for each) it'll be solved.
