Question

我已下载此主题：http://themeforest.net/item/havva-portfolio-for-freelancers-agencies/full_screen_preview/10666379

如果单击其中一张图片，则会打开一个包含图片和说明的新页面。如果您再次单击图片，则会打开一个包含图片的灯箱。

现在，我没有关于我的照片的描述，所以我认为我不需要打开新页面。我想要的是，当我在投资组合库视图中（在首页上）点击它们时，打开该灯箱中的图像。我不想在查看缩略图和打开灯箱之间看到新页面。

到目前为止我尝试做的事情：

这是使用图片打开新页面的主页/首页的代码：

                        <div class="front">
                            <a href="<?php the_permalink(); ?>">
                                <?php if ( has_post_thumbnail() ) { ?>
                                    <?php echo get_the_post_thumbnail( $post->ID, array(300,$height) ); ?>
                                <?php }else{ ?>
                                    <img src="<?php echo esc_url(WF_IMAGES.'no-thumb.png'); ?>" />
                                <?php } ?>
                            </a>
                        </div>

这是使用图片打开灯箱的新页面的代码：

<div class="featured-portfolio"><?php echo $media; ?></div>

我以为我可以将新页面的代码实现到首页，但我不知道该$ media变量中的内容或者如何获取其内容以获取灯箱链接。

你能帮助我吗？

问候，琳达

Answer 1

如果您查看在灯箱中打开的图像的前端代码，例如：

<a class="colorbox-url cboxElement" rel="gallery_119" href="...">
    <img width="750" height="746" src="..." class="attachment-full-width" alt="ab" data-wp-pid="268">
</a>

看起来元素类用于指示应该在灯箱中打开链接。

对JS的快速搜索显示：

$('.colorbox-url').live('click', function(){
    $.colorbox({href:$(this).attr('href'), open:true, maxWidth:'80%', maxHeight:'80%', fixed:true});
    return false;
});

您可以尝试将该类添加到索引页面上的链接：

<div class="front">
    <a href="<?php echo get_the_post_thumbnail($post->ID, 'large'); ?>" class="colorbox-url cboxElement">
        ...
    </a>
</div>

注意我还将href属性更改为图像而不是单个帖子页面。我只是将尺寸设置为large，您可能需要不同的图像尺寸。

很难说这是否足以触发灯箱，灯箱本身可能需要一些初始化，但它至少应该让你走上正确的道路。

自定义Wordpress主题灯箱

1 个答案: