Question

我有一个光滑的滑块，并且我希望高度根据当前显示的图像而变化。我的滑块的图像不是硬编码的。这些图像是从输入文件中获取的，然后显示在滑块中。我添加了adaptiveHeight：true并正常工作。我的身高会自动更改，但是当我上传图像而不触摸其他任何东西时，图像无法正确显示。只有当我单击下一个或上一个时，图像才能正确显示。

HTML：

<section name="canvas" class="canvas" id="canvas">
   <div id="boxContain"></div>
   <div class="imageContainer" id="imageContainer">
   </div>
</section>

JavaScript：

const fileInput = document.getElementById('my_file');
const fileList = document.getElementById('imageContainer');
let slickSettings = {
    infinite: true,
    draggable: false,
    arrows: true,
    slidesToShow: 1,
    slidesToScroll: 1,
    swipe: false,
    adaptiveHeight: true
};
let initSlickCarousel = (target, settings) => {
    const $target = $(target);

    switch (true) {
        case $target.hasClass('slick-initialized'):
            $target.slick('unslick');
            $target.slick(settings);
            break;
        default:
            $target.slick(settings);
    }
};
const handleInputChange = (event) => {
    console.log('We are handling it sir!');
    const filesArray = Array.from(event.target.files);
    if (filesArray.length > 20) {
        alert("Please select 20 or less images!!");
    } else {
        filesArray.map((singleFile) => {
            const outputImg = document.createElement('img');
            const fileReader = new FileReader();

            outputImg.className = 'img-thumbnail';

            fileReader.readAsDataURL(singleFile);

            fileReader.onload = (event) => {
                outputImg.src = event.target.result;
                document.getElementById("canvas").style.height = "auto";
                document.getElementById("imageContainer").style.height = "auto";
                document.getElementById("imageContainer").style.width = "auto";
                document.getElementById("createBoxBtn").style.pointerEvents = ("auto");
                document.getElementById("duplicateBox").style.pointerEvents = ("auto");
                document.getElementById("deleteBox").style.pointerEvents = ("auto");
                document.getElementById("save").style.pointerEvents = ("auto");

            };


            console.log(outputImg);
            console.log(event.target.files);
            fileList.appendChild(outputImg);
            document.getElementById("openBtn").style.pointerEvents = "none";

        });
        var files = event.target.files;
        for (var i = 0; i < files.length; i++) {
            $("#files").append('<div class="filename"><span name="fileNameList">' + files[i].name + '</span></div>');
        }

        initSlickCarousel(fileList, slickSettings);
    }

};

CSS：

 .canvas {
     border: 1px solid black;
     width: 600px;
     height: 600px;
     background: #D3D3D3;
     position: absolute;
     margin-left: 350px;
}

我上传图片并且没有触摸任何东西后，高度会变得很小，以至于您看不到完整图片。只有在我单击next / prev之后，它才会显示完整图片。开头，无需单击“下一个/上一个”进行调整。那么如何解决此问题？

Answer 1

我们经常使用光滑作为滑块选项。我的经验是adaptive-height在延迟加载图像或初始化浮雕后添加图像时无法很好地工作。

对于您而言，解决方法是在初始化之后但在第一次更改之前设置adaptive-height属性。

const fileInput = document.getElementById('my_file');
const fileList = document.getElementById('imageContainer');
let slickSettings = {
    infinite: true,
    draggable: false,
    arrows: true,
    slidesToShow: 1,
    slidesToScroll: 1,
    swipe: false,
    /* adaptiveHeight: true */

};
let initSlickCarousel = (target, settings) => {
    const $target = $(target);

        $target.slick(settings);
    
};
const handleInputChange = (event) => {
    console.log('We are handling it sir!');
    const filesArray = Array.from(event.target.files);
    if (filesArray.length > 20) {
        alert("Please select 20 or less images!!");
    } else {
        filesArray.map((singleFile) => {
            const outputImg = document.createElement('img');
            const fileReader = new FileReader();

            outputImg.className = 'img-thumbnail';

            // Let's read it as data url - onload won't return a thing without it
            fileReader.readAsDataURL(singleFile);

            fileReader.onload = (event) => {
                outputImg.src = event.target.result;
            }; 	

            console.log(outputImg);
            console.log(event.target.files);
            fileList.appendChild(outputImg);
            document.getElementById("openBtn").style.pointerEvents = "none";

        });
        var files = event.target.files;
        for (var i = 0; i < files.length; i++) {
            $("#files").append('<div class="filename"><span name="fileNameList">' + files[i].name + '</span></div>');
        }

        initSlickCarousel(fileList, slickSettings);
        if ($(".imageContainer").hasClass("slick-initialized")) {
          console.log($(".imageContainer").slick('slickGetOption','adaptiveHeight'));

          $('.imageContainer').on('beforeChange', function(event, slick, currentSlide, nextSlide){
						 $(".imageContainer").slick('slickSetOption','adaptiveHeight', true, true);
          });
        }
    }

};



if (window.File && window.FileReader && window.FileList) { // check if browser can handle this

    console.log('We are good to go sir!');
    fileInput.addEventListener('change', handleInputChange, false);

} else {

    alert('File features are not fully supported. Please consider changing the browser (newest Chrome or Mozilla).');
}

@import url(//fonts.googleapis.com/css?family=Montserrat:300,400,600,700);
#{
    margin: 0px;
    padding: 0px; 
}
html{
    width: 100%;
    height: 100%;   
    background-image: linear-gradient(rgba(255,63,63, 1), rgba(244,21,122, 1));
}
ul {
    list-style: none;
    text-align: center;
}

li {
    padding: 5px;
}
.nav {
    width: 150px;
    float: left;
    text-align: center;
}

button {
    background-color: white;
    border-radius: 15px;
    
}

button:hover {
    background-color: #D3D3D3;
}
#hiddenLink{
    display: none;
}
.canvas {
    border: 1px solid black;
    max-width: 500px;
    max-height: 500px;
    min-width: 200px;
    min-height: 200px;
    background: #D3D3D3;
/*    overflow: hidden;*/
    position: absolute;
    margin-left: 350px;
}
#imageContainer{
    height: 100%;
}

.nav button {
    width: 100px;
}
.openBtn, input[type=submit] {
    width: 100px;
    background-color: white;
    border-radius: 15px;
}

.openBtn:hover, input[type=submit]:hover {
    background-color: #D3D3D3;
}
img {
    /*position:absolute;*/
/*    float: left;*/
    image-rendering: -webkit-optimize-contrast;
}

#boxContain{
    position: absolute;
    height: 100%;
    width: 500px;
    z-index: 900;
}

<!DOCTYPE html>
<html>

<head>
    <title>Online Image Labelling Tool</title>
    <meta charset="utf-8" />
    <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick-theme.min.css">
    <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick.min.css">
    <link rel="stylesheet" type="text/css" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.1/themes/base/jquery-ui.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/photoswipe/4.1.1/photoswipe.min.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/photoswipe/4.1.1/default-skin/default-skin.min.css">
    <link rel="stylesheet" href="css/stylesheet.css" type="text/css" />


</head>

<body>
    <form name="imageLblForm" method="post" id="imageLblForm" enctype="multipart/form-data" runat="server" action="#">
        <h4 id="errorMessage"></h4>
        <section name="nav" class="nav">
            <ul>
                <li><input type="file" id="my_file" name="file1" onchange="" accept=".bmp,.jpg, .png, image/jpg, image/bmp, image/png" style="display:none" multiple /><input type="button" id="openBtn" class="openBtn" value="Open" onclick="document.getElementById('my_file').click();" /></li>
                <li><input type="submit" value="Save" id="save" onclick="document.getElementById('hiddenLink').click(); return false; "><a id="hiddenLink">Save</a></li>
                <li>
            </ul>
        </section>
        <section name="canvas" class="canvas" id="canvas">
            <div id="boxContain"></div>
            <div class="imageContainer" id="imageContainer">
        
            </div>

        </section>
    </form>

    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"></script>
    <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js" type="text/javascript"></script>
    <script src="https://code.jquery.com/jquery-1.12.4.js"></script>
    <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick.min.js" type="text/javascript"></script>
    <script src="https://wp.incredibbble.com/writsy-shop/wp-content/themes/writsy-shop/assets/vendor/jquery-zoom/jquery.zoom.min.js?ver=1.7.18" type="text/javascript"></script>
    <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js" type="text/javascript"></script>
    <script src="js/script.js" type="text/javascript"></script>

</body>

</html>

使用adaptiveHeight时无法正确显示第一张图像

1 个答案: