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

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

jquery ajax

Jquery 从其他页面打开fancybox中请求的div,jquery,ajax,fancybox,Jquery,Ajax,Fancybox,我有一个表，其中包含指向其他html文档的链接像这样 <div id="gallery_box"> <ul> <li> <a href="http://www.geestkracht.com" target="_blank"><img src="images/gallery/Geestkracht.jpg" alt="Geestkracht" /></a&g

我有一个表，其中包含指向其他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>

我想知道的是，当人们点击第一个类“more”时，fancybox会打开，并在hd.html页面上显示第一个div的内容，其中包含类“description”

只有当人们点击第二个“更多”fancybox时，它才能打开第一个div，而不是第二个或第三个div

有人能帮我吗

干杯伙计们

看起来这是一个获取目标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>


指数
$（函数（）{
$（'#gallery_box.more'）。每个（函数（i，el）{
var目标；
$（el）。单击（函数（）{
target=this.hash.replace（'#'，'.'）；
}).fancybox（{
“自动维度”：true，
'type'：'ajax'，
'ajax'：{
数据过滤器：函数（数据）{
返回目标？$（数据）.find（目标）.parents（'.description'）：$（数据）；
} 
} 
}); 
});
});


心理治疗。



在工厂区内



坎图尔管理局

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>


吉斯克拉赫特
心理疗法
Gebruikte技术公司

布拉
布拉
布拉
布拉

戈斯科勒克特
萨门遇到了我们确定的项目计划
Dit项目策划（plan）zal de leidraad zijn voor de Realizatie van uw网站

布拉
布拉
布拉
布拉

看起来这是一个获取目标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>


指数
$（函数（）{
$（'#gallery_box.more'）。每个（函数（i，el）{
var目标；
$（el）。单击（函数（）{
target=this.hash.replace（'#'，'.'）；
}).fancybox（{
“自动维度”：true，
'type'：'ajax'，
'ajax'：{
数据过滤器：函数（数据）{
返回目标？$（数据）.find（目标）.parents（'.description'）：$（数据）；
} 
} 
}); 
});
});


心理治疗。



在工厂区内



坎图尔管理局

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>


吉斯克拉赫特
心理疗法
Gebruikte技术公司

布拉
布拉
布拉
布拉

戈斯科勒克特
萨门遇到了我们确定的项目计划
Dit项目策划（plan）zal de leidraad zijn voor de Realizatie van uw网站

布拉
布拉
布拉
布拉

你能为我们做一把小提琴吗？我有点困惑。这是小提琴。我不知道如何用小提琴获得第二个html页面。你能为我们做一把小提琴吗？我有点困惑。这里是fiddle，我不知道如何在fiddle中获得第二个html页面Hi Andrew，thnx的努力，但它没有工作，fancy box启动，但只有加载动画可见，而且什么也没有发生，它必须从另一个页面打开第一个或第二个或第三个div，这取决于“更多”点击链接我不知道为什么它对你不起作用，但我已经编辑了我的帖子，包含了我正在使用的两个html文件的完整源代码。注意fancybox的位置（fancybox.js和.css文件应该位于目录名“fancybox”中，与两个html文件位于同一位置）。嗨，Andrew，我认为一切都在正确的位置，当我用firebug查看发生了什么时，我得到以下消息：Fout:uncaughtexception:[异常。。。“无法在中的指定点插入节点。”