открыть запрошенный div в fancybox с другой страницы - PullRequest
Новая
       2

открыть запрошенный div в fancybox с другой страницы

1 голос
/ 30 июля 2011

у меня есть таблица со ссылками на другой 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>

на странице 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&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>

Это мой Jq 

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

что я пытаюсь получить, так это то, что когда люди нажимают на первый класс, открывается окно «more» и показывается содержимое первого div на странице hd.html с классом «description»

это работает нормально только тогда, когда люди нажимают на второй блок «еще», все равно открывает первый div вместо второго или третьего

может кто-нибудь мне помочь

ура, ребята

1 Ответ

1 голос
/ 30 июля 2011

Похоже, это проблема получения целевого хэша 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>

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>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...