Using JQuery and Bootstrap: Adding an image from a selection of images to a carousel

Question

Using JQuery and Bootstrap: Adding an image from a selection of images to a carousel

As a beginner in the world of JQuery, I am currently working on creating a customizable carousel where users can select pictures to add to the carousel with just one click.

On the left side of the page, there is a selection of images to choose from, while the carousel itself is displayed on the right side. Below is an example of the code used for the list of images:

<div class="pics">
  <div class="col-sm-4 iu">
    <img src="img/iu.png" alt="IU" class="img-thumbnail" style="width:150px; height:150px;">
  </div>

  <div class="col-sm-4 hyuna">
    <img src="img/hyuna.png" alt="hyuna" class="img-thumbnail" style="width:150px; height:150px;">
  </div>

Here is the code for the carousel slides:

<div class="carousel-inner" role="listbox">
  <div class="item active">
    <img src="img/minah.png" alt="minah" />
  <div class="carousel-caption">
    <h1>This is Minah.</h1>
  </div>
</div>
<div class="item">
  <img src="img/juwoo.png" alt="juwoo" />
  <div class="carousel-caption">
     <h1>This is Juwoo.</h1>
  </div>

Upon loading the page, a default carousel is already present and it's designed to clear out completely when an image from the list is clicked.

javascript jquery html css twitter-bootstrap

Answer 1

Answer №1

This is just a rough idea of how it might work:

// When the document loads, set a variable to indicate that no image has been clicked.
var image_clicked = false;
$(document).on("click",".img-thumbnail",function(e){
  // Once you click an image on the side.
  var $this = $(e.target)
  // Check the variable
  if(!image_clicked){
    // If not clicked, clear the carousel
    $(".carousel-inner").html("");
    // Mark it as clicked, so that the second time you click an image, it won't enter this block again.
    image_clicked = true;
  }
    // It will append the new image to the carousel.
    // On the second click, you will only be appending elements to the carousel.
    // Add item div to the carousel.
    $(".carousel-inner").append("<div class='item'><div class='carousel-caption'><h1></h1></div></div>");
    // Get the added items
    var item = $(".carousel-inner").find(".item");
    // Get the current item and prepend an image to it.
    $(item[item.length-1]).prepend($this);
    // Remove the previously active class that was assigned
    $(".carousel-inner item").each(function(i,it){
      if($(it).hasClass("active")){
        $(it).removeClass("active");
      }
    });
    // Add an active class to the currently added item
    $(item[item.length-1]).addClass("active");
    // If your images on the side have a value attribute
    // then use it as a caption
    $(item[item.length-1]).find(".carousel-caption h1").html($this.attr("value"));
});

I haven't tested this code, but it should give you an idea of what you are attempting to achieve.

Answer 2

This is just a rough idea of how it might work:

// When the document loads, set a variable to indicate that no image has been clicked.
var image_clicked = false;
$(document).on("click",".img-thumbnail",function(e){
  // Once you click an image on the side.
  var $this = $(e.target)
  // Check the variable
  if(!image_clicked){
    // If not clicked, clear the carousel
    $(".carousel-inner").html("");
    // Mark it as clicked, so that the second time you click an image, it won't enter this block again.
    image_clicked = true;
  }
    // It will append the new image to the carousel.
    // On the second click, you will only be appending elements to the carousel.
    // Add item div to the carousel.
    $(".carousel-inner").append("<div class='item'><div class='carousel-caption'><h1></h1></div></div>");
    // Get the added items
    var item = $(".carousel-inner").find(".item");
    // Get the current item and prepend an image to it.
    $(item[item.length-1]).prepend($this);
    // Remove the previously active class that was assigned
    $(".carousel-inner item").each(function(i,it){
      if($(it).hasClass("active")){
        $(it).removeClass("active");
      }
    });
    // Add an active class to the currently added item
    $(item[item.length-1]).addClass("active");
    // If your images on the side have a value attribute
    // then use it as a caption
    $(item[item.length-1]).find(".carousel-caption h1").html($this.attr("value"));
});

I haven't tested this code, but it should give you an idea of what you are attempting to achieve.

Using JQuery and Bootstrap: Adding an image from a selection of images to a carousel

Answer №1

Similar questions

MERN Stack deployment to Heroku: Remote rejected - unable to push changes to master branch (pre-receive hook declined)

Hovering over text can change the width of the background color

Utilize a pre-defined layout in a Vue component that is sent as a property

How about incorporating AJAX into your HTML code?

Determining the Similarity of jQuery Selectors' Selected Elements

The text exceeds the width of the paragraph

Having trouble loading CSS and JavaScript files in CodeIgniter?

Spotfire: Changing a URL in an input field after it has been entered by the user

Managing two variables in C# Controller and View

Is it possible to implement a jQuery function instead of utilizing an iframe? Iframe tends to have a longer loading time, so using a

Show the HTML that is received as JSON when making an AJAX request

Execute a task on the elements contained in an array within a collection of arrays

Creating an Edit and Delete feature for a looped textbox in JavaScript

Utilizing ng-switch for handling null values or empty strings

The issue with Jquery getJSON not functioning properly across different websites

Differences between importing {fn1} from 'lib' and importing fn1 from 'lib'

Debug errors occur when binding to computed getters in Angular 2

in comparison to the base directory in ASP.NET

Using Async/Await for Timers within a Loop in Javascript

What is the best way to incorporate code into an Alexa Skill?