[Resolved] Fancybox not working on second slider

[Author]

Posts

[kelvinL-2]

Dear Sir/Madam,

I install the Easy Fancy Box plugin and hope all images will be shown with Fancy Box rather than the direct image. In order to ensure all <a> including the fancybox class, I put the code in the Loop item

<a rel="gallery" href='[wpv-post-featured-image size="large" output="url"]' class="fancybox image">
  <div class="img-responsive img-thumbnail ratio-4-3" style="background-image:url('[wpv-post-featured-image size="large" output="url"] ')"></div></a>

The image from the first slider is shown with Facby Box but the second and the rest does not work. Please visit the site hidden link and click on the image after completely load the webpage, then click the next button to change the slider and click the image again. You will find the image be opened directly from the browser.

What did I do wrong to the View setting?

Best regards,

Kelvin.

[Shane]

Hi Kelvin,

The issue here is that you need to add the callback for fancybox since it is paginated using AJAX.

		jQuery(".fancybox").fancybox();

To add this go to your search and pagination editor section in view, open the JS editor then click the Frontend Events button. Then select "The AJAX pagination has been completed" option.

This should add the views callback function, then you just add the function above to it.

The end results should look like.

jQuery( document ).on( 'js_event_wpv_pagination_completed', function( event, data ) {
	/**
	* data.view_unique_id (string) The View unique ID hash
	* data.effect (string) The View AJAX pagination effect
	* data.speed (integer) The View AJAX pagination speed in miliseconds
	* data.layout (object) The jQuery object for the View layout wrapper
	*/

		jQuery(".fancybox").fancybox();
	
});

Please let me know if this helps.
Thanks,
Shane

[kelvinL-2]

Dear Shane,

Yes, it works after adding the callback function. I found another problem is the fancybox cannot group the images, I think it is because the slider is being changed when I view the image with the popup. It can be reproduced when viewing the image and click the previous and next button from the popup, after a time, the image can not be changed.

May I know ask for your instruction how I can put the previous and next control button on the left and right side of the slider ( seen the screenshot) ?

[Shane]

Hi Kelvin,

Yes this is indeed because the slider has changed.

The code is looking for the old images which are no longer on the page.

For the pagination controls could you send me a screenshot of how you have set this up in the view.

The reason is your next and previous pagination buttons will need to be added a certain way.

Thanks,
Shane