How can I use Bootstrap to show the image that was selected (from img src=" ") in the current window?

I am attempting to display the selected image in the same window. I have 2 forms, with the second form containing the images. I want to show the chosen image in my first div class. Since I am new to bootstrap, I am unsure how to accomplish this. Can anyone provide assistance? Thank you.

<div class="col-sm-12">
        <div class="col-sm-3"></div>
        <div class="col-sm-6">         
              <form  method="POST" action="information.php">
                 <div class="">
                     <p> Your Book TCS </p>
                 </div>
              </form>
            </div>
        <div class="col-sm-3">

      // I NEED TO SHOW THE IMAGE HERE

            </div>
    </div>


<div class="col-sm-12">
   <div class="col-sm-3"> </div>
     <div class="col-sm-6">
       <div class="form2"> 
            <div class="row">
                 <div class="column">
    <img src="img/image.png" class="rounded float-left" alt="Cinque Terre">

                  </div>
             </div>
          </div>
     </div>
    <div class="col-sm-3"></div>

javascriptjqueryhtmlcsstwitter-bootstrap

Answer №1

It was not specified by the OP how the image should appear, whether by clicking a button or automatically upon loading. In this demonstration, there are 9 thumbnails that, when clicked, display a larger version of the selected thumbnail.

Check out the Demo Below:

var mainView = document.getElementById('mainView');
var thumbnailList = document.getElementById('thumbnailList');

thumbnailList.addEventListener('click', showImage, false);

function showImage(e) {
  if (e.target !== e.currentTarget) {
    var targetImg = e.target;
    var imgUrl = targetImg.src;
    mainView.querySelector('img').src = imgUrl;
  }
}
#thumbnailList {
  margin: 0 auto;
}

.thumb {
  display: inline-block;
}

#mainView img {
  display: block;
  margin: 0 auto;
}
<link href='https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css' rel='stylesheet'>


<div class="col-sm-12">

  <form method="POST" action="information.php">
    <div class="">

    </div>
  </form>
</div>
<div class='row'>
  <div id='mainView' class="col-sm-12">
    <img src='' width='45%' height='auto'>

  </div>
</div>



<div class="thumbnails">
  <div class="row">
    <div class="column col-12">
      <ul id='thumbnailList'>
        <li><img src='http://placehold.it/50x50/000/fff?text=1'></li>
        <li><img src='http://placehold.it/50x50/0ff/000?text=2'></li>
        <li><img src='http://placehold.it/50x50/83d800/000?text=3'></li>
        <li><img src='http://placehold.it/50x50/f7a/000?text=4'></li>
        <li><img src='http://placehold.it/50x50/fc0/000?text=5'></li>
        <li><img src='http://placehold.it/50x50/f00/fff?text=6'></li>
        <li><img src='http://placehold.it/50x50/48c/fff?text=7'></li>
        <li><img src='http://placehold.it/50x50/0b2/fff?text=8'></li>
        <li><img src='http://placehold.it/50x50/255/fff?text=9'></li>
      </ul>

    </div>
  </div>
</div>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Utilizing external directory files in electron-packager during the packaging process

I am currently in the process of packaging my electron application, which consists of two npm directories nested within each other. The inner directory contains my electron app and relies on scripts located in the outer directory. In my internal package. ...

javascriptnpmpackageelectronelectron-packager

Hiding a row in AngularJS after changing its status can be achieved by utilizing the

I need help hiding a clicked row after changing its status using angularjs. Below is the code I have written, can someone guide me on how to achieve this? table.table tr(data-ng-repeat="application in job.applications", ng-hide="application.hideApplic ...

javascriptangularjs

Enable browser caching for form data when using AJAX to submit

I'm currently working on a web application that relies heavily on AJAX to submit form data. However, I've encountered an issue where I want the browser to cache the user's input for auto-completion in future form fillings. While I know I cou ...

javascriptajaxforms

How can I use ontouchstart and ontouchend events in jQuery?

Currently, I am using the following code to change the class of elements on touch: ontouchstart="$(this).addClass('select');" ontouchend="$(this).removeClass('select');" I was wondering if there is a more efficient way to achieve this ...

jquerycsshtmltouch

Exploring Best Practices for Coding in node.js

Method 1: Constructor and Prototype Objects function Database(url) { this.url = url; } Database.prototype.info = function (callback) { http.get(this.url + '/info', callback); }; Method 2: Closures Approach function Database(url) { ...

javascriptperformancenode.jssyntaxcoding-style

Deciding whether to use Device WebView Kit or HTML for your project is

I am a bit confused about creating a website for mobile devices. If I have a specific webpage in mind that I want to target towards mobile devices, do I need to use the native webview kits provided by iOS, or can I simply code in HTML, PHP, Javascript, an ...

androidhtmlios

The React-router component fails to refresh when navigating using the <Link> element

Recently, I have encountered a problem while trying to use a <Link> element to navigate between routes and update components. Although the path in my application changes in the redux store upon clicking the link, the component fails to update. It see ...

javascriptreactjsreduxreact-routerconnected-react-router

Best practices for loading and invoking Javascript in WordPress child themes

After spending countless hours searching for a detailed tutorial on how to properly incorporate Javascript into a WordPress website, I came up empty-handed. Running the Genesis Framework with a child theme on my localhost, I am eager to add a fullscreen b ...

javascriptphpjquerywordpress

Interactive drop-down menu for populating a input field

I have been searching everywhere for a solution to this issue but have not been able to figure it out. I was able to make it work when I needed a dynamic drop-down to adjust the values in a second drop-down and fill in a text value in a text box. Now, I w ...

phpjavascriptmysqldrop-down-menuonchange

The impact of CSS on AJAX controls

Struggling to understand why the AJAX control is behaving strangely in relation to this CSS file. Interestingly, removing the CSS file fixes the display issue. CSS File .tdMain { width:452px; font-family:Arial; font:bold,small; } .tdInput { ...

cssasp.netajax

Angular App Failing to Validate Session Cookie 'sessionId' in AuthGuard

Encountering a perplexing issue with my Angular application where the AuthGuard fails to recognize a session cookie named 'sessionId' correctly. I have successfully implemented user authentication, and the expected behavior is for users to be dir ...

javascriptangularcookiessession-cookiesangular-router-guards

The col-md-4 class in Bootstrap does not consistently maintain a width of 33%

Currently, I am utilizing bootstrap cards in my project. The number of cards within a card-deck varies dynamically. However, I have encountered an issue where each card should occupy a width of col-md-4 (33%). Everything works fine when there are more than ...

htmlcssbootstrap-4

What is the reason behind the limitation of resizing only the most recent page element I added?

On my webpage, I have implemented a feature where I can click on an image to enlarge it. Clicking on the image again shrinks it back to its original size. However, I am encountering an issue where only the latest image added to the screen is resizable, e ...

javascripthtmlcssdhtml

Locate MongoDB documentation pertaining to arrays of objects with two specific fields

For instance, consider a Mongo db collection: [ { "user_id": 1, "lead_id": 901, ... ... }, { "user_id": 2, "lead_id": 902, ... ... }, { "user_id": 2, & ...

javascriptnode.jsmongodbmongoose

The range input in HTML does not respond when attempting to adjust it

I am having an issue where the thumb on the slider does not move when I try to. This problem occurred after I inserted an img element inside the slider-cntnr div. View the code at http://codepen.io/danielyaa5/pen/xVEXvB HTML <div id="slider-cntnr"&g ...

javascripthtmlcss

Exploring the concept of clip-path

Recently, I have been delving into the world of HTML and CSS, exploring clip-paths after stumbling upon them on this captivating website. My interpretation is that utilizing clip-paths, particularly with the polygon attribute, enables one to control which ...

htmlcss

The requested 'Pagination' component (imported as 'Pagination') could not be located within the 'swiper' library. Possible exports include Swiper and default

I was trying to implement pagination using swiper. I included the Pagination module with this import statement: import { Pagination } from "swiper"; Here's my configuration: https://i.sstatic.net/1iqoi.png The error that I encounter ...

javascriptreactjspaginationswiper.jsreact-swiper

Creating a hierarchical JSON format for a nested commenting system

I have a JSON data representing a multi-level comment system as shown below: [{ "thread_id": 2710, "parent_id": "", "username": "string", "comment": "string", "postdate": "2017-06-09T07:12:32.000Z", "id": 1 }, { "thread_id": 2710, "parent_ ...

javascriptjson

The process of uploading a React App to Heroku resulted in a critical error: "FATAL ERROR: Heap limit reached, Allocation failed - JavaScript heap out of memory."

There's a puzzling issue that I believe I have the solution to (paying for more bandwidth on Heroku), but the root of the problem eludes me and it's truly frustrating. Any assistance in pinpointing the cause would be greatly appreciated! Hopefull ...

javascriptherokudeployment

my javascript loop simultaneously activates all twelve data attributes in one go

In my attempt to create a music playlist program, I encountered an issue with triggering each song independently. The script I wrote only seems to work when there is one song in the HTML file. When I added 12 songs and organized them using data attributes, ...

javascripthtml