'Divi and ACF gallery for posts
So im currently working on a site, ive been asked to make it with divi, however they want a gallery on posts that allows for custom images per post. I currently have this from a site i made it for in the past which i no longer have access to
<script>
(function($) {
$(document).ready(function() {
$('<span class="et-lb-close">M</span>').prependTo('body:not(.et-fb-root-ancestor) [class*="lb-content"] > .et_pb_row:first-child');
$('body:not(.et-fb-root-ancestor) [class*="et-lb-content"] ').appendTo('#et-main-area');
$("[class*='et-lb-btn']").each(function(index, element) {
var classes = $(element).attr('class').match(/et-lb-btn\-(\w*)/);
if (classes !== null) {
$(element).on('click', function(e){
e.preventDefault();
$('.et-lb-content-' + classes[1]).toggleClass('et-lb-open');
$('html').css("overflow-y","hidden")
});
$('.et-lb-close').click(function(){
$("[class*='et-lb-content']").removeClass('et-lb-open');
$('html').css("overflow-y","initial")
});
}
});
});
})(jQuery);
</script>
function projgal(){
ob_start();
$images = get_field('project_gallery');
if( $images ):
$button = "et-lb-btn-". 2;
$content = "et-lb-content-" . 2;
?>
<div class="lb-content-2">
<?php foreach( $images as $image ): ?>
<div class="<?php echo $button ?>">
<img src="<?php echo esc_url($image['sizes']['thumbnail']); ?>" alt="<?php echo esc_attr($image['alt']); ?>" />
</div>
<div id="main-area">
<div class="<?php echo $content?>">
<img class="gallery-img modal-img" src="<?php echo esc_url($image['sizes']['thumbnail']); ?>" alt="<?php echo esc_attr($image['alt']); ?>" />
</div>
</div>
<?php
$button++;
$content++;
endforeach;
?>
<?php
$output = ob_get_clean();
return $output;
endif;
}
add_shortcode('projgallery', 'projgal');
I tried my best to recreate what i did for the php back then. I remembered that using a shortcode for it was the easiest way i could include it into the front end for the post template, however i cannot seem to get the close button to load into the site.
Thank you for any help or comments.
Sources
This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.
Source: Stack Overflow
| Solution | Source |
|---|
