open requested div in fancybox from other page

问题

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>&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>

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&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>

This is my Jq

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

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"

this works fine only when people click the second "more" fancybox still opens the first div instead of the second ore the third

can someone help me out

cheers guys

回答1:

It looks like it's an issue of getting the target url hash.

This should do the trick for you. I've tested it in firefox and safari.

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

<!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>

来源：https://stackoverflow.com/questions/6884485/open-requested-div-in-fancybox-from-other-page

标签

jquery

ajax

fancybox