Make img embed script work with drupal ajax

35 Views Asked by At

I have this script that works with ajax pager in drupal 6 with jquery 1.2.6 it turns youtube links into embeds, now tried to do same but with image links but it doesn't work I have to refresh page each time.

$(document).ready(function(){
        var ytRegExpUrl = /^((?:https?:)?\/\/)?((?:www|m)\.)?((?:youtube\.com|youtu.be))(\/(?:[\w\-]+\?v=|embed\/|v\/)?)((?!\bchannel\b)[\w\-]+)([\S]+)?$/;
        var ytFrame = '<iframe width="100%" height="315" src="https://www.youtube.com/embed/{youtubeVideoId}" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>'


        function replaceUrlToPlayer() {
            $("#content-content a").each(function() {
                var toText = $(this).attr('href');

                    var match = ytRegExpUrl.exec(toText);
                    if (match !== null) {
                        var textToReplace = match[5];
                        if(typeof(match[6]) != "undefined"){
                            if(match[6].toLowerCase().includes("t=")){
                                textToReplace += match[6];
                            }
                        }
                        var replacement = ytFrame.replace('{youtubeVideoId}', textToReplace);
                        $(this).replaceWith(replacement);
                    }
            });
        };

        Drupal.behaviors.YtUrlToPlayerBehaviour = function(context, settings) {

            $(document).ajaxComplete(function(event, xhr, settings) {
                replaceUrlToPlayer();
            });
        }
});

img embed script that doesn't work

$('a[href$=".png"], a[href$=".jpg"], a[href$=".gif"], a[href$=".tiff"], a[href$=".webp"]').each(function(){
    $(this).html('<img src="' + $(this).attr('href') + '" />');
});

I tried to do it but doesn't work

$(document).ready(function(){
        var ytRegExpUrl = /^(http(s?):)([/|.|\w|\s|-])*\.(?:jpg|gif|png)?$/;
        var imgFrame = '<img src="' + $(this).attr('href') + '" />'


        function replaceUrlToImg() {
            $("#content-content a").each(function() {
                var toText = $(this).attr('href');
                    var match = ytRegExpUrl.exec(toText);
                    if (match !== null) {
                        var textToReplace = match[5];
                        if(typeof(match[6]) != "undefined"){
                            if(match[6].toLowerCase().includes("t=")){
                                textToReplace += match[6];
                            }
                        }
                        var replacement = ytFrame.replace('<img src="' + $(this).attr('href') + '" />', textToReplace);
                        $(this).replaceWith(replacement);

                    }
            });
        };

        Drupal.behaviors.YtUrlToImgBehaviour = function(context, settings) {

            $(document).ajaxComplete(function(event, xhr, settings) {
                replaceUrlToImg();
            });
        }
});
0

There are 0 best solutions below