Как добавить лайтбокс внутри wordpress l oop и get_post ()? - PullRequest
Новая
       2

Как добавить лайтбокс внутри wordpress l oop и get_post ()?

0 голосов
/ 30 января 2020

Я новичок в разработке WordPress пользовательских тем. В настоящее время я перерабатываю сайт в WordPress, и есть страница галереи с лайтбоксом. На веб-сайте изображения были предварительно выбраны, и изображения были связаны с кодом с помощью sr c.

Но когда дело доходит до моего обновления WordPress, я использую WordPress L oop для show-all Dynami c pill и get_post () для динамической категории c pills.

Все, что мне нужно, это иметь представление о том, как настроить функции wordpress l oop и get_post () для добавления лайтбокса, который использовал оригинальный сайт , Вот мои коды и оригинальные коды сайтов

Оригинальный сайт

галерея. html

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
        <meta name="viewport" content="width=device-width, initial-scale=1">

        <!-- SEO -->
        <title>Gallery</title>
<meta name="description" content="Hello">
<meta name="keywords" content="Hello">

        <!-- Bootstrap -->
        <link rel="stylesheet" href="assets/css/bootstrap.min.css">
        <!-- Open Sans -->
        <link rel="stylesheet" href="//fonts.googleapis.com/css?family=Open+Sans:400,300,600,700">
        <!-- FontAwesome -->
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css">
        <!-- Lightbox -->
        <link href="assets/css/lightbox.css" rel="stylesheet">
        <!-- Pre Classes -->
        <link href="assets/css/pre-classes.css" rel="stylesheet">
        <!-- Styles -->
        <link href="assets/css/style.css" rel="stylesheet">

 </head>
    <body>

        <!-- Content -->
        <section class="content pull-left width-wide clear-both">
            <div class="wrap">
                <!-- Inside Content -->
                <div class="inside-content inside-page pull-left width-wide clear-both">

                    <!-- Gallery -->
                    <div class="gallery pull-left width-wide">


                        <!-- Gallery Items -->
                        <div class="gallery-items pull-left width-wide">
                                                        <!-- Item -->
                            <a href="img1" data-imagelightbox="a" class="item col-md-4">
                                <img src="img1" alt="Hello World" width="344" height="215"> 
                            </a><!-- // Item -->
                                                        <!-- Item -->
                            <a href="img2" data-imagelightbox="a" class="item col-md-4">
                                <img src="img2" alt="Hello World" width="344" height="215"> 
                            </a><!-- // Item -->
                                                        <!-- Item -->
                            <a href="img3" data-imagelightbox="a" class="item col-md-4">
                                <img src="img3" alt="Hello World" width="344" height="215"> 
                            </a><!-- // Item -->
                                                        <!-- Item -->
                            <a href="img4" data-imagelightbox="a" class="item col-md-4">
                                <img src="img4" alt="Hello World" width="344" height="215"> 
                            </a><!-- // Item -->
                                                        <!-- Item -->
                            <a href="img5" data-imagelightbox="a" class="item col-md-4">
                                <img src="img5" alt="Hello World" width="344" height="215"> 
                            </a><!-- // Item -->
                                                        <!-- Item -->
                            <a href="img6" data-imagelightbox="a" class="item col-md-4">
                                <img src="img6.jpg" alt="Hello World" width="344" height="215"> 
                            </a><!-- // Item -->
                                                        <!-- Item -->
                        </div><!-- // Gallery Items -->
                    </div><!-- // Gallery -->

                </div><!-- Inside Content -->
            </div>
        </section><!-- // Content -->

  <!-- jScripts -->
        <script src="assets/js/jquery.min.js"></script>
        <script src="assets/js/bootstrap.min.js"></script>
    <!--    <script src="assets/js/cycle.min.js"></script>        -->
        <script src="assets/js/imagelightbox.min.js"></script>

        <!-- Custom jsPlugins -->
    <!--    <script src="assets/js/plugins.jquery.js"></script> -->
        <!-- Custom jScripts -->
        <script src="assets/js/custom.jquery.js"></script>

    </body>
</html>

imagelightbox.min. js

;(function(e,t,n,r){"use strict";var i=function(){var e=n.body||n.documentElement,e=e.style;if(e.WebkitTransition=="")return"-webkit-";if(e.MozTransition=="")return"-moz-";if(e.OTransition=="")return"-o-";if(e.transition=="")return"";return false},s=i()===false?false:true,o=function(e,t,n){var r={},s=i();r[s+"transform"]="translateX("+t+")";r[s+"transition"]=s+"transform "+n+"s linear";e.css(r)},u="ontouchstart"in t,a=t.navigator.pointerEnabled||t.navigator.msPointerEnabled,f=function(e){if(u)return true;if(!a||typeof e==="undefined"||typeof e.pointerType==="undefined")return false;if(typeof e.MSPOINTER_TYPE_MOUSE!=="undefined"){if(e.MSPOINTER_TYPE_MOUSE!=e.pointerType)return true}else if(e.pointerType!="mouse")return true;return false};e.fn.imageLightbox=function(r){var r=e.extend({selector:'id="imagelightbox"',allowedTypes:"png|jpg|jpeg|gif",animationSpeed:250,preloadNext:true,enableKeyboard:true,quitOnEnd:false,quitOnImgClick:false,quitOnDocClick:true,onStart:false,onEnd:false,onLoadStart:false,onLoadEnd:false},r),i=e([]),l=e(),c=e(),h=0,p=0,d=0,v=false,m=function(t){return e(t).prop("tagName").toLowerCase()=="a"&&(new RegExp(".("+r.allowedTypes+")$","i")).test(e(t).attr("href"))},g=function(){if(!c.length)return true;var n=e(t).width()*.8,r=e(t).height()*.9,i=new Image;i.src=c.attr("src");i.onload=function(){h=i.width;p=i.height;if(h>n||p>r){var s=h/p>n/r?h/n:p/r;h/=s;p/=s}c.css({width:h+"px",height:p+"px",top:(e(t).height()-p)/2+"px",left:(e(t).width()-h)/2+"px"})}},y=function(t){if(v)return false;t=typeof t==="undefined"?false:t=="left"?1:-1;if(c.length){if(t!==false&&(i.length<2||r.quitOnEnd===true&&(t===-1&&i.index(l)==0||t===1&&i.index(l)==i.length-1))){w();return false}var n={opacity:0};if(s)o(c,100*t-d+"px",r.animationSpeed/1e3);else n.left=parseInt(c.css("left"))+100*t+"px";c.animate(n,r.animationSpeed,function(){b()});d=0}v=true;if(r.onLoadStart!==false)r.onLoadStart();setTimeout(function(){c=e("<img "+r.selector+" />").attr("src",l.attr("href")).load(function(){c.appendTo("body");g();var n={opacity:1};c.css("opacity",0);if(s){o(c,-100*t+"px",0);setTimeout(function(){o(c,0+"px",r.animationSpeed/1e3)},50)}else{var u=parseInt(c.css("left"));n.left=u+"px";c.css("left",u-100*t+"px")}c.animate(n,r.animationSpeed,function(){v=false;if(r.onLoadEnd!==false)r.onLoadEnd()});if(r.preloadNext){var a=i.eq(i.index(l)+1);if(!a.length)a=i.eq(0);e("<img />").attr("src",a.attr("href")).load()}}).error(function(){if(r.onLoadEnd!==false)r.onLoadEnd()});var n=0,u=0,p=0;c.on(a?"pointerup MSPointerUp":"click",function(e){e.preventDefault();if(r.quitOnImgClick){w();return false}if(f(e.originalEvent))return true;var t=(e.pageX||e.originalEvent.pageX)-e.target.offsetLeft;l=i.eq(i.index(l)-(h/2>t?1:-1));if(!l.length)l=i.eq(h/2>t?i.length:0);y(h/2>t?"left":"right")}).on("touchstart pointerdown MSPointerDown",function(e){if(!f(e.originalEvent)||r.quitOnImgClick)return true;if(s)p=parseInt(c.css("left"));n=e.originalEvent.pageX||e.originalEvent.touches[0].pageX}).on("touchmove pointermove MSPointerMove",function(e){if(!f(e.originalEvent)||r.quitOnImgClick)return true;e.preventDefault();u=e.originalEvent.pageX||e.originalEvent.touches[0].pageX;d=n-u;if(s)o(c,-d+"px",0);else c.css("left",p-d+"px")}).on("touchend touchcancel pointerup pointercancel MSPointerUp MSPointerCancel",function(e){if(!f(e.originalEvent)||r.quitOnImgClick)return true;if(Math.abs(d)>50){l=i.eq(i.index(l)-(d<0?1:-1));if(!l.length)l=i.eq(d<0?i.length:0);y(d>0?"right":"left")}else{if(s)o(c,0+"px",r.animationSpeed/1e3);else c.animate({left:p+"px"},r.animationSpeed/2)}})},r.animationSpeed+100)},b=function(){if(!c.length)return false;c.remove();c=e()},w=function(){if(!c.length)return false;c.animate({opacity:0},r.animationSpeed,function(){b();v=false;if(r.onEnd!==false)r.onEnd()})};e(t).on("resize",g);if(r.quitOnDocClick){e(n).on(u?"touchend":"click",function(t){if(c.length&&!e(t.target).is(c))w()})}if(r.enableKeyboard){e(n).on("keyup",function(e){if(!c.length)return true;e.preventDefault();if(e.keyCode==27)w();if(e.keyCode==37||e.keyCode==39){l=i.eq(i.index(l)-(e.keyCode==37?1:-1));if(!l.length)l=i.eq(e.keyCode==37?i.length:0);y(e.keyCode==37?"left":"right")}})}e(n).on("click",this.selector,function(t){if(!m(this))return true;t.preventDefault();if(v)return false;v=false;if(r.onStart!==false)r.onStart();l=e(this);y()});this.each(function(){if(!m(this))return true;i=i.add(e(this))});this.switchImageLightbox=function(e){var t=i.eq(e);if(t.length){var n=i.index(l);l=t;y(e<n?"left":"right")}return this};this.quitImageLightbox=function(){w();return this};return this}})(jQuery,window,document);

$( function()
    {
            // ACTIVITY INDICATOR

        var activityIndicatorOn = function()
            {
                $('.overlay-bg').remove();
                $( '<div id="imagelightbox-loading"><div></div></div><div class="overlay-bg"></div>' ).appendTo( 'body' );
            },
            activityIndicatorOff = function()
            {
                $( '#imagelightbox-loading' ).remove();
            },


            // OVERLAY

            overlayOn = function()
            {
                $( '<div id="imagelightbox-overlay"></div>' ).appendTo( 'body' );
            },
            overlayOff = function()
            {
                $( '#imagelightbox-overlay' ).remove();
            },


            // CLOSE BUTTON

            closeButtonOn = function( instance )
            {
                $( '<button type="button" id="imagelightbox-close" title="Close"></button>' ).appendTo( 'body' ).on( 'click touchend', function(){ $( this ).remove(); instance.quitImageLightbox(); return false; });
            },
            closeButtonOff = function()
            {
                $( '#imagelightbox-close' ).remove();
            },


            // CAPTION

            captionOn = function()
            {
                var description = $( 'a[href="' + $( '#imagelightbox' ).attr( 'src' ) + '"] img' ).attr( 'alt' );
                if( description.length > 0 )
                    $( '<div id="imagelightbox-caption">' + description + '</div>' ).appendTo( 'body' );
            },
            captionOff = function()
            {
                $( '#imagelightbox-caption' ).remove();
            },


            // NAVIGATION

            navigationOn = function( instance, selector )
            {
                var images = $( selector );
                if( images.length )
                {
                    var nav = $( '<div id="imagelightbox-nav"></div>' );
                    for( var i = 0; i < images.length; i++ )
                        nav.append( '<button type="button"></button>' );

                    nav.appendTo( 'body' );
                    nav.on( 'click touchend', function(){ return false; });

                    var navItems = nav.find( 'button' );
                    navItems.on( 'click touchend', function()
                    {
                        var $this = $( this );
                        if( images.eq( $this.index() ).attr( 'href' ) != $( '#imagelightbox' ).attr( 'src' ) )
                            instance.switchImageLightbox( $this.index() );

                        navItems.removeClass( 'active' );
                        navItems.eq( $this.index() ).addClass( 'active' );

                        return false;
                    })
                    .on( 'touchend', function(){ return false; });
                }
            },
            navigationUpdate = function( selector )
            {
                var items = $( '#imagelightbox-nav button' );
                items.removeClass( 'active' );
                items.eq( $( selector ).filter( '[href="' + $( '#imagelightbox' ).attr( 'src' ) + '"]' ).index( selector ) ).addClass( 'active' );
            },
            navigationOff = function()
            {
                $( '#imagelightbox-nav' ).remove();
            },


            // ARROWS

            arrowsOn = function( instance, selector )
            {
                var $arrows = $( '<button type="button" class="imagelightbox-arrow imagelightbox-arrow-left"></button><button type="button" class="imagelightbox-arrow imagelightbox-arrow-right"></button>' );

                $arrows.appendTo( 'body' );

                $arrows.on( 'click touchend', function( e )
                {
                    e.preventDefault();

                    var $this   = $( this ),
                        $target = $( selector + '[href="' + $( '#imagelightbox' ).attr( 'src' ) + '"]' ),
                        index   = $target.index( selector );

                    if( $this.hasClass( 'imagelightbox-arrow-left' ) )
                    {
                        index = index - 1;
                        if( !$( selector ).eq( index ).length )
                            index = $( selector ).length;
                    }
                    else
                    {
                        index = index + 1;
                        if( !$( selector ).eq( index ).length )
                            index = 0;
                    }

                    instance.switchImageLightbox( index );
                    return false;
                });
            },
            arrowsOff = function()
            {
                $( '.imagelightbox-arrow' ).remove();
            };


        //  WITH ACTIVITY INDICATION

        $( 'a[data-imagelightbox="a"]' ).imageLightbox(
        {
            onLoadStart:    function() { activityIndicatorOn(); },
            onLoadEnd:      function() { activityIndicatorOff(); },
            onEnd:          function() { activityIndicatorOff();$('.overlay-bg').remove(); }
        });



    });

Wordpress - page-gallery. php

get_header(); ?>

 <section class="content pull-left width-wide clear-both">
            <div class="wrap">
                <!-- Inside Content -->
                <div class="inside-content inside-page pull-left width-wide clear-both">

                    <!-- page header -->
                    <div class="page-header pull-left width-wide">
                        <!-- Title -->
                        <h1>Gallery</h1><!-- Title -->

                        <!-- Breadcrumb -->
                    <ul class="_bread">
                    <li><a href="http://localhost:8080/wordpress/" title="Home">Home</a></li>
                    <li><a href="#" title="Gallery" class="active">Gallery</a></li>
            </ul>
<!-- Breadcrumb -->  
                    </div><!-- // page header -->

                    <!-- Gallery -->
                    <div class="gallery pull-left width-wide">
                        <!-- Menu -->
                        <div class="cat-menu pull-right padding-right-20">
                            <!--Categories : -->

                         <!-- <a href="#showall" title="Show All" class="active">Show All</a>
                                                        <a href="#Category1" title="Category 1 " >Category 1 </a>
                                                        <a href="#Category2" title="Category 2" >Category 2</a>
                                                        <a href="#Category3" title="Category 3" >Category 3</a> -->

                        <ul class="nav nav-pills">
                                <li class="active"><a data-toggle="pill" href="#showall">Show All</a></li>
                                <li><a data-toggle="pill" href="#Category1">Category 1</a></li>
                                <li><a data-toggle="pill" href="#Category2">Category 2</a></li>
                                <li><a data-toggle="pill" href="#Category3">Category 3</a></li>
                        </ul> 
                        </div><!-- // Menu -->

                        <!-- Gallery Items -->

                <div class="gallery-items pull-left width-wide">

                <div class="tab-content">
                        <div id="showall" class="tab-pane fade in active">

                             <?php if(have_posts()): while(have_posts()): the_post(); ?>
                            <?php the_content(); ?>

                            <?php endwhile; 
                                else: 
                                    echo "Content not found";
                                 endif; 
                            wp_reset_postdata();?> 

                        </div>   

                         <div id="Category1" class="tab-pane">

                            <?php
                                $my_page_id = 766; //your page or post ID
                                $my_page = get_post($my_page_id); //retrieves the page via the ID
                                $content = $my_page->post_content; //gets the unfiltered page content
                                $content = apply_filters('the_content', $content); //cleanup content
                                $content = str_replace(']]>', ']]&gt;', $content); //cleanup content
                                $title = $my_page->post_title; //retrieves page title and sets the variable
                                ?>

                                <?php
                                echo $content; //show page content
                            ?>


                    </div>

                         <div id="Category2" class="tab-pane">

                            <?php
                                $my_page_id = 769; 
                                $my_page = get_post($my_page_id); 
                                $content = $my_page->post_content; 
                                $content = apply_filters('the_content', $content); 
                                $content = str_replace(']]>', ']]&gt;', $content); 
                                $title = $my_page->post_title; 
                                ?>

                                <?php
                                echo $content; //show page content
                            ?>

                    </div>



                         <div id="Category3" class="tab-pane">

                            <?php
                                $my_page_id = 772; //your page or post ID
                                $my_page = get_post($my_page_id); //retrieves the page via the ID
                                $content = $my_page->post_content; //gets the unfiltered page content
                                $content = apply_filters('the_content', $content); //cleanup content
                                $content = str_replace(']]>', ']]&gt;', $content); //cleanup content
                                $title = $my_page->post_title; //retrieves page title and sets the variable
                                ?>

                                <?php
                                echo $content; //show page content
                            ?>

                         </div>

                     </div>
                        </div><!-- // Gallery Items -->
                    </div><!-- // Gallery -->

                </div><!-- Inside Content -->
            </div>
        </section><!-- // Content -->
<?php get_footer(); ?>

Пожалуйста, помогите мне с этим.

1 Ответ

0 голосов
/ 05 февраля 2020

Это не фактический ответ. Однако мне удалось разработать лайтбокс, который работает по клику. Я использовал поле галереи ACF.

стиль. css

header{
position: sticky;
}

footer{
position: sticky;
}

page-gallery. php

image">

пользовательский. js

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

пользовательский. css

* {
  box-sizing: border-box;
}

.row > .column {
  padding: 0 8px;
}

.row:after {
  content: "";
  display: table;
  clear: both;
}

.column {
  float: left;
  width: 25%;
}

/* The Modal (background) */
.modal {
  display: none;
  position: fixed;
  z-index: 100000000;
  padding-top: 100px;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  overflow: auto;
  background-color: black;
}

/* Modal Content */
.modal-content {
  position: relative;
  background-color: #000000;
  margin: auto;
  padding: 0;
  width: 90%;
  max-width: 1200px;
  /*text-align: center;*/
}

.mySlides{
  text-align: center;
}

/* The Close Button */
.close {
  color: white;
  position: absolute;
  top: 10px;
  right: 25px;
  font-size: 35px;
  font-weight: bold;
  opacity: 1;
}

.close:hover,
.close:focus {
  color: #999;
  text-decoration: none;
  cursor: pointer;
}

.mySlides {
  display: none;
}

.cursor {
  cursor: pointer;
}

/* Next & previous buttons */
.prev,
.next {
  cursor: pointer;
  position: absolute;
  top: 50%;
  width: auto;
  padding: 16px;
  margin-top: -50px;
  color: white;
  font-weight: bold;
  font-size: 20px;
  transition: 0.6s ease;
  border-radius: 0 3px 3px 0;
  user-select: none;
  -webkit-user-select: none;
}

/* Position the "next button" to the right */
.next {
  right: 0;
  border-radius: 3px 0 0 3px;
}

/* On hover, add a black background color with a little bit see-through */
.prev:hover,
.next:hover {
  background-color: rgba(0, 0, 0, 0.8);
}

/* Number text (1/3 etc) */
.numbertext {
  color: #f2f2f2;
  font-size: 12px;
  padding: 8px 12px;
  position: absolute;
  top: 0;
}

img {
  margin-bottom: -4px;
}

.caption-container {
  text-align: center;
  background-color: black;
  padding: 2px 16px;
  color: white;
}

.demo {
  opacity: 0.6;
}

.active,
.demo:hover {
  opacity: 1;
}

Это не будет отображать точное изображение, которое вы выбрали, потому что я не добавил к нему al oop. Однако это решит проблему с лайтбоксом.

Далее я удалил файлы лайтбокса js и css, добавленные вышеупомянутые коды.

Хорошего дня!

ура!

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...