image_gallery_full

image_fallery_full.php

<?php
// kudos https://wp-doin.com/2022/10/19/a-simple-accordion-image-gallery/
add_shortcode( 'anim_block', 'wpd_anim_block_shortcode' );

function wpd_anim_block_shortcode(){
		ob_start();
		?>
		<div class="c-anim-block">
				<div class="c-anim_block__img-wrap c-anim_block__img-wrap--1">
						<img class="c-anim-block__img c-anim-block__img--1" src="https://wp-doin.com/wp-content/uploads/2022/10/pexels-hitesh-choudhary-340152-980x551.jpg" />
				</div>
				<div class="c-anim_block__img-wrap c-anim_block__img-wrap--2">
						<img class="c-anim-block__img c-anim-block__img--2" src="https://wp-doin.com/wp-content/uploads/2022/10/pexels-negative-space-169573-980x653.jpg" />
				</div>
				<div class="c-anim_block__img-wrap c-anim_block__img-wrap--3">
						<img class="c-anim-block__img c-anim-block__img--3" src="https://wp-doin.com/wp-content/uploads/2022/10/pexels-jeshoots-4316-980x653.jpg" />
				</div>
				<div class="c-anim_block__img-wrap c-anim_block__img-wrap--4">
						<img class="c-anim-block__img c-anim-block__img--4" src="https://wp-doin.com/wp-content/uploads/2022/10/pexels-george-morina-4960464-980x654.jpg" />
				</div>
				<div class="c-anim_block__img-wrap c-anim_block__img-wrap--5">
						<img class="c-anim-block__img c-anim-block__img--5" src="https://wp-doin.com/wp-content/uploads/2022/10/pexels-lukas-574069-980x649.jpg" />
				</div>
		</div> 
		<?php
		return ob_get_clean();
	}

add_action( 'wp_footer', 'wpd_inject_inline_js_css' );

function wpd_inject_inline_js_css() {
?>
<style type="text/css">
		.c-anim-block {
			overflow: hidden;
			border-radius: 25px;
			display: flex;
			justify-content: space-between;
		}
		
		.c-anim_block__img-wrap {
			flex: 0 0 20%;
			max-width: 20%;
			overflow: hidden;
			height: 500px;
			transition: all 1s ease;
		}
		
		.c-anim-block__img {
			width: 100%;
			object-fit: cover;
			height: 500px;
		}
		
		.c-anim_block__img-wrap.is-active {
			flex: 0 0 80%;
			max-width: 80%;
			overflow: hidden;
			transition: all 1s ease;
			height: 500px;
		}
		
		.c-anim_block__img-wrap.is-inactive {
			flex: 0 0 5%;
			max-width: 5%;
			transition: all 1s ease;
			height: 500px;
		}
		</style>
		
		<script type="text/javascript">
			jQuery( document ).ready(function() {
				jQuery('.c-anim_block__img-wrap').hover(function () {
                  jQuery(this).toggleClass('is-active');
                  jQuery('.c-anim_block__img-wrap').not(this).toggleClass('is-inactive');
              });
			});
		</script>
<?php	
}