Миниатюра Wordpress откроет галерею этого поста в лайтбоксе - PullRequest
Новая
       5

Миниатюра Wordpress откроет галерею этого поста в лайтбоксе

0 голосов
/ 20 мая 2018

Я немного растерялся и не нашел решения своей проблемы, поэтому решил обратиться к Вам за помощью.Возможно, я не знаю, как сформулировать эту проблему, и поэтому я не могу найти никакого решения, поэтому любая помощь приветствуется!

Сайт моего клиента построен на Wordpress, но сайт написан от руки (некупленная тема) и на одной странице она хочет иметь ссылки на портфолио своей компании.Ссылки на данный момент действуют как WordPress, но мы хотели бы добавить Галерею к каждому сообщению, и если клиент нажимает на ссылку публикации, он открывает галерею в лайтбоксе.

Как сообщениявыглядеть на сайте .(Извините за эстонский язык)

Я добавил плагин " Featured Galleries " ( image в сообщении), чтобы на странице сообщения я мог добавлять изображения вгалерея.И теперь мой вопрос, как я могу получить эти изображения в галерею лайтбокс?

Мне удалось получить эти изображения на моем веб-сайте, но не так, как мне хотелось бы, вот мой код: 

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

Если есть более простой способ сделать это,тогда я тоже за это!Любая помощь приветствуется.

1 Ответ

0 голосов
/ 07 июня 2018

Я попал в точку, где у каждого поста есть своя галерея, и если вы открываете первый пост на веб-сайте, появляется галерея лайтбокса, где вы можете проверить все изображения для этого поста.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; ?>

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

Все в порядке с первым постом, он получит мне основное изображение из галереи, а остальные ниже,где вы можете увидеть их и выбрать их.Но похоже, что для других постов это не работает.Откроется лайтбокс, и в приведенном ниже столбце есть изображения для этих конкретных постов, но они не будут отображаться большими, так как кажется, что JavaScript работает только для первого модала.

Вопрос в том, как его получить.правильно для других, чтобы я мог видеть правильные изображения для конкретных сообщений?Сайт для сообщений: https://vmtehitus.ee/referentsid/ (Извините, только на эстонском языке).

...