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

Utilize a viewpoint alteration alongside a floating effect on a specific element

I thought this would be an easy task, but I seem to be missing something as it doesn't work for me. The goal is to use the perspective() and rotateY() functions in a transform to create a perspective effect on an element. Additionally, there should b ...

javascripthtmlcssreactjsmaterial-ui

CSS will only be visible if it is enclosed within the <style> tag

While creating a view, I noticed that my CSS is not being displayed unless it's placed inside a <style> tag. I've tried using !important without success, as well as utilizing the selector .container-fluid > .row > .d-flex > .out_pr ...

cssbootstrap-4

Encountering a problem while verifying pattern using regular expressions

I'm facing an issue when manually checking if my inputs match the specified patterns. Below is the function I am using for this check: if (!$element.attr("pattern")) return true; let pattern = $element.attr("pattern"); le ...

javascripthtmlregex

Error: The terminal reports that the property 'then' cannot be found on the data type 'false' while trying to compile an Angular application

In my Angular application, which I initiate through the terminal with the command ng serve, I am encountering build errors that are showing in red on the terminal screen. ✔ Compiled successfully. ⠋ Generating browser application bundles... Error: s ...

javascriptangulartypescript

How to show table cell value in Angular 4 using condition-based logic

I am a beginner in Angular development. Here is the HTML code I am working with: <tr *ngFor="let item of calendarTableSelected; let idx = index"> <span *ngIf="idx === 0"> <td style="width:15%;" *ngFor="let name of item.results" ...

javascripthtmlangulartypescript

Error: This Service Worker is restricted to secure origins only due to a DOMException

Having trouble implementing this on my website; it keeps showing the following error. Help, please! Service Worker Error DOMException: Only secure origins are allowed. if ('serviceWorker' in navigator && 'PushManager' in wind ...

javascriptpush-notificationservice-worker

Navigating a mobile-friendly menu anytime!

I'm in the process of creating a responsive "hamburger" menu for mobile devices. The HTML code I have implemented is as follows... .menu_closed { color: red; } .menu_open { color: blue; } <script src="https://ajax.googleapis.com/ajax/libs/jq ...

javascriptjqueryhtmlcsshamburger-menu

How can we prevent an ajax call from being made when the user input is empty?

Currently, I am utilizing the keyup event for an Ajax call on an input field along with the f:validaterequired tag. Each time the Ajax event (keyup) triggers, f:validaterequired is being validated. However, I do not want to validate when the value is null. ...

htmlajaxjsfjsf-2.2requiredfieldvalidator

Generating examples of two models that are interdependent

In my Javascript form, I have implemented an AJAX POST request that successfully creates a new instance of a model called Component. Now, my goal is to allow users to input keywords for the Component model through the same form. To achieve this, I have al ...

javascriptjqueryruby-on-railsajax

What is the best way to iterate through a designated key in every object within a JSON dataset and store it in a variable called `data` for use with

I am looking to create a line chart displaying stock prices, utilizing JSON data to populate the chart. Let's say I have some JSON data: [ { "close": 116.59, "high": 117.49, "low": 116.22, "open& ...

javascriptjsonchart.js

Adjust the Font Size of Bootstrap 3 across different breakpoints

I am currently using Bootstrap 3 and I have a requirement to adjust the font-size at different breakpoints across my website. My goal is to easily modify the font size in one place and have it automatically apply to all Bootstrap components. The desired b ...

htmlcsstwitter-bootstraptwitter-bootstrap-3

What is the best way to display a div box only when a user checks a checkbox for the first time out of a group of checkboxes, which could be 7 or more, and then hide the

Is there a way to make a div box appear when the user checks any of the first checkboxes? I have attempted using the following codes: JQ Codes: $('#checkbox').change(function() { if ($(this:first).is(':checked')) { cons ...

javascriptjquerycheckbox

What is the best way to retrieve information from an API and save it in an array within a MongoDB schema?

My current challenge involves querying an API in node.js, storing the obtained data in an array, and then pushing that array to a MongoDB schema. However, I am encountering difficulties as I am receiving an 'unhandledpromiserejection' warning err ...

javascriptnode.jsmongodbapireferenceerror

Endlessly triggering document.execCommand, the JavaScript selectionchange-EventListener seems to have a mind of

I recently implemented an event listener for selectionchange in the following manner: document.addEventListener("selectionchange", function() { highlight(); console.log("selectionchange-triggered"); }, false); After that, I included the code bel ...

javascripthtmladdeventlistenerselectionchangeddesignmode

Using JavaScript, divide a string containing elements of unknown length that may be adjacent based on their type

If I have a string representing an SVG path like: "M72 0v754h405v-86h-311v-211h302v-86h-302v-285h311v-86h-405z" My goal is to transform it into an array where each element consists of either a letter or a positive/negative number. For example: [ ...

javascriptjqueryarraysstringloops

Activate the download upon clicking in Angular 2

One situation is the following where an icon has a click event <md-list-item *ngFor="let history of exportHistory"> <md-icon (click)="onDownloadClick(history)" md-list-avatar>file_download</md-icon> <a md-line> ...

javascriptangulartypescript

What are the mechanics behind the functionality of ES6 class instance variables?

I'm encountering an issue with the following code that is not behaving as expected: import React, { Component } from 'react'; let result = null; class MyData extends Component { _getData = () => { fetch(url) .then(response = ...

javascriptreactjsecmascript-6es6-class

Utilizing jQuery/Ajax for dynamically loading a targeted PHP page by its specific id

As a new learner in jQuery/Ajax, I have a query regarding the most efficient method for loading a php page using jQuery/AJAX with an attached ID. It seems like the approach: <?php $id = $_SESSION[id]; ?> <script> var pageUrl = new Array(); p ...

phpjqueryajax

Having difficulty creating a snapshot test for a component that utilizes a moment method during the rendering process

I am currently testing a component that involves intricate logic and functionality. Here is the snippet of the code I'm working on: import React, { Component } from 'react'; import { connect } from 'react-redux' import moment from ...

javascriptreactjsunit-testingjestjsenzyme

Accessing a JSON array in PHP to retrieve a specific value

I am working with a JSON array that I received from an API. Specifically, I am trying to extract the "value" and "value_high" fields from the JSON related to the Mann Co Supply Crate Key. While I was able to create a script that retrieves the values store ...

phphtmljson