Изменение параметров Button Zoom-In

Question

Изменение параметров Button Zoom-In

Рейтинг: 0Ответов: 1Опубликовано: 27.07.2023

Всем привет.

У меня на странице реализован panzoom, подгружаемый из этой библиотеки: jquery.panzoom.js

Ещё библиотеки в коде:

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.3/jquery.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-mousewheel/1.0.5/mousewheel.js"></script>
<script src="custom.js"></script>

<script>
  
    (function() {
        var $section = $('div').first();
        $section.find('.panzoom').panzoom({
            $zoomIn: $section.find(".zoom-in"),
            $zoomOut: $section.find(".zoom-out"),
            $zoomRange: $section.find(".zoom-range"),
            $reset: $section.find(".reset")
        });
    
        var instance = panzoom(element, {
            maxZoom: 7,
            minZoom: 0.3
        });
    })();
    
</script>

<style>
.page-header{
}
div#page {
    margin-left: 1em;
    margin-right: 1em;
}
#options{
    margin: 1em 1em 0em 1em;
}
#myCarousel img{
    width:100%;
}
.optionBox,#optionHead1,#optionHead2{
    text-align:center;
}
.carousel-inner {
    background-color: #202020;
}
.buttons{
    width: 100%;
    position: fixed;
    bottom: 80px;
    text-align: center;
    z-index: 99;
}
.state-icon {
    left: -5px;
}
.list-group-item-primary {
    color: rgb(255, 255, 255);
    background-color: rgb(66, 139, 202);
}
</style>

<link rel="stylesheet" href="main.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">

        <div class="row">
            <div class="col-md-12">
                <div class="buttons">
                        <button type="button" class =" zoom-out btn btn-default">
                            <span class="glyphicon glyphicon-minus"></span>
                        </button>
                        <button type="button" class =" zoom-in btn btn-default">
                            <span class="glyphicon glyphicon-plus"></span>
                        </button>
                        <button class="reset btn btn-primary">Исходный размер</button>
                </div>
                <div id="imgDiv">
                    <div class="item active panzoom">
                        <img src="https://iili.io/HQL4kLg.png" class="img-responsive" alt="Dicom">
                    </div>
                </div>
            </div>
        </div>

В скрипте есть maxScale, установленный на 6. Но мне его не хватает. Пытался изменить через:

var $(instance) = panzoom(element,
     { maxScale: 7,
});

Но не сработало. Как его увеличить?

javascript html jquery zoom

Источник: Stack Overflow на русском

Answer 1

▲ 0

В библиотеке которую вы используете нет параметра maxZoom скорее всего поэтому и не обрабатывается: maxZoom: 7. Используйте параметр maxScale

Вот если использовать офф библиотеку расшаренную на github: https://github.com/anvaka/panzoom

https://unpkg.com/panzoom@9.4.0/dist/panzoom.min.js

То данная библиотека как раз таки принимает значения:

var instance = panzoom(element, {
  maxZoom: 1,
  minZoom: 0.1
});

UPD: В вашем коде jquery много путаницы. Я предложу ответ на чистом js

document.addEventListener("DOMContentLoaded", function(event) { 
    const elem = document.querySelector('.panzoom');
    minBtn = document.querySelector('.zoom-out');
    maxBtn = document.querySelector('.zoom-in');
    resetBtn = document.querySelector('.reset');
    
    const panzoom = Panzoom(elem, {
        maxScale: 14,
        minScale: 0.1
      })

    minBtn.addEventListener("click", panzoom.zoomOut);    
    maxBtn.addEventListener("click", panzoom.zoomIn);    
    resetBtn.addEventListener("click", panzoom.reset);

});

.page-header{
}
div#page {
    margin-left: 1em;
    margin-right: 1em;
}
#options{
    margin: 1em 1em 0em 1em;
}
#myCarousel img{
    width:100%;
}
.optionBox,#optionHead1,#optionHead2{
    text-align:center;
}
.carousel-inner {
    background-color: #202020;
}
.buttons{
    width: 100%;
    position: fixed;
    bottom: 80px;
    text-align: center;
    z-index: 99;
}
.state-icon {
    left: -5px;
}
.list-group-item-primary {
    color: rgb(255, 255, 255);
    background-color: rgb(66, 139, 202);
}

<head>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.3/jquery.js"></script>
    <script src='https://cdnjs.cloudflare.com/ajax/libs/jquery.panzoom/4.0.0/panzoom.min.js'></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
   <!-- <script src="https://cdnjs.cloudflare.com/ajax/libs/angular-mousewheel/1.0.5/mousewheel.js"></script>-->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
    <link rel="stylesheet" href="main.css">
</head>

<body>
    <div class="row">
        <div class="col-md-12">
            <div class="buttons">
                    <button type="button" class =" zoom-out btn btn-default">
                        <span class="glyphicon glyphicon-minus"></span>
                    </button>
                    <button type="button" class =" zoom-in btn btn-default">
                        <span class="glyphicon glyphicon-plus"></span>
                    </button>
                    <button class="reset btn btn-primary">Исходный размер</button>
            </div>
            <div id="imgDiv">
                <div class="item active panzoom">
                    <img src="https://iili.io/HQL4kLg.png" class="img-responsive" alt="Dicom">
                </div>
            </div>
        </div>
    </div>
   <script src="custom.js"></script>
</body>

У меня он прекрасно работает.

Изменение параметров Button Zoom-In

Ответы