Warning: file_get_contents(/data/phpspider/zhask/data//catemap/9/javascript/434.json): failed to open stream: No such file or directory in /data/phpspider/zhask/libs/function.php on line 167

Warning: Invalid argument supplied for foreach() in /data/phpspider/zhask/libs/tag.function.php on line 1116

Notice: Undefined index: in /data/phpspider/zhask/libs/function.php on line 180

Warning: array_chunk() expects parameter 1 to be array, null given in /data/phpspider/zhask/libs/function.php on line 181
Javascript Wordpress post';s缩略图将打开此帖子';灯箱画廊_Javascript_Php_Html_Wordpress_Lightbox - Fatal编程技术网

Javascript Wordpress post';s缩略图将打开此帖子';灯箱画廊

Javascript Wordpress post';s缩略图将打开此帖子';灯箱画廊,javascript,php,html,wordpress,lightbox,Javascript,Php,Html,Wordpress,Lightbox,我有点迷路了,还没有找到解决问题的办法,所以我决定请你帮忙。也许我不知道如何表达这个问题,这就是为什么我找不到任何解决方案,所以任何帮助都是感激的 我的客户的网站是建立在Wordpress上的,但该网站是手写的(不是买来的主题),在一个页面上,她希望有她公司投资组合的参考资料。目前,参考资料的作用类似于Wordpress帖子,但我们希望在每篇帖子中添加图库,如果客户点击帖子的链接,就会在灯箱中打开一个图库 。(对爱沙尼亚语感到抱歉) 我添加了“”插件(在帖子中),以便在帖子页面上,我可以将图像添

我有点迷路了,还没有找到解决问题的办法,所以我决定请你帮忙。也许我不知道如何表达这个问题,这就是为什么我找不到任何解决方案,所以任何帮助都是感激的

我的客户的网站是建立在Wordpress上的,但该网站是手写的(不是买来的主题),在一个页面上,她希望有她公司投资组合的参考资料。目前,参考资料的作用类似于Wordpress帖子,但我们希望在每篇帖子中添加图库,如果客户点击帖子的链接,就会在灯箱中打开一个图库

。(对爱沙尼亚语感到抱歉)

我添加了“”插件(在帖子中),以便在帖子页面上,我可以将图像添加到图库中。现在我的问题是,我怎样才能把这些图片拿到lightbox gallery

我已经设法将这些图像上传到我的网站,但不是我想要的方式,以下是我的代码:

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

        <a href="<?php
            if ( $thumbnail_id = get_post_thumbnail_id() ) {

                if ( $image_src = wp_get_attachment_image_src( $thumbnail_id, 'normal-bg' ) ) 
                    printf( ' %s', $image_src[0] );
                }
            ?>">

        <div class="bg_img"<?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] );     

                }

            ?>> </div>

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

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

    </a>
    </div>

    <div>

    <?php $galleryarray = get_post_gallery_ids($post->ID);

                foreach ($galleryarray as $id) {

                    $image = wp_get_attachment_image_src( $id, ‘thumb’ );

                    $attachment_meta = wp_get_attachment( $id ); ?>

                    <a id="<?php echo $id; ?>" href="<?php echo $image[0]; ?>" data-lightbox="image-1">

                    <img src="<?php echo wp_get_attachment_url( $id ); ?>">

                    <?php echo '</a>';?>

                <?php } ?>
</div>

我说到了一点,每篇文章都有自己的图库,如果你打开网站上的第一篇文章,就会有一个灯箱图库,你可以在这里查看这篇文章的所有图片。HTML/PHP代码:

            <?php 
                $i = 1;
                while( $refs->have_posts() ): $refs->the_post();    
                $galleryarray = get_post_gallery_ids($post->ID);?>

                <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(1)"> </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’ );
                                    $number = $index+1; ?>

                                    <div 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’ );
                                    $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; ?>

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