Как добавить всплывающий проигрыватель на некоторые конкретные страницы в электронной книге (созданный с помощью turn.js ) по щелчку img?

#javascript #jquery #html

#javascript #jquery #HTML

Вопрос:

Всплывающий проигрыватель работает нормально, если я не указал номер страницы..Но если я укажу номер страницы и добавлю всплывающее окно к этому page…it не работает.Я также указал функцию увеличения и уменьшения масштаба в этой электронной книге…когда электронная книга загружается и когда я переворачиваю страницы, всплывающий проигрыватель, указанный на некоторых страницах, не работает (т. Е.) при нажатии img, не отвечает, но когда я увеличиваю и уменьшаю масштаб, он работает нормально…это потому, что я также указал всплывающий код для функции уменьшения масштаба в jquery .. пожалуйста, разберитесь с проблемой, которую я выделил…..

вот как я загружаю страницы в электронную книгу

   if (book.turn('addPage', element, page)) {

        // Add the initial HTML
        // It will contain a loader indicator and a gradient
        element.html('<div class="gradient"></div><div class="loader"></div>');

        // Load the page
        if(page==1){
            loadPageGif(page, element);

            }

        else if(page==16){
            loadPageYoutube2(page, element);}
        else{
            loadPage(page, element);

            }
    }
  

в функции загрузки страницы я загружаю gif-изображения .. и в loadpageYoutube2 я добавил всплывающий код для конкретной страницы

 function loadPageYoutube2(page, pageElement) {

    // $('#thumbIndex').hide();
    var img = $('<img />');

    img.mousedown(function(e) {
        e.preventDefault();
    });

    img.load(function() {

        // Set the size
        $(this).css({width: '100%', height: '100%'});

        // Add the image to the page after loaded

        $(this).appendTo(pageElement);

        // Remove the loader indicator

        pageElement.find('.loader').remove();
    });

    // Load the page

    img.attr('src', 'pages/'    page   '.gif');

    //loadRegions(page, pageElement);



    if(page==16){
        var youtube = $('<img class="img" src="http://img.youtube.com/vi/BLQFAUvwWrk/0.jpg" width="100" height="100" style=" position: absolute ; top:360px; left:50px; right:50px; margin-left: auto; margin-right: auto;  "  />');

    youtube.appendTo(pageElement);
    }
        pageElement.find('.loader').remove();

    $('.img').magnificPopup({
  items: {
         src: 'http://www.youtube.com/watch?v=7eo8XpT4CmM'
     },
  type: 'iframe',
  iframe: {
            markup: '<div class="mfp-iframe-scaler">' 
                    '<div class="mfp-close"></div>' 
                    '<iframe class="mfp-iframe" frameborder="0" allowfullscreen></iframe>' 
                    '</div>', 
        patterns: {
            youtube: {
                  index: 'youtube.com/', 
                  id: 'v=', 
                  src: '//www.youtube.com/embed/%id%?autoplay=1' 
                }
             },
             srcAction: 'iframe_src', 
     }
});


}   
  

здесь, когда я нажимаю на img, ничего не происходит …. пожалуйста, решите эту проблему для меня