Я хочу разбить свою галерею изображений на модальные всплывающие окна - PullRequest
Новая
       42

Я хочу разбить свою галерею изображений на модальные всплывающие окна

0 голосов
/ 13 апреля 2020

Я сделал нумерацию страниц, но до сих пор написал код js. Я хочу кое-что хорошее, что может решить мою проблему с нумерацией страниц. Здесь, в этом модальном всплывающем окне, я хочу разбиение на страницы, так как я могу изменить изображения.

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

<a class="trigger_popup_fricc">Choose from library</a>
<div class="hover_bkgr_fricc">
<span class="helper"></span>
<div>
   <div class="popupCloseButton">&times;</div>
   <!--image selector code-->
   <div class="picture-container">
      <div class="row">
         <div class="column1">
            <img src="https://homepages.cae.wisc.edu/~ece533/images/cat.png" alt="Snow" style="width:100%">
         </div>
         <div class="column1">
            <img src="https://homepages.cae.wisc.edu/~ece533/images/cat.png" alt="Forest" style="width:100%">
         </div>
         <div class="column1">
            <img src="https://homepages.cae.wisc.edu/~ece533/images/cat.png" alt="Mountains" style="width:100%">
         </div>
      </div>
      <div class="row">
         <div class="column1">
            <img src="https://homepages.cae.wisc.edu/~ece533/images/cat.png" alt="Snow" style="width:100%">
         </div>
         <div class="column1">
            <img src="https://homepages.cae.wisc.edu/~ece533/images/cat.png" alt="Forest" style="width:100%">
         </div>
         <div class="column1">
            <img src="https://homepages.cae.wisc.edu/~ece533/images/cat.png" alt="Mountains" style="width:100%">
         </div>
      </div>
   </div>
   <!---------pagination-------------->
   <ul class="pagination pull-left" style="align-self: left;">
      <li class="page-item "><a class="page-link" href="#">Prev</a></li>
      <li class="page-item"><a class="page-link" href="#">1</a></li>
      <li class="page-item"><a class="page-link" href="#">2</a></li>
      <li class="page-item"><a class="page-link" href="#">3</a></li>
      <li class="page-item"><a class="page-link" href="#">4</a></li>
      <li class="page-item"><a class="page-link" href="#">5</a></li>
      <li class="page-item"><a class="page-link" href="#">Next</a></li>
   </ul>
   <!-----------end-------------------->
   <!-------------button---------------->
   <button class="waves-effect waves-light btn" style="float: right; font-size: 11px; margin-top: 16px; width: 122px;">Add image</button>
   <!--------end------------->
</div>
...