[Resolved] Show images in a lightbox from views

[Author]

Posts

[SteBlood]

Screenshot 1 - exactly how I would like to show my posts.

I want to be able to click the images and open a lightbox view of the image.

[toolset_access role="Administrator,Trader,Overseas Trader" operator="allow"][wpv-layout-start]
	[wpv-items-found]You have [wpv-found-count] caravans available to purchase.
	<!-- wpv-loop-start -->
	<table width="100%">
		<thead>
			<tr>
				<th>[wpv-heading name="types-field-main-caravan-image"]Main Caravan Image[/wpv-heading]</th>
				<th>[wpv-heading name="types-field-caravan-images"]Caravan Images[/wpv-heading]</th>
				<th>[wpv-heading name="post-taxonomy"]Caravan Years[/wpv-heading]</th>
				<th>[wpv-heading name="post-taxonomy"]Caravan Makes[/wpv-heading]</th>
				<th>[wpv-heading name="types-field-caravan-model"]Caravan Model[/wpv-heading]</th>
				<th>[wpv-heading name="post-taxonomy"]Caravan Length[/wpv-heading]</th>
				<th>[wpv-heading name="post-taxonomy"]Caravan Width[/wpv-heading]</th>
			</tr>
		</thead>
		<tbody class="wpv-loop js-wpv-loop">
		<wpv-loop>
			<tr>
				[wpv-post-body view_template="loop-item-in-available-to-traders"]
			</tr>
		</wpv-loop>
		</tbody>
	</table>
	<!-- wpv-loop-end -->
	[/wpv-items-found]
	[wpv-no-items-found]
		<strong>[wpml-string context="wpv-views"]No Caravans found[/wpml-string]</strong>
	[/wpv-no-items-found]
[wpv-layout-end][/toolset_access]

[Waqar]

Hi,

Thank you for contacting us and I'd be happy to assist.

To show the enlarged image in a modal/lightbox on click, you can use a third-party plugin like "WP jQuery Lightbox":
https://wordpress.org/plugins/wp-jquery-lightbox/

For more specific suggestions or recommendations, I'll need to see how this view is set up in the admin area and you're welcome to share temporary admin login details, along with a link to a page where this view can be seen.

Note: Your next reply will be private and please make a complete backup copy, before sharing the access details.

regards,
Waqar

[SteBlood]

Hi Waqar, I know you're probably really busy, do you have an update on this at all?

Many Thanks

[Waqar]

Hi,

Thank you for waiting.

I apologize for the delay in getting back on this, as we had an unusually busy queue over the weekend.

If you'll go to WP Admin -> Settings -> jQuery Lightbox, you'll see instructions on how the plugin can be used to group similar images, in a lightbox gallery.

Example:

<a href="images/image-1.jpg" rel="lightbox[roadtrip]">image #1</a>
<a href="images/image-2.jpg" rel="lightbox[roadtrip]">image #2</a>
<a href="images/image-3.jpg" rel="lightbox[roadtrip]">image #3</a>

Following the same format, you can update the content in between your view's <wpv-loop>...</wpv-loop> tags ( in the "Loop Editor" section ) to:

<wpv-loop>
	<tr>
		<td><a href="[types field='main-caravan-image' output='raw'][/types]" rel="lightbox-gallery-[wpv-post-id]">[types field='main-caravan-image' title='%%TITLE%%' alt='%%ALT%%' align='center' size='custom' height='35px' resize='proportional'][/types]</a></td>
		<td>[wpv-for-each field="wpcf-caravan-images"]<a href="[types field='caravan-images' output='raw'][/types]" rel="lightbox-gallery-[wpv-post-id]">[types field='caravan-images' title='%%TITLE%%' alt='%%ALT%%' size='custom' height='35px' resize='proportional'][/types]</a>[/wpv-for-each]</td>
		<td>[wpv-post-taxonomy type="caravan-years" format="name"]</td>
		<td>[wpv-post-taxonomy type="caravan-model" format="name"]</td>
		<td>[types field="caravan-model"][/types]</td>
		<td>[wpv-post-taxonomy type="caravan-length" format="name"]</td>
		<td>[wpv-post-taxonomy type="caravan-width" format="name"]</td>
	</tr>
</wpv-loop>

I hope this helps and please let me know if you need any further assistance around this.

regards,
Waqar

[SteBlood]

Waqar,

I am a little confused.

I am sure the code you've given above works, but how does that marry in with using [wpv-heading]?

I want my output table to have sortable columns, instead of 'just' columns.

[Waqar]

Hi,

The change in the content that I shared in my last message only affects the repeating part of the loop and should not interfere with the fixed/static heading row.
( screenshot: hidden link )

Can you please test the recommended change and let me know how it goes?

regards,
Waqar

[SteBlood]

Thank you for the explination Waqar.
That worked for me.
Stay Safe, take care!

[SteBlood]

My issue is resolved now. Thank you!