2017-05-31 16 views
0

Ich habe eine Schaltfläche zu meiner Website, die eine Galerie Popup, mein Problem ist, dass die Galerie das Bild aus dem Code geladen, so wenn mein Client ein neues Bild hochladen muss ich hinzufügen es ist für ihn auch im Code. Wie kann ich es automatisch aktualisieren? Ich meine, wenn der Kunde ein Bild zu "Medien" in WordPress hinzufügen wird, so wird die Galerie automatisch aktualisiert, danke!Popup-Galerie für Benutzer, WordPress

hier ist der Code im Augenblick mit:

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

Antwort

0

Verwendung dieses Shotcode es ich denke, funktionieren wird

<?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'); 
Verwandte Themen