从其他页面在fancybox中打开请求的div [英] open requested div in fancybox from other page
问题描述
我有一个带有其他html文档链接的表 像这样
i have a table with links to a other html doc like this
<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>»</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>»</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>»</span></a></p>
</li>
<li>
</ul>
</div>
我有高清html页面:
on the page hd html i have :
<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>
这是我的Jq
$('#gallery_box .more').each(function(i, el) { $(el).fancybox({
'autoDimensions': true,
'type': 'ajax',
'ajax': { dataFilter: function(data) { return $(data).find('.description')[0]; } } }); });
我想要得到的是，当人们单击firts类"more"时，fancybox会打开，并在页面hd.html上显示"divide"类的第一个div的内容
what i am trying to get is that when people click on the firts class"more" fancybox opens and show the content of the first div on page hd.html with class "description"
只有当人们单击第二个更多" fancybox仍打开第一个div而不是第二个矿石或第三个div时，此方法才能正常工作
this works fine only when people click the second "more" fancybox still opens the first div instead of the second ore the third
有人可以帮我吗
欢呼声
推荐答案
似乎是获取目标url哈希的问题.
It looks like it's an issue of getting the target url hash.
这应该为您解决问题.我已经在Firefox和Safari浏览器中对其进行了测试.
This should do the trick for you. I've tested it in firefox and safari.
为了使此演示"起作用，请确保将fancybox目录放在与index.html和hd.html相同的位置，或者将链接和脚本标记路径更改为fancybox .css的位置.和.js文件.
In order for this "demo" to work, make sure you either put the fancybox directory in the same location as index.html and hd.html, or change the link and script tag paths to the location of your fancybox .css and .js, files.
Index.html
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>»</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>»</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>»</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的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
