1

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

Jeroen
  • 137
  • 2
  • 15
  • Can you make a fiddle for us? I'm a bit confused. – alt Jul 30 '11 at 16:53
  • here s the fiddle [link](http://jsfiddle.net/JedaDesign/jnGa4/) only i dont know how to get the second html page in fiddle – Jeroen Jul 30 '11 at 17:11

1 Answers1

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>
Andrew Haller
  • 280
  • 1
  • 3
  • 8
  • Hi Andrew , thnx for the effort but it didn't work , fancy box starts but only the loading animation is visible and further nothing happens , it must open the first ore second ore thirth div from the other page depending on wich "more"link you click – Jeroen Jul 30 '11 at 18:18
  • I'm not sure why it wasn't working for you, but I've edited my post to include the full source of both html files I'm using. Note the location of fancybox (the fancybox .js and .css files should be in a directory name "fancybox" in the same location as the two html files). – Andrew Haller Jul 30 '11 at 19:36
  • Hi Andrew , i think everything is in the right place , when i look with firebug whats happening i get the following message : Fout: uncaught exception: [Exception... "Node cannot be inserted at the specified point in the hierarchy" code: "3" nsresult: "0x80530003 (NS_ERROR_DOM_HIERARCHY_REQUEST_ERR)" location: "file:///F:/www.jeda-design.nl/js/jquery-1.6.2.min.js Line: 18"] , any idea what this can be – Jeroen Jul 31 '11 at 07:32
  • Hi Andrew , i miss overlooked something , its working , thank you – Jeroen Jul 31 '11 at 08:32