Using data-image as the source for Bootstrap Modal

I am currently working on an image gallery that utilizes the Paver jQuery plugin. The gallery is functional, but I am facing an issue where it displays the same image in the modal instead of showing the respective data-image for each image.

My goal is to dynamically update the source attribute in the modal window based on the data-image specified in the anchor tag.

You can view a sample of the issue here

<a class="panos" href="#" data-image-id="" data-toggle="modal" data-title="This is my title" data-caption="Some lovely red flowers" data-image="http://placehold.it/1600x450" data-target="#pano-modal">
  <img class="img-responsive" src="http://placehold.it/1600x450" alt="Short alt text" width="200">
</a>

<a class="panos" href="#" data-image-id="" data-toggle="modal" data-title="This is my title" data-caption="Some lovely red flowers" data-image="http://placehold.it/1400x450" data-target="#pano-modal">
  <img class="img-responsive" src="http://placehold.it/1400x450" alt="Short alt text" width="200">
</a>

<div class="modal fade" id="pano-modal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-body">
        <div class="panorama" data-paver data-start-position="0"><img id="image-gallery-image" src=""></div>
      </div>

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

/* Styles and Media Queries */

@media (min-width: 768px) {
    .modal-dialog {
        max-width: 700px;
        margin: 30px auto;
    }
}

.modal-body {
    position: relative;
    padding: 0px;
}
/* Other CSS rules... */

If you encounter the issue mentioned above, both images in the gallery display the same image rather than showing the individual 1600 and 1400-sized images. Your assistance in resolving this would be highly appreciated.

javascriptjqueryhtmlcsstwitter-bootstrap

Answer №1

One issue that arises is when the paver is initialized, it ends up destroying the img element within the 

<div class="panorama" data-paver></div>
. Therefore, when attempting to modify the src attribute later on, the element no longer exists.

To address this problem, it is necessary to first call the paver's destroy function (to restore the original DOM element), update the src, and then reinitialize the paver.

UPDATE

I faced difficulties with the destroy method, so I opted to substitute the paver element with the statically defined original element instead.

$(document).ready(function(){ 

  $('a.panos').click(function(){
      $modal = $('#pano-modal');
      $pano_image = $('<div class="panorama" data-paver data-start-position="0"></div>');
      $pano_image.append('<img id="pano-image" src="'+$(this).data('image')+'">');
      $modal.find(".modal-body").html($pano_image);
      $modal.modal("show");      
  });

  $('#pano-modal').on('shown.bs.modal', function () {
    $('.panorama').paver(); 
  })

});

Check out the revised CodePen here

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

Learning how to interpret input from the command line in Vertx

Would appreciate some guidance on how to read command line arguments in vert.x using JavaScript. For instance, I am wondering how to go about reading: arguments(arg1, arg2, arg3) vertx run example.js arg1 arg2 arg3 ...

javascriptcommand-line-argumentsvert.x

What are the steps to modify data within the root component?

I am currently working on a Vue project with vue-cli and routes. In my App.vue file, the template structure is as follows: <template> <div id="app"> {{Main}} <router-view></router-view> </div> </template&g ...

javascripthtmlvuejs2vue.js

The filter() and some() functions are not producing the anticipated output

Currently, I am in the process of developing a filtering mechanism to sift through a dataset obtained from an API. The array that requires filtering contains objects with various parameters, but my aim is to filter based only on specific parameters. For ...

javascriptangularfilter

The Firebase JQuery .on method is incrementally updating individual values in an array instead of updating them all simultaneously

I am trying to update the values of the orders placed by users on the Corporate's page without a refresh. I have implemented the jQuery .on method for this purpose. However, the values are being returned one by one from the array created for the order ...

javascripthtmlfirebasefirebase-realtime-database

Angular bootstrap datepickers will pop up when the user hits the Enter key on a different input field

I am working on a search form that includes 2 datepickers, one for 'from' date and the other for 'to' date. Additionally, there are input fields for various search criteria and a submit button. The issue I am facing is that when a user ...

angularjstwitter-bootstrapdatepicker

Determine the specific button that was clicked within a React component

I have a challenge with dynamically generated material UI buttons. I am trying to identify which button was clicked by obtaining the value of the name attribute that I assigned to each button. Is there a way to accomplish this? In essence, I need to retrie ...

javascriptreactjsmaterial-ui

Differences Between 'this' and 'self' in Classes

I am currently working with ES6 Classes and I'm struggling to grasp why I am able to access the this variable within one of the methods. //CODE class Form{ constructor(){ var self = this; } assemble(){ log(self); ...

javascriptes6-class

Sending parameters to async.parallel in Node.js

My goal is to create a simple example that demonstrates the concept I have described. Below is my attempt at a minimal example, where I expect to see the following output: negative of 1 is -1 plus one of 2 is 3 Here is the code I've written: var asy ...

javascriptnode.jsasynchronous

The constant increase in page header number leading to minor interruptions during page scrolling

On my website, I have a dynamic page header that shows the number of comments a user has scrolled through. You can see this feature in action here: However, there seems to be a slight jitter on the screen every time the comment counter updates... To disp ...

htmlangularionic-framework

Iterate through nested objects in Javascript

I am having trouble extracting only the word from each new instance of the newEntry object. It shows up in the console every time I add a new word, but not when I assign it to .innerHTML. Can someone assist me with this issue? Full code: <style ty ...

javascriptobjectloops

Can you guide me on how to interact with a table value using Selenium WebDriver?

I am having difficulty selecting a cell within a table. The cell does not seem to be recognized as a clickable object when I attempt to locate the element. I have tried different approaches to referencing the element, but all lead to the same outcome. I am ...

pythonhtmlseleniumhtml-tableselenium-chromedriver

Display various divs simultaneously based on the quantity of items in the dropdown menu

In my project, there is a dynamic select list that retrieves items from the database. Users have the ability to add or delete items from this list. Below is some code related to this functionality: <div class="form-group col-md-3"> <la ...

javascripthtmljquerysynchronous

What is the proper way for a browser to handle a srcset attribute containing the same path twice?

When the same path or similar sized images with different pixel density descriptors are used, how does the specification address it? An interesting case study is observed when viewing an image in desktop browsers like Windows Firefox 82.0b2 and Chrome 85. ...

htmlresponsive-designspecifications

Is there a way to customize the appearance of an unordered list by setting it to display as an image instead of default bullets? I want to

I have been attempting to achieve this desired outcome. However, my efforts to reproduce it resulted in the check marks being rendered at a smaller size than intended due to using an SVG file. An example of this issue can be seen in the following image: I ...

javascripthtmlcsscss-selectorshtml5-canvas

Transferring data asynchronously with AJAX to a PHP script

How can I send $username using PHP with data: new FormData(this),$username to the add.php file using AJAX code? <script type="text/javascript"> $(document).ready(function (e) { $("#uploadFormuserimg").on('submit',(function(e) { ...

phpjqueryajax

What is the most effective method to convert PHP data into JSON and present it in the jQuery success scenario?

In the realm of jQuery, I have this particular piece of code: <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.0/jquery.min.js"></script> <script type="text/javascript" > $(function() { $("input[type ...

phpjavascriptjqueryjson

Is there a way to navigate to the "Error" view page following an AJAX request?

Currently, I am utilizing an Ajax function to call an HTTP Post Action method located in the controller. During this process, the action method is producing a basic exception message. To address this issue, I have applied my own personalized handler attr ...

c#jqueryajaxasp.net-mvc

Encountered an issue when attempting to utilize `npm start` within a React JS project following

https://i.stack.imgur.com/yII3C.png Whenever I attempt to run npm start in the vsCode terminal, an error pops up as shown in the image above. In the picture provided, you can see that my package.json only contains a start script. Can anyone offer assistan ...

javascriptnode.jsreactjsnpmnpm-start

Issue with modal dialog not triggering onshow event after postback

In my application, I have a Bootstrap modal dialog that is used to display data when the user clicks on "Edit" in a jQuery data table. The modal contains Cancel and Submit buttons. Everything works correctly when I open the modal, click Cancel, select ano ...

javascriptjqueryasp.netbootstrap-modalpostback

Performing subtraction operation on a selected floating-point value from a database using PHP

I am facing an issue with my code where I need to subtract a float value selected from the database and update the subtracted values in the database table. Below is my code snippet: $AmountGiven = $_POST['AmountGiven']; $conn = mysqli_connect("l ...

javascriptphpjquery