Home/ Questions/Q 6202217
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-24T04:41:36+00:00

i have a table with links to a other html doc like this <div

  • 0

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

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    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>
    • 0