使用fancybox

时间:2016-05-20 07:55:36

标签: javascript php jquery wordpress

我现在一直试图让这个去戒烟。并在互联网上问这个问题并搜索谷歌这个。然而,我仍然需要找到正确的答案。

更新(请继续阅读全文)。 我找到了一些脚本。但现在fancybox动画只是出现而没有别的。

$(function(){
        $('.fancybox-incl').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).filter(target)
                        ('.discription') : $(data); 
                    } 
                } 
            }); 
        });
    });

看起来原始海报有同样的问题,但修复了它。但他没有用正确的答案评论他自己的问题。

原始问题:open requested div in fancybox from other page

如果有人可以帮我解决这个问题:问题: 我尝试使用fancybox从其他页面(在同一个域中)中检索特定ID。

fancybox链接位于我的首页并打开一个页面。但我不希望显示整个页面,只显示该页面中的特定DIV ID。

这是我使用fancybox加载页面的方式:(在我的functions.php中)

function get_the_term_list_inclusief( $id, $taxonomy, $before = '', $sep = '', $after = '') {
    $args_incl = array('order' => 'ASC');

    $terms = wp_get_object_terms( $id, $taxonomy, $args_incl );

    if ( is_wp_error( $terms ) )
        return $terms;


    if ( empty( $terms ) )
        return false;

    $links = array();

    usort($terms, function($a, $b) {
        return strcmp($a->name, $b->name);
    });

    foreach ( $terms as $term ) {
        $link = get_term_link( $term, $taxonomy, $args_incl );
        if ( is_wp_error( $link ) ) {
            return $link;
        }

        $links[] = '<a class="fancybox-incl fancybox.ajax" title="inclusief" href="' . esc_url( $link ) . '" rel="tag">' . $term->name . '</a>';
    }

我的single- [page-slug] .php文件如下所示:

<?php get_header(); ?>
<?php the_post(); ?>



<section id="inclusief" style="margin-top:15px;">
        <div class="col-sm-5 mobile">
            <h1 class="extra-title"><?php the_title(); ?></h1>
                <div class="tabcontent" id="tab-<?php the_ID(); ?>">
                    <p><?php the_content(); ?></p>
            </div>
        </div>
        <div class="col-sm-1"></div>
        <div class="col-sm-6 no-padding">
            <div class="incl">
                <?php if ( has_post_thumbnail() ) { the_post_thumbnail(); } ?>
            </div>
        </div>
    </div>
</section>

<section id="inclusief1" style="margin-top:15px;display:none;">
        <div class="col-sm-5 mobile">
            <h1 class="extra-title"><?php the_title(); ?></h1>
                <div class="tabcontent" id="tab-<?php the_ID(); ?>">
                    <p><?php the_content(); ?></p>
            </div>
        </div>
        <div class="col-sm-1"></div>
        <div class="col-sm-6 no-padding">
            <div class="incl">
                <?php if ( has_post_thumbnail() ) { the_post_thumbnail(); } ?>
            </div>
        </div>
    </div>
</section>

<?php get_footer(); ?>

现在,当我点击一个fancybox链接时,我想只显示#inclusief1。

Fancybox脚本:

$(document).ready(function() {
                $(".fancybox-incl").fancybox({
                    maxWidth   : 900,
                    maxHeight  : 300,
                    fitToView  : false,
                    width      : '100%  ',
                    height     : '100%',
                    autoSize   : false,
                    closeClick : false,
                    openEffect : 'fade',
                    closeEffect: 'fade',
                    helpers: { 
                        title: null
                    }
                });
            });

通过本文Jquery FancyBox target specific DIV ID?

,我已经开始工作了

但是只有当Div在同一页面上时才有效...而不是在另一页上。

非常感谢帮助。我不是那样的编码器,但也不是新手。所以如果有人可以解释我想要做的事情。谢谢!

正如皮特所建议的那样(谢谢)。这很有希望。但我似乎无法用我的Div名字弄明白。任何人都可以帮助我吗?

$('#button').on('click', function(){    
   var nzData = '/url.com?Zip=8000 #module';

     $('#foo').load(nzData, function(){
       var foo = $('#foo').html(); 
       $.fancybox(foo);
    });

});

0 个答案:

没有答案