Take images from a javascript folder and display on a Slide

Asked

Viewed 2,335 times

1

Hello! I have a slide that works normally. Only I have to keep passing him the link of each image.

What I wanted to do is put a path from a folder so it can identify the png or jpg files and automatically display them with javascript.

The Code is like this:

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.0.7/css/swiper.min.css">

  <style>
    html, body {
      position: relative;
      height: 100%;
    }
    body {
      background: #000;
      font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
      font-size: 14px;
      color:#000;
      margin: 0;
      padding: 0;
    }
    .swiper-container {
      width: 100%;
      height: 100%;
    }
    .swiper-slide {
      overflow: hidden;
    }
  </style>
</head>
<body>
  
  <div class="swiper-container">
    <div class="swiper-wrapper">
      <div class="swiper-slide">
        <div class="swiper-zoom-container">
          <img src="http://lorempixel.com/800/800/sports/1/">
        </div>
      </div>
      <div class="swiper-slide">
        <div class="swiper-zoom-container">
          <img src="http://lorempixel.com/800/400/sports/2/">
        </div>
      </div>
      <div class="swiper-slide">
        <div class="swiper-zoom-container">
          <img src="http://lorempixel.com/400/800/sports/3/">
        </div>
      </div>
    </div>
   
    <div class="swiper-pagination swiper-pagination-white"></div>
    
    <div class="swiper-button-prev"></div>
    <div class="swiper-button-next"></div>
  </div>

  
  <script src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.0.7/js/swiper.min.js"></script>

  
  <script>
    var swiper = new Swiper('.swiper-container', {
      zoom: true,
      pagination: {
        el: '.swiper-pagination',
      },
      navigation: {
        nextEl: '.swiper-button-next',
        prevEl: '.swiper-button-prev',
      },
    });
  </script>

javascript html

  • The folder is on the server? I believe you should use some language on the server, php .... . If you use javascript and it runs in the browser, you do not have access to the file system.

  • It’s in a local folder. I can’t use PHP, because I’m developing for an app.

  • Will run in a browser?

  • Yes. Then I need it to be in Javascript. To identify the pages in a folder and play them right on the slide.

  • One solution would be to use a input file Multiple, then you would have access to all the files, but you would have to select them

  • But I will not upload directly. I would manually place images in the folder. I would only play the images inside and the slide would recognize.

  • Only with Javascript in the client-side you don’t have access to the file system.

  • This link can help https://stackoverflow.com/questions/31274329/get-list-of-filenames-in-folder-with-javascript

  • If pulling from a specific page. Type a link?

Show 4 more comments

1 answer

1


You can make a loop to insert the images in sequence. All you have to do is set in var num_imagens the number of pictures you want to insert.

For example, want to insert 3 images, define var num_imagens = 3;.

Behold:

var num_imagens = 3;
function carregaImgs(){

   var img_div = document.querySelectorAll(".swiper-wrapper")[0];
   
   for(var x=1;x<=num_imagens;x++){
      var img_container = '<div class="swiper-slide"><div class="swiper-zoom-container">'
      +'<img src="http://lorempixel.com/400/800/sports/'+x+'/">'
      +'</div></div>';
      
      img_div.innerHTML += img_container;
   }
}


window.onload = function(){
   carregaImgs();

   var swiper = new Swiper('.swiper-container', {
      zoom: true,
      pagination: {
        el: '.swiper-pagination',
      },
      navigation: {
        nextEl: '.swiper-button-next',
        prevEl: '.swiper-button-prev',
      },
   });

}
html, body {
   position: relative;
   height: 100%;
 }
 body {
   background: #000;
   font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
   font-size: 14px;
   color:#000;
   margin: 0;
   padding: 0;
 }
 .swiper-container {
   width: 100%;
   height: 100%;
 }
 .swiper-slide {
   overflow: hidden;
 }
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.0.7/css/swiper.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.0.7/js/swiper.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.0.7/css/swiper.min.css">
<div class="swiper-container">
   <div class="swiper-wrapper">
   </div>
   <div class="swiper-pagination swiper-pagination-white"></div>
   <div class="swiper-button-prev"></div>
   <div class="swiper-button-next"></div>
</div>

  • @Oliverdamon The code will only pick up images, not websites or images within websites, and in the above pattern. I will delete the answer as it was not useful. Abs!

  • @Oliverdamon The code will only work if the images are at the same address and in sequence: 1, 2, 3, 4...

  • It was helpful yes. It helped a lot. But could you help me to get tb images inside a link? Because I’m setting up a website and for that I need to pull the content of my external site.

  • Any way to pull all results from the folder in question? This code you sent went so close.

  • @Oliverdamon I’ll see here...

  • Vlw. Thank you! I’m trying this has time.

  • @Oliverdamon is all on the server right? there’s nothing local no neh?

  • Yes. Td will pull from an external server. But it needs to be in javascript.

  • @Oliverdamon The problem is the following: there is no way to know which image you want just by placing a link from a website, as it can have multiple images in the link.

  • I did it. But it didn’t work... I didn’t understand why.

  • @Oliverdamon instead of <img src="http://lorempixel.com/400/800/sports/'+x+'/"> would be <img src="http://unionmangas.net/leitor/mangas/One%20Piece/887/00'+x+'.png">

  • Is there any way to identify and automatically pull all the formats? N needs to be in order.

  • @Oliverdamon If you found the answer helpful, make sure to check ✔.

Show 8 more comments

Browser other questions tagged javascript html

You are not signed in. Login or sign up in order to post.