Busca
Fri May 20 2022 09:02:51 GMT+0000 (Coordinated Universal Time)
<!-- CSS links--> <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css"> <!-- 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" /> <section class="portfolio-section" id="portfolio"> <div class="container-fluid"> <div class="row"> <div class="col-lg-12 text-center"> <h2>Project Gallery</h2> <p>Use all the same size pictures :)</p> </div> </div> <div class="portfolio-menu mt-2 mb-4"> <nav class="controls"> <button type="button" class="control outline" data-filter="all">All</button> <button type="button" class="control outline" data-filter=".web">Web Design</button> <button type="button" class="control outline" data-filter=".dev">Development</button> <button type="button" class="control outline" data-filter=".wp">WordPress</button> </nav> </div> <ul class="row portfolio-item"> <?php function get_images_from_media_library() { $contador = 0; $args = array( 'post_type' => 'attachment', 'post_mime_type' =>'image/jpeg', 'post_status' => 'inherit', 'posts_per_page' => 50000, ); $query_images = new WP_Query( $args ); $images = array(); foreach ( $query_images->posts as $image) { ?> <li class="mix dev col-xl-3 col-md-4 col-12 col-sm-6 pd"><img src="<?php echo $image->guid;?>?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=870&q=80"" itemprop="thumbnail"> <div class="portfolio-overlay"> <div class="overlay-content"> <p class="category"><?php echo $image->id; ?></p> <a href="#" title="View Project" target="_blank"> <div class="magnify-icon"> <p><span><i class="fa fa-link" aria-hidden="false"></i></span></p> </div> </a> <a data-fancybox="item" title="click to zoom-in" href="<?php echo $image->guid; ?>"> <div class="magnify-icon"> <p><span><i class="fa fa-search" aria-hidden="true"></i></span></p> </div> </a> </div> </div> </li> <?php $contador++; } //echo $contador; //return $images; } get_images_from_media_library(); ?> </ul> </div> <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> <script src="https://kit.fontawesome.com/a076d05399.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>
Comments