Question

我有一个表格，其中包含指向其他html文档的链接像这样

<div id="gallery_box">
        <ul>
            <li>
                <a href="http://www.geestkracht.com" target="_blank"><img src="images/gallery/Geestkracht.jpg" alt="Geestkracht" /></a>
                <p>Praktijk voor psychotherapie.<a class="more" href="hd.html "><br />Meer Info <span>&raquo;</span></a></p>
            </li>

            <li>
                <a href="http://www.goskollekt.nl target="_blank"><img src="images/gallery/Goskollekt.jpg" alt="Goskollekt" /></a>
                <p>Incassoburo Bloemen en planten sector <a class="more" href="hd.html ">More Info <span>&raquo;</span></a></p>

            </li>
            <li>
                <a href="http://www.vannieropadvies.nl" target="_blank><img src="images/gallery/image_03.jpg" alt="van nierop advies" /></a>
                <p>Administratie kantoor <a class="more" href="hd.html">More info <span>&raquo;</span></a></p>

            </li>
             <li>
</ul>
</div>

页面上的

hd html我有：

<div class="description">
 <div class="geestkracht">
                <div class="col_w610">
                <div class="image_wrapper image_fl"><img src="images/portfolio/geestkracht.jpg" alt="image 6" /></div>
            </div>
                <div class="col_w600 last_col">
                    <h3>Geestkracht</h3>
                        <p>Praktijk voor Psychotherapie</p>
                        <p>Gebruikte Technieken</p>
                        <ul class="bla_list">
                          <li>Bla</li>
                          <li>bla</li>
                          <li>bla</li>
                          <li>bla</li>
                        </ul>
                  </div>
                </div>

</div>
<div class="description">
<div class="goskollekt">
<div class="col_w610">
            <div class="image_wrapper image_fl"><img src="images/portfolio/goskolekt.jpg" alt="image 4" /></div>

</div>
        <div class="col_w600 last_col">
            <h3>Goskollekt</h3>
                <p>Samen  met u werk ik  een projectplan uit waarin we de te zetten stappen gaan defini&euml;ren.</p>
                <p>Dit projectplan zal de leidraad zijn voor de realisatie van uw website.</p>
                <ul class="bla_list">
                  <li>bla</li>
                  <li>bla</li>
                  <li>bla</li>
                  <li>bla</li>
                </ul>

          </div>
</div>
</div>

这是我的Jq

$('#gallery_box .more').each(function(i, el) { $(el).fancybox({ 
    'autoDimensions': true, 
    'type': 'ajax',
    'ajax': { dataFilter: function(data) { return $(data).find('.description')[0]; } } }); });

我想要得到的是，当人们点击firts课程时，“更多”fancybox会打开，并在页面hd.html上显示第一个div的内容，其中包含“description”类

只有当人们点击第二个“更多”fancybox仍然打开第一个div而不是第二个第三个

时，这个工作正常

有人可以帮助我

欢呼人们

Answer 1

看起来这是获取目标url哈希的问题。

这应该可以帮到你。我在firefox和safari中测试过它。

为了让“演示”工作，请确保将fancybox目录放在与index.html和hd.html相同的位置，或将链接和脚本标记路径更改为fancybox的位置.css和.js，文件。

的index.html

<!DOCTYPE html>
<html>
<head>
    <title>Index</title>

    <link rel="stylesheet" href="fancybox/jquery.fancybox-1.3.4.css" type="text/css" media="screen" />

    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
    <script type="text/javascript" src="fancybox/jquery.fancybox-1.3.4.pack.js"></script>

    <script type="text/javascript">
    $(function(){
        $('#gallery_box .more').each(function(i, el) {
            var target;
            $(el).click(function(){
                target = this.hash.replace('#','.');
            }).fancybox({ 
                'autoDimensions': true, 
                'type': 'ajax',
                'ajax': { 
                    dataFilter: function(data) {
                        return target ? $(data).find(target).parents('.description') : $(data); 
                    } 
                } 
            }); 
        });
    });
    </script>

</head>
<body>

    <div id="gallery_box">
        <ul>
            <li>
                <a href="http://www.geestkracht.com" target="_blank"><img src="images/gallery/Geestkracht.jpg" alt="Geestkracht" /></a>
                <p>Praktijk voor psychotherapie.
                <a class="more" href="hd.html#geestkracht"><br />Meer Info <span>&raquo;</span></a></p>
            </li>
            <li>
                <a href="http://www.goskollekt.nl2"><img src="images/gallery/Goskollekt.jpg" alt="Goskollekt" /></a>
                <p>Incassoburo Bloemen en planten sector 
                <a class="more" href="hd.html#goskollekt">More Info <span>&raquo;</span></a></p>
            </li>
            <li>
                <a href="http://www.vannieropadvies.nl"><img src="images/gallery/image_03.jpg" alt="van nierop advies" /></a>
                <p>Administratie kantoor 
                <a class="more" href="hd.html">More info <span>&raquo;</span></a></p>
            </li>
        </ul>
    </div>


</body>
</html>

hd.html

<div class="description">
    <div class="geestkracht">
        <div class="col_w610">
            <div class="image_wrapper image_fl">
                <img src="images/portfolio/geestkracht.jpg" alt="image 6" />
            </div>
        </div>
        <div class="col_w600 last_col">
            <h3>Geestkracht</h3>
            <p>Praktijk voor Psychotherapie</p>
            <p>Gebruikte Technieken</p>
            <ul class="bla_list">
                <li>Bla</li>
                <li>bla</li>
                <li>bla</li>
                <li>bla</li>
            </ul>
        </div>
    </div>
</div>
<div class="description">
    <div class="goskollekt">
        <div class="col_w610">
            <div class="image_wrapper image_fl">
                <img src="images/portfolio/goskolekt.jpg" alt="image 4" />
            </div>
        </div>
        <div class="col_w600 last_col">
            <h3>Goskollekt</h3>
            <p>Samen met u werk ik een projectplan uit waarin we de te zetten stappen gaan definiëren.</p>
            <p>Dit projectplan zal de leidraad zijn voor de realisatie van uw website.</p>
            <ul class="bla_list">
                <li>bla</li>
                <li>bla</li>
                <li>bla</li>
                <li>bla</li>
            </ul>
        </div>
    </div>
</div>

从其他页面打开fancybox中的请求div

1 个答案: