PHP SQL Почтовый отдел - PullRequest
Новая
       5

PHP SQL Почтовый отдел

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

НОВОЕ ИЗОБРАЖЕНИЕ ЗДЕСЬ [ИЗОБРАЖЕНИЕ ОДИН] [2]

[ИЗОБРАЖЕНИЕ ВТОРОЕ] [3]

Здравствуйте! Я пытаюсь создать раздел блога, как показано на рисунке 1. Он состоит из CSS Grid с четырьмя элементами div, каждая из которых является ячейкой, которая занимает 1fr элемента-обертки, имеет элементы img, h6 и p, как вы можете видеть в Image One. Все это помещено в слайд-шоу Javascript, означающее, что каждый слайд для слайд-шоу состоит из CSS Grid.

Моя проблема / цель: я хочу создать сайт администратора, на котором можно загрузить новый изображение и текст через форму , и в качестве новой div / ячейка добавляется в сетку, в результате чего предыдущие ячейки сетки перемещаются и занимают другие слайды в слайд-шоу. Это будет похоже на телефон, где у вас есть несколько экранов для размещения приложений, и когда вы добавляете новое приложение, другое перемещается в новые экраны, которые создаются автоматически. Надеюсь, что эта аналогия прояснит проблему.

Мой вопрос: возможно ли это сделать в сетке Css или ячейки сетки зафиксированы в своем положении? Если возможно, кто-нибудь может дать мне подсказку о том, как двигаться дальше? Я действительно застрял. Я хотел бы знать, на каком языке я могу добиться, добавив новый div, который заставляет другие переходить на новые слайды. Это PHP?

Я надеюсь, что у кого-то есть этот ответ, потому что я не могу двигаться дальше с этого момента. Большое спасибо. 

<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <title></title>
    <style>
      #contentContainer {
    width: 550px;
    height: 350px;
    border: 5px black solid;
    overflow: hidden;
}
      #wrapper {
    width: 2200px; /* size of the slider per number of slides */
    transform: translate3d(0, 0, 0);
    transition-property: transform;
    transition-duration: 0.5s;
    transition-timing-function: ease-in-out;
    transition-delay: 0s;
}
.content {
    float: left;
    width: 550px;
    height: 350px;
    white-space: normal;
    background-repeat: no-repeat;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: repeat(2, 1fr);
    grid-column-gap: 10px;
    grid-row-gap: 10px;
}

.div1 {
  grid-area: 1 / 1 / 2 / 2;
  background-color: blue;
  text-align: center;
}

.div2 {
  grid-area: 1 / 2 / 2 / 3;
  background-color: red;
  text-align: center;
}
.div3 {
  grid-area: 2 / 2 / 3 / 3;
  background-color: violet;
  text-align: center;
}
.div4 {
  grid-area: 2 / 1 / 3 / 2;
  background-color: orange;
  text-align: center;
}

.div1 img {
  max-width: 100%;
  max-height: 50px;
}

.div2 img {
  max-width: 100%;
  max-height: 50px;
}

.div3 img {
  max-width: 100%;
  max-height: 50px;
}

.div4 img {
  max-width: 100%;
  max-height: 50px;
}

#itemOne {
    background-color: #ADFF2F;
    background-image: url("");
}

#itemTwo {
    background-color: #FF7F50;
    background-image: url("");
}
#itemThree {
    background-color: #1E90FF;
    background-image: url("");
}
#itemFour {
    background-color: #DC143C;
    background-image: url("");
}
#navLinks {
    text-align: center;
    width: 550px;
}
    #navLinks ul {
        margin: 0px;
        padding: 0px;
        display: inline-block;
        margin-top: 6px;
    }
        #navLinks ul li {
            float: left;
            text-align: center;
            margin: 10px;
            list-style: none;
            cursor: pointer;
            background-color: #CCCCCC;
            padding: 5px;
            border-radius: 50%;
            border: black 5px solid;
        }
            #navLinks ul li:hover {
                background-color: #FFFF00;
            }
            #navLinks ul li.active {
                background-color: #333333;
                color: #FFFFFF;
                outline-width: 7px;
            }
                #navLinks ul li.active:hover {
                    background-color: #484848;
                    color: #FFFFFF;
                }
    </style>
  </head>
  <body>
    <div id="contentContainer">
      <div id="wrapper">





        <div id="itemOne" class="content">

            <div class="div1">
              <a href="">
                <img src="">
                <h6>Project Title</p>
                <p>Brief Description</p>
              </a>
            </div>
            <div class="div2">
              <a href="">
                <img src="">
                <h6>Project Title</p>
                <p>Brief Description</p>
              </a>
            </div>
            <div class="div3">
              <a href="">
                <img src="" alt="Description">
                <h6>Project Title</p>
                <p>Brief Description</p>
              </a>
            </div>
            <div class="div4">
              <a href="">
                <img src="" alt="Description">
                <h6>Project Title</p>
                <p>Brief Description</p>
              </a>
            </div>

        </div>




        <div id="itemTwo" class="content">

            <div class="div1">
              <a href="">
                <img src="" alt="Description">
                <h6>Project Title</p>
                <p>Brief Description</p>
              </a>
            </div>
            <div class="div2">
              <a href="">
                <img src="" alt="Description">
                <h6>Project Title</p>
                <p>Brief Description</p>
              </a>
            </div>
            <div class="div3">
              <a href="">
                <img src="" alt="Description">
                <h6>Project Title</p>
                <p>Brief Description</p>
              </a>
            </div>
            <div class="div4">
              <a href="">
                <img src="" alt="Description">
                <h6>Project Title</p>
                <p>Brief Description</p>
              </a>
            </div>

        </div>




        <div id="itemThree" class="content">

            <div class="div1">
              <a href="">
                <img src="" alt="Description">
                <h6>Project Title</p>
                <p>Brief Description</p>
              </a>
            </div>
            <div class="div2">
              <a href="">
                <img src="" alt="Description">
                <h6>Project Title</p>
                <p>Brief Description</p>
              </a>
            </div>
            <div class="div3">
              <a href="">
                <img src="" alt="Description">
                <h6>Project Title</p>
                <p>Brief Description</p>
              </a>
            </div>
            <div class="div4">
              <a href="">
                <img src="" alt="Description">
                <h6>Project Title</p>
                <p>Brief Description</p>
              </a>
            </div>

        </div>




        <div id="itemFour" class="content">

            <div class="div1">
              <a href="">
                <img src="" alt="Description">
                <h6>Project Title</p>
                <p>Brief Description</p>
              </a>
            </div>
            <div class="div2">
              <a href="">
                <img src="" alt="Description">
                <h6>Project Title</p>
                <p>Brief Description</p>
              </a>
            </div>
            <div class="div3">
              <a href="">
                <img src="" alt="Description">
                <h6>Project Title</p>
                <p>Brief Description</p>
              </a>
            </div>
            <div class="div4">
              <a href="">
                <img src="" alt="Description">
                <h6>Project Title</p>
                <p>Brief Description</p>
              </a>
            </div>

        </div>







      </div>
    </div>
    <div id="navLinks">
      <ul>
          <li class="itemLinks" data-pos="0px"></li>
          <li class="itemLinks" data-pos="-550px"></li>
          <li class="itemLinks" data-pos="-1100px"></li>
          <li class="itemLinks" data-pos="-1650px"></li>
      </ul>
    </div>
    <script>
      // just querying the DOM...like a boss!
var links = document.querySelectorAll(".itemLinks");
var wrapper = document.querySelector("#wrapper");

// the activeLink provides a pointer to the currently displayed item
var activeLink = 0;

// setup the event listeners
for (var i = 0; i < links.length; i++) {
    var link = links[i];
    link.addEventListener('click', setClickedItem, false);

    // identify the item for the activeLink
    link.itemID = i;
}

// set first item as active
links[activeLink].classList.add("active");

function setClickedItem(e) {
    removeActiveLinks();

    var clickedLink = e.target;
    activeLink = clickedLink.itemID;

    changePosition(clickedLink);
}

function removeActiveLinks() {
    for (var i = 0; i < links.length; i++) {
        links[i].classList.remove("active");
    }
}

// Handle changing the slider position as well as ensure
// the correct link is highlighted as being active
function changePosition(link) {
    var position = link.getAttribute("data-pos");

    var translateValue = "translate3d(" + position + ", 0px, 0)";
    wrapper.style.transform = translateValue;

    link.classList.add("active");
}
    </script>
  </body>
</html>´´´

  [2]: https://i.stack.imgur.com/6q0I8.png
  [3]: https://i.stack.imgur.com/jlOm8.png
...