Fancybox не работает для нескольких идентификаторов - PullRequest
1 голос
/ 27 марта 2011

ОК, поэтому я использую Fancybox в качестве функции отчета.Нажмите на логотип предупреждения, и отобразится необычная коробка.Итак ... естественно, я просто сделаю это: <a id="various1" href="#inline1" class="<?=$a['id']?>"><img title="Report answer" src="images/icons/error.png" /></a> и это работает ... только для ПЕРВОГО ... остальные не показывают.Вот SSCCE моей проблемы.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <meta http-equiv="imagetoolbar" content="no" />
    <title>FancyBox 1.3.4 | Demonstration</title>
    <script type="text/javascript" src="jquery-1.5.1.min.js"></script>
    <script type="text/javascript" src="scripts/fancybox/jquery.mousewheel-3.0.4.pack.js"></script>
    <script type="text/javascript" src="scripts/fancybox/jquery.fancybox-1.3.4.pack.js"></script>
    <link rel="stylesheet" type="text/css" href="scripts/fancybox/jquery.fancybox-1.3.4.css" media="screen" />

    <link rel="stylesheet" href="style.css" />
    <script type="text/javascript">
        $(document).ready(function() {

            $("#various1").fancybox({
        'transitionIn'   :  'fade',
        'transitionOut'  :  'fade',
        'speedIn'        :  300, 
        'height': '300',
        'width': '300',
        'speedOut'       :  300, 
                'opacity'       : true,
                'centerOnScroll': true,
                'autoDimensions': false
            });

        });
    </script>



</head>
<body>

    <a id="various1" href="#inline1">Report 1</a> <br />
        <a id="various1" href="#inline1">Report 2</a> <br />
        <a id="various1" href="#inline1">Report 3</a> <br />


<div style="margin:0;padding:0;display:none;">
<div id="inline1" style="padding:0;marging-top:10px;">

<div class="header"><h3>Testing</h3></div>

Also... testing.

</div></div>    


</body>
</html>

1 Ответ

4 голосов
/ 27 марта 2011

Идентификатор должен использоваться только один раз на страницу. Если вы измените их на классы, все должно работать нормально.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...