Question

我正在使用此插件Juxtapose预览图片前后。

HTML

   <div class="modal fade" id="showBigImageModal">
    <div class="modal-dialog">
      <div class="modal-content align-center">
        <div class="modal-header align-left">
          <button type="button" class="close" data-dismiss="modal" aria-label="Close" style="top: 15px; font-size: 2.5rem;">
            <span aria-hidden="true">&times;</span>
          </button>
          <h4><!-- image file name will appear here --></h4>
        </div>
        <div class="modal-body">
          <div id="compressed-image"></div>
        </div>
      </div>
    </div>
  </div>

脚本

    <script type="text/javascript">
      $(function(){
        var $showBigImageModal = $('div#showBigImageModal').modal({
          show: false,
          backdrop: 'static',
          keyboard: false
        });
        $(document).on('click', 'a.hideBigImageModal', function(){
          $showBigImageModal.modal('hide');
        });

        function beforeAndAfterImage(imgBefore, imgAfter){
          // Juxtapose
          slider = new juxtapose.JXSlider('#compressed-image',
          [
            { src: imgBefore, label: 'BEFORE' },
            { src: imgAfter, label: 'AFTER' }
          ],{
            animate: true,
            showLabels: true,
            showCredits: false,
            startingPosition: "50%",
            makeResponsive: true
          });
        }

        $(document).on('click', 'a.dashboard-image-preview-link', function(e){
          e.preventDefault();
          $('div#showBigImageModal').find('#compressed-image').html('');
          var imgBefore = $(this).attr('data-before-img');
          var imgAfter  = $(this).attr('data-after-img');
          if(imgBefore.length > 0 && imgAfter.length > 0){
            beforeAndAfterImage(imgBefore, imgAfter);
            $('div#showBigImageModal').find('h4').text($(this).attr('data-name'));
            $showBigImageModal.modal('show');
          }else{
            flashNotice('No available large image to preview');
          }
        });

      });
    </script>

将CSS和JS并置

<link rel="stylesheet" href="https://cdn.knightlab.com/libs/juxtapose/latest/css/juxtapose.css">

<script src="https://cdn.knightlab.com/libs/juxtapose/latest/js/juxtapose.min.js"></script>

**这是页面中的实际结果呈现。（预期结果） **

这是将其置于模式的问题。（图像预览变得太小）

设置height和width可以，但是仍然存在一些问题。

我尝试操纵css，但是很难获得预期的结果（该预览将适合模式的高度和宽度）

如何解决此问题？

Answer 1

我找不到有关此问题的任何文档，但是，如果您的容器没有声明宽度和高度的样式属性，则插件将添加style="height: 100px; width: 100px;"

我发现覆盖它的唯一方法是使用px或em的样式属性设置宽度和高度，但是可以转换为px的值，%值不起作用，默认恢复为100px

尝试这样的事情：

<div id="compressed-image" style="width:450px; height:450px;"></div>

https://jsfiddle.net/chan_omega/mobvLdny/

Answer 2

Ciao

我制定了代码来根据您的规范进行定制。我尝试了我的解决方案，显然它解决了您面临的所有问题

我对代码进行了注释，以使其更易于阅读。我重做了很多零件。这是您和w3schools中的这本书之间的一种改编。啊!最后但并非最不重要的一点是，我使代码段具有响应性，由于并发makeReponsive无法正常工作

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://cdn.knightlab.com/libs/juxtapose/latest/css/juxtapose.css">

<style>
body
{
    width:100%;
    font-family: Arial, Helvetica, sans-serif;
}

/* modal (background) */
.modal 
{
    display: none; /* Hidden by default when reloading */
    position: fixed; /* Stay in place */
    z-index: 1; /* Sit on top */
    padding-top: 5%; /* Location of the box */
    left: 0;
    top: 0;
    width: 100%; /* Full width */
    height: 100%; /* Full height */
    overflow: auto; /* Enable scroll if needed */
    background-color: rgb(0,0,0); /* Fallback color */
    background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
}

/* entire modal */
.modal-content 
{  
    position: relative;
    background-color: #fefefe;
    margin: auto;
    padding: 0px;
    margin-bottom: 7%;
    border: 1px solid #888;
    max-width: 80%;
    box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2),0 6px 20px 0 rgba(0,0,0,0.19);
    -webkit-animation-name: animatetop;
    -webkit-animation-duration: 0.4s;
    animation-name: animatetop;
    animation-duration: 0.4s
}

/* modal header */
.modal-header 
{
    padding: 2px 16px;
    background-color: #5cb85c;
    color: white;
}

/* modal hosting pictures */
.modal-body 
{
    position: relative;
    max-width:100%; 
    max-height: 100%;
}

/* add animation: falling from the sky */
@-webkit-keyframes animatetop 
{
    from {top:-300px; opacity:0} 
    to {top:0; opacity:1}
}

@keyframes animatetop 
{
    from {top:-300px; opacity:0}
    to {top:0; opacity:1}
}

/* close button */
.close {
  color: white;
  float: right;
  font-size: 28px;
  font-weight: bold;
}

.close:hover,
.close:focus {
  color: #000;
  text-decoration: none;
  cursor: pointer;
}



</style>
</head>
<body>

<!-- trigger opening the modal -->
<a href="#" id="modalTrigger" class="dashboard-image-preview-link" data-before-img="https://www.toureiffel.paris/themes/custom/tour_eiffel/img/tour-eiffel-paris.jpg" data-after-img="https://www.toureiffel.paris/themes/custom/tour_eiffel/img/tour-eiffel-paris.jpg" data-name="Tour Eiffel">Show Comparison</a>

<!-- modal wrapper -->
<div id="myModal" class="modal">

    <!-- modal content - the entire modal -->
    <div class="modal-content" id="modal-content">
        <div class="modal-header">
        <span class="close">&times;</span>
        <h2>
        <!-- image file name will appear here -->
        </h2>

        </div>
        <!-- modal body - image comparison -->
        <div class="modal-body" id="before-after-window">
        <!-- space for image comparison filled by juxtapose.js -->  
        </div>
    </div>

</div>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script>
<script src="https://cdn.knightlab.com/libs/juxtapose/latest/js/juxtapose.min.js"></script>

<script type="text/javascript">
$(function() 
{
    // get the modal
    var $modalWindow = document.getElementById("myModal");

    // get the string that opens the modal
    var $trigger = document.getElementById("modalTrigger");

    // get the <span> element that closes the modal
    var $span = document.getElementsByClassName("close")[0];

    function beforeAndAfterImage(imgBefore, imgAfter) 
    {
        // juxtapose
        slider = new juxtapose.JXSlider('#before-after-window',
        [
            {
                src: imgBefore,
                label: 'BEFORE'
            },
            {
                src: imgAfter,
                label: 'AFTER'
            }
        ], 
        {
            animate: true,
            showLabels: true,
            showCredits: false,
            startingPosition: "50%",
            makeResponsive: true
        });
    }

    // when the user clicks the button, open the modal 
    $trigger.onclick = function() 
    {
        $modalWindow.style.display = "block";

        // select the images and put them next to each other
        var imgBefore = $(this).attr('data-before-img');
        var imgAfter = $(this).attr('data-after-img');

        if (imgBefore.length > 0 && imgAfter.length > 0) 
        {
            beforeAndAfterImage(imgBefore, imgAfter);
            // fill the title
            result = $('div#myModal').find('h2').text($(this).attr('data-name'));
        } 
        else 
        {
            flashNotice('No available large image to preview');
        }
    }

    // when the user clicks on <span> (x) let's close the modal
    $span.onclick = function() 
    {
        $modalWindow.style.display = "none";
    }

    // when the user clicks anywhere outside of the modal let's close it too
    window.onclick = function(event) 
    {
        if (event.target == $modalWindow) 
        {
            $modalWindow.style.display = "none";
        }
    }

});
</script>

<script>        
// defining event listener function
function scaleWindowSize()
{

    // resizing the image when changing the window size - juxtapose bug
    var $modalBody = document.getElementById("before-after-window");
    document.getElementById("before-after-window").setAttribute("style","width: 100%; height: 100%");
}

// attaching the event listener function to window's resize event
window.addEventListener("resize", scaleWindowSize);

// Calling the function for the first time
scaleWindowSize();
</script>

</body>
</html>

希望对您有帮助，
安东尼诺

在boostrap modal上并发插件问题，预览太小

2 个答案: