[Resolved] include paged results in fancyboox

[Author]

Posts

[urkoP]

Hi,

I have a view where I show images with pages, 16 images per page. there are views that have more than one page. And I want to see all the images with fancybox by clicking on any of them. Right now I just get them to be per page,
by clicking I see the 16 of the page.

https://toolset.com/forums/topic/fancybox-not-working-on-second-slider/

I have read this ticket, and I have tried it but it does not work for me.

This is my loop:
[wpv-layout-start]
[wpv-items-found]
<div class="aurkitutakoak"><img class="informazioa" src="hidden link"> [wpv-found-count] argazki aurkituta <h6> [wpv-search-term param="wpvphotosevent"] </h6> bilduman.</div>
<!-- wpv-loop-start -->
<wpv-loop wrap="4" pad="true">
[wpv-item index=1]
<div class="row ">
<div class="col-sm-3">
<a href="[get_att_src att_id='[wpv-post-id]' att_size='full']" data-fancybox="images" data-caption="[wpv-post-url]"><div class="kontainerra"><img class="argazkiarena" src="[get_att_src att_id='[wpv-post-id]' att_size='full']">
<div class="bestebat">
<br>
</div>
</div></a>
</div>

[wpv-item index=other]
<div class="col-sm-3">
<a href="[get_att_src att_id='[wpv-post-id]' att_size='full']" data-fancybox="images" data-caption="[wpv-post-url]"><div class="kontainerra"><img class="argazkiarena" src="[get_att_src att_id='[wpv-post-id]' att_size='full']">
<div class="bestebat">
<br>
</div>
</div></a>
</div>
[wpv-item index=4]
<div class="col-sm-3">
<a href="[get_att_src att_id='[wpv-post-id]' att_size='full']" data-fancybox="images" data-caption="[wpv-post-url]"><div class="kontainerra"><img class="argazkiarena" src="[get_att_src att_id='[wpv-post-id]' att_size='full']">
<div class="bestebat">
<br>
</div>
</div></a>
</div>
[wpv-item index=pad]
<div class="col-sm-3"></div>
[wpv-item index=pad-last]
<div class="col-sm-3"></div>
</div>
</wpv-loop>

<!-- wpv-loop-end -->
[/wpv-items-found]
[wpv-pager-nav-links output="bootstrap" previous_next_links="true" step="10" reach="2" text_for_previous_link="Aurrekoa" text_for_next_link="Hurrengoa"]
[wpv-no-items-found]
[wpml-string context="wpv-views"]No items found[/wpml-string]
[/wpv-no-items-found]
[wpv-layout-end]

This is the javascript:

jQuery( document ).on( 'js_event_wpv_pagination_completed', function( event, data ) {

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

});

$('[data-fancybox="images"]').fancybox({
caption : function( instance, item ) {
var caption = $(this).data('caption') || '';

if ( item.type === 'image' ) {
caption = '<a href="' + caption + '">Irudiaren xehetasunak</a>';
}
else
caption = '<a href="' + caption + '">Bideoaren xehetasunak</a>';

return caption;
}
});

thanks for checking it

[Shane Supporter Languages: English (English ) Timezone: America/Jamaica (GMT-05:00)]

Hi Urko,

Thank you for getting in touch.

To get a full understanding of this, I would need to have a link to the page to check the context to see if the correct callback function is being used.

Thanks,
Shane

[urkoP]

HI Shane,

for example in this page hidden link

thanks.

[Shane Supporter Languages: English (English ) Timezone: America/Jamaica (GMT-05:00)]

Hi Urko,

I understand the context now. Actually we won't be able to provide a solution for this one.

This is because even through your view has more than 16 items, you've set it to display 16 items per page. This means that only those those 16 items are loaded from the database at the time.

What this means is that fancybox will only be able to navigate through these 16 items that are currently being displayed. You're not able to use fancybox to paginate to the next page of the results.

Thanks,
Shane

[urkoP]

Ohhh, ok and thanks,

another question. With ajax activated on the first page the link below the photo works fine. but when you go to the second page only the url appears. if I deactivate ajax it works fine.

$('[data-fancybox="images"]').fancybox({
caption : function( instance, item ) {
var caption = $(this).data('caption') || '';

if ( item.type === 'image' ) {
caption = '<a href="' + caption + '">Irudiaren xehetasunak</a>';
}
else
caption = '<a href="' + caption + '">Bideoaren xehetasunak</a>';

return caption;
}
});

This is the code through which I get the link.

thanks

[Shane Supporter Languages: English (English ) Timezone: America/Jamaica (GMT-05:00)]

Hi Urko,

The problem is that this needs to be added into the callback function for the fancybox as well.

Example.

jQuery( document ).on( 'js_event_wpv_pagination_completed', function( event, data ) {

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

$('[data-fancybox="images"]').fancybox({
caption : function( instance, item ) {
var caption = $(this).data('caption') || '';

if ( item.type === 'image' ) {
caption = '<a href="' + caption + '">Irudiaren xehetasunak</a>';
}
else
caption = '<a href="' + caption + '">Bideoaren xehetasunak</a>';

return caption;
}
});
});

Please update your function to look like this and it should work again.

Thanks,
Shane

[urkoP]

My second issue is resolved now. Thank you!