使用scrset&在Wordpress中使用ACF的Fancybox

时间:2018-06-18 07:52:59

标签: wordpress fancybox advanced-custom-fields

我现在试图躲过这一段时间,但是不管我尝试什么都不行。

基本上我有一个Fancybox,它正在运行,我已经放置了一个带有scrset值的ACF img,但是我无法将它们结合起来,因为Fancybox正在寻找Wordpress中的纯img值,而我需要img- scrset值的id。

这是我到目前为止为我工作的原因。

Fancybox:

<div>

</div>

带有scrset值的ACF Img

<div class="img01">
<a data-fancybox="Gallery" class ="lightbox" href="img01.jpg" data-caption="text">        
            <?php $image = get_field('img01');
            if( !empty($image) ): ?>
            <img src="<?php echo $image['url']; ?>" 
             alt="<?php echo $image['alt']; ?>" />
            <?php endif; ?>
 </a></div>`

(function($){$(document).ready(function(){
$('.lightbox').fancybox();});})(jQuery)

我很乐意将这些内容组合在一起,这样我就可以为acf添加一个行为响应的图像,但也会在点击时打开fancybox。但我认为可能还有一种更简单的方法可以做到这一点。 老实说,我不知道我在做什么并希望得到帮助。我很乐意提供更多的意见。谢谢。

新方法:

This函数理论上应该完成这项工作,但我仍然无法弄清楚

        <div class="img01">
        <a data-fancybox="Gallery" 
           class ="lightbox" href="img01" 
           data-fancybox 
           data-caption="<?php echo $img_alt_text ?>">  

        <?php $img = get_field('image_01');

            $img_src = wp_get_attachment_image_src( $img, '80vw' );
            $img_srcset = wp_get_attachment_image_srcset( $img, '80vw' );
            $img_alt_text = get_post_meta( $img, '_wp_attachment_image_alt', true);
        ?> 

        <?php if( $img_src ){ ?>
            <img class="img01" 
                src="<?php echo esc_url( $img_src[0] ); ?>"
                title="<?php the_title(); ?> - <?php echo $job ?>"
                srcset="<?php echo esc_attr( $img_srcset ); ?>"

                sizes="(max-width: 768px) 100vw, (max-width: 1200px) 50vw, (min-width: 1200px) 50vw, 1600px" 
                alt="<?php echo $img_alt_text ?>"
            />

我错过了什么/做错了什么?

 // retrieves the attachment ID from the file URL
function pippin_get_image_id($image_url) {
    global $wpdb;
    $attachment = $wpdb->get_col($wpdb->prepare("SELECT ID FROM $wpdb->posts WHERE guid='%s';", $image_url )); 
        return $attachment[0]; 
}

0 个答案:

没有答案