Question

我从W3Schools.com（link）找到了一个简单的简单灯箱代码，但问题是，如何让它适用于多个阵列？

例如：我有wordpress帖子，每个帖子都有自己的画廊，你可以点击它，灯箱会弹出。但它只适用于第一篇文章，而其他文章则不会显示。似乎我无法找到解决方案。

Javascript代码：

<script type="text/javascript" id="lightbox-js">
    function openModal(i) {
      document.getElementById('myModal-'+i).style.display = "block";
      document.getElementById('pageHeader').style.zIndex = "0";
      document.getElementById('pageFooter').style.zIndex = "0";
      document.getElementById('pageContainer').style.textAlign = "left";
    }

    function closeModal(i) {
      document.getElementById('myModal-'+i).style.display = "none";
      document.getElementById('pageHeader').style.zIndex = "10";
      document.getElementById('pageFooter').style.zIndex = "9";
      document.getElementById('pageContainer').style.textAlign = "center";
    }

    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;}
       console.log(slideIndex);
      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代码：

    <?php 
$refs = new WP_Query(array('post_type' =>'post', 'posts_per_page' => -1));
if( $refs->have_posts() ) { ?> 
    <!-- <div class="row comment">
      <h2> <?php // the_field('kommentaar'); ?></h2>
    </div> -->
    <div class="filters">
        <?php
        $categories = get_categories( array(
            'orderby' => 'name',
            'order'   => 'ASC'
        ) );

        foreach( $categories as $category ) {
            echo '<div class="category" id="' . esc_html( $category->slug ) . '" >' . sprintf( '<a>%s</a>',esc_html( $category->name )) . '</div> ';
        } ?>
    </div>
    <div class="row">
        <div class="row-inner" id="ajax-posts">
            <?php 
            while( $refs->have_posts() ): $refs->the_post();    
                // get_template_part('content/content', 'reference');
                $galleryarray = get_post_gallery_ids($post->ID);
                S ?>

                <div class="gridbox reference <?php if(DOING_AJAX) {echo " added";} ?>">

                        <div class="bg_img cursor"<?php

                                if ( $thumbnail_id = get_post_thumbnail_id() ) {

                                    if ( $image_src = wp_get_attachment_image_src( $thumbnail_id, 'normal-bg' ) )

                                        printf( ' style="background-image: url(%s);"', $image_src[0] );     

                                }

                            ?> onclick="openModal(<?php echo $i; ?>);currentSlide(<?php echo $id ?>)"> </div>

                        <h3><?php the_title(); ?></h3>

                        <p><?php the_time('Y'); ?><br><?php the_category( ', ' ); ?></p>

                    </a>
                </div>

                <!-- Modal -->
                    <div id="myModal-<?php echo $i; ?>" class="modal">
                    <span class="close cursor" onclick="closeModal(<?php echo $i; ?>)">&times;</span>

                    <div class="modal-content">          
                               <?php
                                foreach ($galleryarray as $index => $id) {
                                    $image = wp_get_attachment_image_src( $id, ‘thumb’ );
                                    /* $attachment_meta = wp_get_attachment( $id );*/ 
                                    $number = $index+1; ?>

                                    <div id="img-<?php echo $id; ?>" class="mySlides">
                                        <div class="numbertext"><?php echo $number; ?> / <?php echo count($galleryarray); ?></div>
                                        <img id="<?php echo $id; ?>" src="<?php echo $image[0]; ?>" style="width:100%">
                                    </div>

                                <?php } ?>

                    <a class="prev" onclick="plusSlides(-1)">&#10094;</a>
                    <a class="next" onclick="plusSlides(1)">&#10095;</a>

                    <div class="caption-container">
                      <p id="caption"></p>
                    </div>
                                <?php
                                foreach ($galleryarray as $index => $id) {
                                    $image = wp_get_attachment_image_src( $id, ‘thumb’ );
                                    /* $attachment_meta = wp_get_attachment( $id );*/ 
                                    $alt = get_post_meta( $id, '_wp_attachment_image_alt', true);
                                    $number = $index+1; ?>

                                    <div class="column">
                                        <img id="<?php echo $id; ?>" class="demo cursor" src="<?php echo $image[0]; ?>" style="width:100%" onclick="currentSlide(<?php echo $number ?>)" alt="<?php echo $alt; ?>">
                                    </div>

                                <?php } ?>
                  </div>
                </div>
                    <?php $i++; 
            endwhile; ?>
        </div>      
    </div>

我可以将这些库数组从PHP代码转换为Javascript，将它们定义为不同的数组，然后告诉JavaScript打开特定的库，用户点击哪里？然后有问题，如果删除帖子或添加一些新帖子会怎样？

将W3S灯箱用于多个阵列

0 个答案: