Busca

PHOTO EMBED

Fri May 20 2022 09:02:51 GMT+0000 (Coordinated Universal Time)

Saved by @JuanJota #php 

  <!-- 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>
content_copyCOPY