ポップアップギャラリーfor user、wordpress

私はギャラリーをポップアップする私のウェブサイトにボタンを追加しました。私の問題はギャラリーがコードからイメージをロードしているためです。クライアントが新しいイメージをアップロードする必要があるとき、コードの彼のためにそれも。どうすれば自動更新できますか？つまり、クライアントがワードプレスの「メディア」に画像を追加すると、ギャラリーが自動的に更新されます。ここポップアップギャラリーfor user、wordpress

は今使用してコードイムです：これはshotcode

<!DOCTYPE html> 
<html> 
<body> 

<img class="alignnone size-full wp-image-133 aligncenter" style="border: 5px solid white; border-radius: 50%; background: white; box-shadow: 1px 1px 5px gray;" src="https://upload.wikimedia.org/wikipedia/commons/thumb/c/c2/F_icon.svg/2000px-F_icon.svg.png" alt="" width="72" height="72" onclick="openModal();currentSlide(1)" class="hover-shadow cursor"><strong>try</strong> 
    </div> 
</div> 

<div id="myModal" class="modal"> 
    <span class="close cursor" onclick="closeModal()">×</span> 
    <div class="modal-content"> 

    <div class="mySlides"> 
     <div class="numbertext">1/4</div> 
     <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/c/c2/F_icon.svg/2000px-F_icon.svg.png" style="width:100%"> 
    </div> 

    <div class="mySlides"> 
     <div class="numbertext">2/4</div> 
     <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/c/c2/F_icon.svg/2000px-F_icon.svg.png" style="width:100%"> 
    </div> 

    <div class="mySlides"> 
     <div class="numbertext">3/4</div> 
     <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/c/c2/F_icon.svg/2000px-F_icon.svg.png" style="width:100%"> 
    </div> 

    <div class="mySlides"> 
     <div class="numbertext">4/4</div> 
     <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/c/c2/F_icon.svg/2000px-F_icon.svg.png" alt="Nature and sunrise" style="width:100%"> 
    </div> 

    <a class="prev" onclick="plusSlides(-1)">❮</a> 
    <a class="next" onclick="plusSlides(1)">❯</a> 

    <div class="caption-container"> 
     <p id="caption"></p> 
    </div> 

<script> 
function openModal() { 
    document.getElementById('myModal').style.display = "block"; 
} 

function closeModal() { 
    document.getElementById('myModal').style.display = "none"; 
} 

var slideIndex = 1; 
showSlides(slideIndex); 

function plusSlides(n) { 
    showSlides(slideIndex += n); 
} 

function currentSlide(n) { 
    showSlides(slideIndex = n); 
} 

function showSlides(n) { 
    var i; 
    var slides = document.getElementsByClassName("mySlides"); 
    var dots = document.getElementsByClassName("demo"); 
    var captionText = document.getElementById("caption"); 
    if (n > slides.length) {slideIndex = 1} 
    if (n < 1) {slideIndex = slides.length} 
    for (i = 0; i < slides.length; i++) { 
     slides[i].style.display = "none"; 
    } 
    for (i = 0; i < dots.length; i++) { 
     dots[i].className = dots[i].className.replace(" active", ""); 
    } 
    slides[slideIndex-1].style.display = "block"; 
    dots[slideIndex-1].className += " active"; 
    captionText.innerHTML = dots[slideIndex-1].alt; 
} 
</script> 

</body> 
</html>

出典

2017-05-31 wps

使用は、私が考える仕事になるだろう

<?php 
function your_custom_gallery() { 
    $attachments = get_posts(array(
     'post_type'  => 'attachment', 
     'posts_per_page' => 4, 
     'post_status' => null, 
     'post_mime_type' => 'image' 
    )); 
    ?> 

    <div id="imyModal" class="modal" style="direction: ltr!important;"> 
     <span class="close cursor" onclick="closeModal()">×</span> 
     <div class="modal-content"> 
      <?php 
      $i = 0; 
      foreach ($attachments as $attachment) { 
       $image_attributes = wp_get_attachment_image_src($attachment->ID, 'original'); 
       echo '<div class="mySlides">'; 
       echo '<div class="numbertext"> ' . $i . '/4</div>'; 
       echo '<img src="' . $image_attributes[0] . '" style="width:100%">'; 
       echo '</div>'; 
       $i ++; 
      } 
      ?> 
      <a class="prev" onclick="plusSlides(-1)">❮</a> 
      <a class="next" onclick="plusSlides(1)">❯</a> 
     </div> 
    </div> 
    <?php 
} 

function add_script_to_head() { 
    ?> 
    <script> 
     function openModal() { 
      document.getElementById('imyModal').style.display = "block"; 
     } 

     function closeModal() { 
      document.getElementById('imyModal').style.display = "none"; 
     } 

     var slideIndex = 1; 
     showSlides(slideIndex); 

     function plusSlides(n) { 
      showSlides(slideIndex += n); 
     } 

     function currentSlide(n) { 
      showSlides(slideIndex = n); 
     } 

     function showSlides(n) { 
      var i; 
      var slides = document.getElementsByClassName("mySlides"); 
      var dots = document.getElementsByClassName("demo"); 
      var captionText = document.getElementById("caption"); 
      if (n > slides.length) { 
       slideIndex = 1 
      } 
      if (n < 1) { 
       slideIndex = slides.length 
      } 
      for (i = 0; i < slides.length; i++) { 
       slides[i].style.display = "none"; 
      } 
      for (i = 0; i < dots.length; i++) { 
       dots[i].className = dots[i].className.replace(" active", ""); 
      } 
      slides[slideIndex - 1].style.display = "block"; 
      dots[slideIndex - 1].className += " active"; 
      captionText.innerHTML = dots[slideIndex - 1].alt; 
     } 
    </script> 
    <?php 
} 

add_action('wp_head', 'add_script_to_head'); 
add_shortcode('custom_gallery', 'your_custom_gallery');

出典

2017-05-31 19:57:10

ポップアップギャラリーfor user、wordpress

答えて

関連する問題