Ajax + fancybox

БЭЛКА

БЭЛКА

Member
Есть главная страница и подгружаемая аяксом.

1) Не работает fancybox в подгружаемой странице ( даже если добавить шапку главной страницы в foto.html ), картинка открывается в новом окне, не работает .
2) Работает если добавить шапку в foto.html и открыть отдельно эту страницу.

Подскажите, пожалуйста, в чем беда?



Шапка главной страницы:
HTML: 
<!DOCTYPE html>
  <head>
    <meta http-equiv="content-type" content="text/html;charset=utf-8">
    <meta http-equiv="content-language" content="ru">
    <meta name="description" content="Индексация сайта" >
    <meta name="keywords" content="Ключевые слова">
    <link href="css/style.css" rel="stylesheet" type="text/css" media="screen">
    <meta http-equiv="imagetoolbar" content="no" />
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
    <script>!window.jQuery && document.write('<script src="jquery-1.4.3.min.js"><\/script>');</script>
    <script type="text/javascript" src="./fancybox/jquery.mousewheel-3.0.4.pack.js"></script>
    <script type="text/javascript" src="./fancybox/jquery.fancybox-1.3.3.pack.js"></script>
    <link rel="stylesheet" type="text/css" href="./fancybox/jquery.fancybox-1.3.3.css" media="screen" />
    <link rel="shortcut icon" href="favicon.ico" type="image/x-icon">
    <link rel="icon" href="favicon.ico" type="image/x-icon">

    <script type="text/javascript">
      $(document).ready(function() {
   
    $("a[rel=foto]").fancybox({
        'transitionIn'    :    'elastic',
        'transitionOut'    :    'elastic',
        'speedIn'        :    800,
        'speedOut'        :    800,
        'overlayShow'    :    true,
        'enableEscapeButton': true,
        'hideOnOverlayClick': true,
        'hideOnContentClick': false,
        'overlayOpacity':1,
        'overlayColor': '#000000',
        'cyclic': true,
        'centerOnScroll': true,
        'hideOnContentClick': true
       
    });
    });


    </script>
   
    <script type="text/javascript">
        jQuery( function($) {
            $('tr:even').css({'background-color' : ''});
            $('tbody tr[data-href]').addClass('clickable').click( function() {
                window.location = $(this).attr('data-href');
            }).find('a').hover( function() {
                $(this).parents('tr').unbind('click');
            }, function() {
                $(this).parents('tr').click( function() {
                    window.location = $(this).attr('data-href');
                });
            });
        });
    </script>
   
    <script>
        function showContent(link) {
           var cont = document.getElementById('content');
           var loading = document.getElementById('loading');
           cont.innerHTML = loading.innerHTML;  
           var http = createRequestObject();
           if( http ) 
           { http.open('get', link);
               http.onreadystatechange = function () 
               {   if(http.readyState == 4) 
                   {   cont.innerHTML = http.responseText;  }    }
               http.send(null);  }
           else 
           {  document.location = link;   }   }
           // ajax объект
        function createRequestObject() 
          {  try { return new XMLHttpRequest() }
              catch(e) 
              {  try { return new ActiveXObject('Msxml2.XMLHTTP') }
                  catch(e) 
                  {   try { return new ActiveXObject('Microsoft.XMLHTTP') }
                      catch(e) { return null; }   } } }
        </script>

  </head>
BODY главной страницы:
HTML: 
<body>
          <!--//-->
          <div id="content">
          <!-- CONTENT -->
          </div>
          <!--//-->
          <div id="loading" style="display: none">
            Загрузка файла...
          </div>
          <script>
            showContent('index.txt') // страница по умолчанию
          </script>
  </body>
foto.html:
HTML: 
<html>
  <head>
  </head>
  <body>
    <a rel="foto" href="img/foto.jpg"><img src="img/foto2.jpg" border="0" width="200" height="200"/></a>
  </body>
</html>
 
=RiZo=

=RiZo=

ONE SHOT - ONE HIT
Беда в том, что когда вы подгружаете аяксом контент, нужно инициализировать fancybox, как вы это делаете при загрузке страници вот тут:
Код: 
$("a[rel=foto]").fancybox({
        'transitionIn'    :    'elastic',
        'transitionOut'    :    'elastic',
        'speedIn'        :    800,
        'speedOut'        :    800,
        'overlayShow'    :    true,
        'enableEscapeButton': true,
        'hideOnOverlayClick': true,
        'hideOnContentClick': false,
        'overlayOpacity':1,
        'overlayColor': '#000000',
        'cyclic': true,
        'centerOnScroll': true,
        'hideOnContentClick': true  
    });
Как вариант можно сделать "шапку" вот так:
Код: 
<!DOCTYPE html>
  <head>
    <meta http-equiv="content-type" content="text/html;charset=utf-8">
    <meta http-equiv="content-language" content="ru">
    <meta name="description" content="Индексация сайта" >
    <meta name="keywords" content="Ключевые слова">
    <link href="css/style.css" rel="stylesheet" type="text/css" media="screen">
    <meta http-equiv="imagetoolbar" content="no" />
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
    <script>!window.jQuery && document.write('<script src="jquery-1.4.3.min.js"><\/script>');</script>
    <script type="text/javascript" src="./fancybox/jquery.mousewheel-3.0.4.pack.js"></script>
    <script type="text/javascript" src="./fancybox/jquery.fancybox-1.3.3.pack.js"></script>
    <link rel="stylesheet" type="text/css" href="./fancybox/jquery.fancybox-1.3.3.css" media="screen" />
    <link rel="shortcut icon" href="favicon.ico" type="image/x-icon">
    <link rel="icon" href="favicon.ico" type="image/x-icon">


<script type="text/javascript">
jQuery(function($) {
        $('tr:even').css({
                'background-color': ''
        });
        $('tbody tr[data-href]').addClass('clickable').click(function() {
                window.location = $(this).attr('data-href');
        }).find('a').hover(function() {
                $(this).parents('tr').unbind('click');
        }, function() {
                $(this).parents('tr').click(function() {
                        window.location = $(this).attr('data-href');
                });
        });
        initFancybox();
});

function showContent(link) {
        var cont = document.getElementById('content');
        var loading = document.getElementById('loading');
        cont.innerHTML = loading.innerHTML;
        var http = createRequestObject();
        if (http) {
                http.open('get', link);
                http.onreadystatechange = function() {
                        if (http.readyState == 4) {
                                cont.innerHTML = http.responseText;
                                 initFancybox();
                        }
                }
                http.send(null);
        } else {
                document.location = link;        
        }
}
// ajax объект

function createRequestObject() {
        try {
                return new XMLHttpRequest()
        } catch (e) {
                try {
                        return new ActiveXObject('Msxml2.XMLHTTP')
                } catch (e) {
                        try {
                                return new ActiveXObject('Microsoft.XMLHTTP')
                        } catch (e) {
                                return null;
                        }
                }
        }
}

function initFancybox() {
        $("a[rel=foto]").fancybox({
                'transitionIn': 'elastic',
                'transitionOut': 'elastic',
                'speedIn': 800,
                'speedOut': 800,
                'overlayShow': true,
                'enableEscapeButton': true,
                'hideOnOverlayClick': true,
                'hideOnContentClick': false,
                'overlayOpacity': 1,
                'overlayColor': '#000000',
                'cyclic': true,
                'centerOnScroll': true,
                'hideOnContentClick': true
        });
}
</script>

</head>
Делаем функцию для инициализации fancybox под именем initFancybox(), что бы код не дублировать, а потом ее вызываем при загрузке страницы:

Код: 
jQuery(function($) {
        $('tr:even').css({
                'background-color': ''
        });
        $('tbody tr[data-href]').addClass('clickable').click(function() {
                window.location = $(this).attr('data-href');
        }).find('a').hover(function() {
                $(this).parents('tr').unbind('click');
        }, function() {
                $(this).parents('tr').click(function() {
                        window.location = $(this).attr('data-href');
                });
        });
        initFancybox();
});
и после того как аяксом загрузим данные:

Код: 
function showContent(link) {
        var cont = document.getElementById('content');
        var loading = document.getElementById('loading');
        cont.innerHTML = loading.innerHTML;
        var http = createRequestObject();
        if (http) {
                http.open('get', link);
                http.onreadystatechange = function() {
                        if (http.readyState == 4) {
                                cont.innerHTML = http.responseText;
                                initFancybox();
                        }
                }
                http.send(null);
        } else {
                document.location = link;
               
        }
}
 
Останнє редагування:
Ви повинні увійти або зареєструватися, щоб відповісти.
Зверху