<!-- CSS links-->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css">
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.13.0/css/all.min.css" rel="stylesheet">
<!-- fancybox -->
<link rel='stylesheet prefetch' href='https://cdnjs.cloudflare.com/ajax/libs/fancybox/3.1.20/jquery.fancybox.min.css'>
<!-- magnific-popup -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/magnific-popup.js/1.1.0/magnific-popup.css" />
<div class="portfolio-menu mt-2 mb-4">
<nav class="controls">
<button type="button" class="neon control outline" data-filter="all">
<span></span>
<span></span>
<span></span>
<span></span>All</button>
<?php
$args = array(
'post_type' => array( 'fotografia' )
);
// The Query
$the_query = new WP_Query( $args );
// The Loop
if ( $the_query->have_posts() ) {
while ( $the_query->have_posts() ) {
$the_query->the_post();
$images = rwmb_meta( 'fotos_del_grupo');
$i = 0;
foreach ( $images as $image ) { $i++; }
if($i > 0){
?>
<button type="button" class="neon control outline" data-filter=".<?php
echo substr(get_the_title(),1,3); ?>">
<span></span>
<span></span>
<span></span>
<span></span>
<?php echo get_the_title(); ?>
</button>
<?php
}
}
}
?>
</nav>
</div>
<ul class="row portfolio-item">
<?php
// The Loop
if ( $the_query->have_posts() ) {
while ( $the_query->have_posts() ) {
$the_query->the_post();
$images = rwmb_meta( 'fotos_del_grupo', ['size' => 'full'], );
foreach ( $images as $image ) {
?>
<li class="mix <?php echo substr(get_the_title(),1,3); ?> col-xl-3 col-md-4 col-12 col-sm-6 pd">
<img src="<?php echo $image['url']; ?>" >
<div class="portfolio-overlay">
<div class="overlay-content">
<p class="category"><?php echo get_the_title(); ?> </p>
<a href="<?php echo $image['url']; ?>" title="View Project" target="_blank" width="100%">
<div class="magnify-icon">
<p><span><i class="fa fa-link" aria-hidden="true"></i></span></p>
</div>
</a>
<a data-fancybox="item" title="click to zoom-in" href="<?php echo $image['url']; ?>" width="100%">
<div class="magnify-icon">
<p><span><i class="fa fa-search" aria-hidden="true"></i></span></p>
</div>
</a>
</div>
</div>
</li>
<?php
}
}
/* Restore original Post Data */
wp_reset_postdata();
}
?>
</ul>
<!-- JS Links -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js"></script>
<!-- Mixitup -->
<script src='https://cdnjs.cloudflare.com/ajax/libs/mixitup/3.2.2/mixitup.min.js'></script>
<!-- fancybox -->
<script src='https://cdnjs.cloudflare.com/ajax/libs/fancybox/3.1.20/jquery.fancybox.min.js'></script>
<!-- Fancybox js -->
<script>
/*Downloaded from https://www.codeseek.co/ezra_siton/mixitup-fancybox3-JydYqm */
// 1. querySelector
var containerEl = document.querySelector(".portfolio-item");
// 2. Passing the configuration object inline
//https://www.kunkalabs.com/mixitup/docs/configuration-object/
var mixer = mixitup(containerEl, {
animation: {
effects: "fade translateZ(-100px)",
effectsIn: "fade translateY(-100%)",
easing: "cubic-bezier(0.645, 0.045, 0.355, 1)"
}
});
// fancybox insilaze & options //
$("[data-fancybox]").fancybox({
loop: true,
hash: true,
transitionEffect: "slide",
/* zoom VS next////////////////////
clickContent - i modify the deafult - now when you click on the image you go to the next image - i more like this approach than zoom on desktop (This idea was in the classic/first lightbox) */
clickContent: function(current, event) {
return current.type === "image" ? "next" : false;
}
});
</script>
