Using scrset & Fancybox with ACF in Wordpress - wordpress

Question

I'm trying to get behind this for a while now but it does not seem to work whatever I try.
Basically I have a Fancybox, that is working and I have placed an img with ACF with scrset value but I can't combine both because Fancybox is looking for the pure img value in Wordpress, while I need the img-id for the scrset value.
This is what I got so far working for me.
Fancybox:
<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 Img with scrset value
<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 ?>"
/>
I would love to combine those so i can add an image to acf that behaves responsive but also opens in fancybox on click. But there is probably also an easier way to do this i suppose.
Honestly have no idea what im doing with that and hoping for help. Im happy to provide more input. Thank you.
New approach:
This function should in theory do the job but I still cant figure it out
// 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];
}
What am I missing/doing wrong?
<a data-fancybox="Gallery"
class ="lightbox"
href="<?php $image = get_field('img01');
echo $image['url'];?>"
data-caption="<?php echo $image['alt']; ?>">
<?php
$image = get_field('img01');
$image_url = get_field('img01');
$image_id = pippin_get_image_id($image_url);
$img_src = wp_get_attachment_image_src( $image_id, '80vw' );
$img_srcset = wp_get_attachment_image_srcset( $image_id, array( 100, 100 ) );
if( !empty($image) ): ?>
<img class=""
src="<?php echo esc_url( $img_src[0] ); ?>"
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 ?>"
/>
<?php endif; ?>
</a>