Saltar navegación

[Resuelto] fancybox works on first page load

Este hilo está resuelto. Aquí tiene una descripción del problema y la solución.

Problem:
The user is using the lightbox library, but videos in subsequent pages with AJAX pagination do not play inside the lightbox

Solution:
Youtube requires to use https://www.youtube.com/embed/ like URLs for embed instead of https://youtu.be/ URLs.

We built a custom shortcode that converts URLs to the correct URL scheme. Check this reply https://toolset.com/forums/topic/fancybox-works-on-first-page-load/#post-1894907

This support ticket is created hace 4 años, 4 meses. There's a good chance that you are reading advice that it now obsolete.

This is the technical support forum for Toolset - a suite of plugins for developing WordPress sites without writing PHP.

Everyone can read this forum, but only Toolset clients can post in it. Toolset support works 6 days per week, 19 hours per day.

Sun Mon Tue Wed Thu Fri Sat
9:00 – 13:00 9:00 – 13:00 9:00 – 13:00 9:00 – 13:00 - - 9:00 – 13:00
14:00 – 18:00 14:00 – 18:00 14:00 – 18:00 14:00 – 18:00 - - 14:00 – 18:00

Supporter timezone: Africa/Casablanca (GMT+01:00)

Este tema contiene 10 respuestas, tiene 2 mensajes.

Última actualización por kelvinL-2 hace 4 años, 2 meses.

Asistido por: Jamal.

Autor
Mensajes
#1886875

Hello, I install the fancybox plugins, if I apply Pagination enabled with manual or automatic transition and AJAX, the fancybox function can only be worked on the first page. If I apply the Pagination enabled with manual transition and page reload, fancybox can work on every page, any solution that I can apply the AJAX?

#1886891
#1887327

I am setting this ticket as waiting for a response until you provide us with a copy of your website to check why is the Fancybox not working for youtube videos after paginating the view with AJAX.

#1892951

Dear Jamal,

Please enable the private message for me, so that I can provide the login credential.

#1893035

Of course. Your next reply will be private to let you share credentials safely. ** Make a database backup before sharing credentials. **

#1893209
#1893289

It seems that we can fix the fancybox issue on Youtube videos by adding the class "iframe" to the <a> tag handler.
But, I encountered another issue. Check this screenshot enlace oculto

Refused to display '<em><u>enlace oculto</u></em>' in a frame because it set 'X-Frame-Options' to 'sameorigin'.

I think that it has something to do with server security. I wanted to add custom code to update that, but the server security does not allow me to update files.

add_filter('allowed_http_origins', 'add_allowed_origins');

function add_allowed_origins($origins) {
    $origins[] = '<em><u>enlace oculto</u></em>';
    return $origins;
}

As I explained while having the chat, I'll need to take a copy of your website and test it against our servers, this will let us check if it is a server related issue, and at the same time, it will be needed if I can't find a solution and I had to escalate this ticket. Please let me know if I can take a copy.

I remember that we have fixed the fancy box for images while in chat. Is that correct or are you having troubles with image fancyboxes too? If yes, please let me know exactly what posts to test with, If you can record a screencast of your tests that would be great.

#1893483

Dear Jamal,

I duplicated the production site to this dev.vwcm.hk, you can feel free to test it. Or you need me to duplicate the site and send you the image? Please advise what I should do.

Best regards,

Kelvin.

#1893737

I just wanted your approval to take a copy of your website. As you are willing to provide one, I am already running a migration of this website to our online platform. I'll let you know what I will find.

#1893761

Dear Jamal,

Sure, please feel free to duplicate it, once finished, please delete the source is fine.

best regards,

Kelvin.

#1893895

Of course, I'll delete the migrated site once we fix this issue. enlace oculto

Let me escalate this issue to our 2nd Tier for further assistance. I'll get back to you as soon as possible.

#1894907

It seems that the AJAX calls changes the referrer of the page to the full URL of the page instead of the site URL which creates an issue when the strict policy for same-origin requests is enabled.

As a workaround, we need to change the URLs of the videos to a less restricted URL. According to this article we need to use the /embed/ endpoint for the URL enlace oculto

So I suggest one of the following solutions:
- Changing the URL in the browser using Javascript by adding the following code to the view:

jQuery(function($){
  $('.fancybox-youtube').each(function(){
    var $this = $(this);
    var url = $this.attr('href');
    if ( /https:\/\/youtu.be\//.test(url) ) {
      $this.attr('href', url.replace('<em><u>enlace oculto</u></em>','<em><u>enlace oculto</u></em>'))
    }
    $this.fancybox();
  })
});

-Changing the URL in the server, by wrapping the URL shortcode inside a custom shortcode "youtube". Add the following code to your theme's functions.php file:

add_shortcode('youtube', function ($atts = [], $content = null) {

    $output = str_replace( '<em><u>enlace oculto</u></em>', '<em><u>enlace oculto</u></em>', $content );

    return $output;
});

Then wrap the shortcode in the view's content template:

<a target="_blank" class="fancybox-youtube iframe " href="[youtube][types field='recording-url' output='raw'][/types][/youtube]" rel="noopener noreferrer"><i class="fa fa-video-camera" aria-hidden="true"></i></a>

You can check the second solution on the migrated site enlace oculto

Let me know once you implement it in your live site so I can delete the migrated site.

#1961369

Dear Jamal,

Sorry for my late review of this ticket. As the site was cracked, I think I will continue this after this ticket be solved. https://toolset.com/forums/topic/unserialize-error-at-offset-error-message-from-wp-content-plugins-types/