0

From API I’m getting array of images and when requesting the API second time I’m getting another array of different images. When press the button I want to add an images array to the bootstrap gallery and when press again I want to add second array into another gallery. I don’t understand how reuse the same bootstrap html template and create different image galleries in the same html page. API object:

 {
  "title": "rodeo",
  "author": "consectetur",
  "images": [
"http://example/photo.jpg",
"http://example/photostwo.jpg",
"http://example/photosone.jpg"
  ],
  "year": "1998"
} 

<div>
  <div id="container"></div>
  <button id="dataBtn"></button>
</div>

<div id="carouselExampleControls" class="carousel slide" data-ride="carousel">
    <div class="carousel-inner">
      <div class="carousel-item active">
    <img class="d-block w-100" src="...">
      </div>
    </div>
    <a class="carousel-control-prev" href="#carouselExampleControls" role="button" data-slide="prev">
      <span class="carousel-control-prev-icon" aria-hidden="true"></span>
      <span class="sr-only">Previous</span>
    </a>
    <a class="carousel-control-next" href="#carouselExampleControls" role="button" data-slide="next">
      <span class="carousel-control-next-icon" aria-hidden="true"></span>
      <span class="sr-only">Next</span>
    </a>
  </div>

function test(){
const carouselItem = document.querySelector('.carousel-item');

function create(element) {
    return document.createElement(element);
}

function append(parent, el) {
    return parent.appendChild(el);
}


for (image of data.images) {
    let img = create('img');
    img.classList.add(‘d - block’, ‘w - 100’);
    img.src = image;
    append(carouselItem, img);

} 
}
test();
document.getElementById("dataBtn").addEventListener("click", test);

4
  • 1
    Can you post a working snippet or a Fiddle, showing the button and share a Dataset sample like the one you are receiving from the API?
    – Bilel
    Commented Feb 1, 2020 at 23:24
  • I just updated my code. Commented Feb 2, 2020 at 9:34
  • Sorry ! I've been busy in the weekend. I hope my answer helps you understand elements cloning in Javascript. Good luck :)
    – Bilel
    Commented Feb 2, 2020 at 23:51
  • You can test preview it here by the way ! Just click on Run code snippet ;)
    – Bilel
    Commented Feb 2, 2020 at 23:52

2 Answers 2

0

With bootstrap, those tasks would be much more easier using jQuery Framework! As you are mentioning only Javascript in your Question' tags, This is a method showing how we could do it is in pure Javascript that you could easily include in your project.

We clone the Carousel container, then we fill the dynamically added clones with new pictures.

//An initial status we could check later
var initial = true;
//A global counter that could be used to distinguish between non-DOM duplicates
let i = 0;

function test() {

	//Here A random array of pics would be used
	//Just to simulate an API call
	var rand = Math.floor(Math.random() * Math.floor(2));
	var pix = JSON.parse('{"data":[{"title":"rodeo","author":"consectetur","images":["https://images.unsplash.com/photo-1533522688752-ef641aa0607b?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=125&q=60","https://images.unsplash.com/photo-1550543941-281cef85c281?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=125&q=60","https://images.unsplash.com/photo-1565291707930-351bfd98e772?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=125&q=60"],"year":"1998"},{"title":"Flasher","author":"Photo Addict","images":["https://images.unsplash.com/photo-1516724562728-afc824a36e84?ixlib=rb-1.2.1&auto=format&fit=crop&w=125&q=60","https://images.unsplash.com/photo-1505739998589-00fc191ce01d?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=125&q=60","https://images.unsplash.com/photo-1516962126636-27ad087061cc?ixlib=rb-1.2.1&auto=format&fit=crop&w=125&q=80","https://images.unsplash.com/photo-1518890414976-bb41382be43e?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=125&q=80"],"year":"2020"},{"title":"Domotics","author":"iOting","images":["https://images.unsplash.com/photo-1528255671579-01b9e182ed1d?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=125&q=60","https://images.unsplash.com/photo-1505739998589-00fc191ce01d?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=125&q=60","https://images.unsplash.com/photo-1494351416886-f6b4ed2a1d68?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=125&q=60","https://images.unsplash.com/photo-1547938094-b000547cbeb9?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=125&q=60"],"year":"2020"}]}');
	const carouselItem = document.querySelector('.carousel-item');

	function create(element) {
		return document.createElement(element);
	}
	function append(parent, el) {
		return parent.appendChild(el);
	}

	var model = document.getElementById('carouselExampleControls');

	function duplicate() {
		i++;
		//We clone the default laoded Gallery container
		var clone = model.cloneNode(true);
		clone.id = "cloneGallery" + i;
		model.parentNode.appendChild(clone);
		//We identify the dynamically newly added picture container
		var clItem = document.getElementsByClassName('carousel-item')[i];
		//We empty it... so we could replace by new pics
		clItem.innerHTML = '';
		for (image of pix.data[rand].images) {
			var img = create('img');
			img.classList.add('d-block', 'w-100');
			img.src = image;
			append(clItem, img);
		}
	}
	if (initial) {
		for (image of pix.data[rand].images) {
			var img = create('img');
			img.classList.add('d-block', 'w-100');
			img.src = image;
			append(carouselItem, img);
		}
	} else {
		duplicate();
	}
	initial = false;
}
document.getElementById("dataBtn").addEventListener("click", test);
<div>
  <div id="container"></div>
  <button id="dataBtn">Add Pictures!</button>
</div>
<div id="carouselExampleControls" class="carousel slide" data-ride="carousel">
    <div class="carousel-inner">
      <div class="carousel-item">
    
      </div>
    </div>
    <a class="carousel-control-prev" href="#carouselExampleControls" role="button" data-slide="prev">
      <span class="carousel-control-prev-icon" aria-hidden="true"></span>
      <span class="sr-only">Previous</span>
    </a>
    <a class="carousel-control-next" href="#carouselExampleControls" role="button" data-slide="next">
      <span class="carousel-control-next-icon" aria-hidden="true"></span>
      <span class="sr-only">Next</span>
    </a>
  </div>

2
  • Thank you very much for your help!! :) And sorry, I've been busy too. Commented Feb 4, 2020 at 15:01
  • You are welcome! You can choose which answer fits your needs and set it as Accepted answer.
    – Bilel
    Commented Feb 4, 2020 at 15:59
0

Try it..

Result Size: 497 x 476

<html>
<title>Multiple slideshow</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
<body>
​
<h2 class="w3-center">Manual Slideshow</h2>
​
<div class="w3-content w3-display-container">
  <img class="mySlides1" src="img_snowtops.jpg" style="width:100%">
  <img class="mySlides1" src="img_lights.jpg" style="width:100%">
  <img class="mySlides1" src="img_mountains.jpg" style="width:100%">
  <img class="mySlides1" src="img_forest.jpg" style="width:100%">
  <button class="w3-button w3-black w3-display-left" onclick="plusDivs(-1, 0)">&#10094;</button>
  <button class="w3-button w3-black w3-display-right" onclick="plusDivs(1, 0)">&#10095;</button>
</div>
​
<div class="w3-content w3-display-container">
  <img class="mySlides2" src="img_la.jpg" style="width:100%">
  <img class="mySlides2" src="img_ny.jpg" style="width:100%">
  <img class="mySlides2" src="img_chicago.jpg" style="width:100%">
  <button class="w3-button w3-black w3-display-left" onclick="plusDivs(-1, 1)">&#10094;</button>
  <button class="w3-button w3-black w3-display-right" onclick="plusDivs(1, 1)">&#10095;</button>
</div>
​
<script>
var slideIndex = [1,1];
var slideId = ["mySlides1", "mySlides2"]
showDivs(1, 0);
showDivs(1, 1);
​
function plusDivs(n, no) {
  showDivs(slideIndex[no] += n, no);
}
​
function showDivs(n, no) {
  var i;
  var x = document.getElementsByClassName(slideId[no]);
  if (n > x.length) {slideIndex[no] = 1}
  if (n < 1) {slideIndex[no] = x.length}
  for (i = 0; i < x.length; i++) {
    x[i].style.display = "none";  
  }
  x[slideIndex[no]-1].style.display = "block";  
}
</script>
​
</body>
</html>
​
1
  • From what I see, your code toggles display between two galleries... From his question, I understand he expects to generate a new gallery from an API whenever he clicks that button. Unless you are expecting to inject the fetched images array into your slidesIndex array, still that way you need to append the new target container
    – Bilel
    Commented Feb 3, 2020 at 16:22

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.