I am trying to:
This page used to work fine, filtered or not:
It uses this in the loop editor and the gallery div and the link="file" line work on page load but when the view reloads by ajax if a filter checkbox is checked, these disappear, breaking our lightbox hooking the photos.
[wpv-layout-start]
[wpv-items-found]
<div class="col-sm-12 photo-gallery">
[gallery size="shop_catalog" ids="
<!-- wpv-loop-start -->
<wpv-loop>
[wpv-post-id],
</wpv-loop>
<!-- wpv-loop-end -->
" link="file"]
</div>
[wpv-pager-nav-links output="bootstrap" previous_next_links="true"]
[/wpv-items-found]
[wpv-no-items-found]
We're sorry, there are no photos that match your search at this time. We are in the process of adding photos of more products to our gallery. Please check back another time. In the meantime, press the "Reset Filters" button to clear the filters and try a new search of our gallery.
[/wpv-no-items-found]
[wpv-layout-end]
Link to a page where the issue can be seen:
hidden link
Click a photo ... it should open in the lightbox. Inspect a photo and you should see a link wrapped around it with the lightbox attributes.
Now apply a filter and repeat. The photo will replace the current page. If you go back and inspect a photo, you'll see there is no link around it.
Seems like the gallery shortcode applies properly on page load but not when the ajax filter refresh happens.
If I change the filter to use a submit button and full page refresh it works properly.
Hi,
Thank you for contacting us and I'd be happy to assist.
From the page's source code, it seems your view is using the "ARI Fancy Lightbox" plugin for opening images in a lightbox.
You'll need to re-initiate the plugin's script so that it can show the lightbox, even when the page's content has been updated through AJAX (i.e. without the page refresh).
I found a related thread on this topic, in that plugin's official support forum:
hidden link
In your view's "JS editor" you can include, to execute the same function on "js_event_wpv_pagination_completed" and "js_event_wpv_parametric_search_results_updated" events:
jQuery( document ).on( 'js_event_wpv_pagination_completed js_event_wpv_parametric_search_results_updated', function( event, data ) {
ARI_FANCYBOX_INSTANCE.convertElements();
});
I hope this helps.
regards,
Waqar
My issue is resolved now. Thank you!
