Javascript-форум - Как прикрутить лупу с fancybox 3

Javascript-форум (https://javascript.ru/forum/)

- Общие вопросы Javascript (https://javascript.ru/forum/misc/)

- - Как прикрутить лупу с fancybox 3 (https://javascript.ru/forum/misc/75187-kak-prikrutit-lupu-s-fancybox-3-a.html)

Как прикрутить лупу с fancybox 3

Помогите кто чем может))
Хочу прикрутить лупу к модульному окну картинки.
Вот сам плагин https://fancyapps.com/fancybox/3/
Вот лупа.
http://www.jacklmoore.com/zoom/
По отдельности все работает а вместе нет.
Может это физически не возможно?
Подскажите пожалуйста.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head> <!-- 1. Add latest jQuery and fancyBox files -->

<script src="//code.jquery.com/jquery-3.3.1.min.js"></script>

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/fancybox/3.4.1/jquery.fancybox.min.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/fancybox/3.4.1/jquery.fancybox.min.js"></script>
<script src="http://www.jacklmoore.com/js/jquery.zoom.js"></script>
<script>
		$(document).ready(function(){
			$('.fancybox-image').zoom();
		
		});
	</script>
</head>
<!-- 2. Create links -->

<a data-fancybox="gallery" href="http://www.newerapr.com/uploads/3/9/5/3/39535555/idf16-conexant_orig.png"><img width="300px" src="http://www.newerapr.com/uploads/3/9/5/3/39535555/idf16-conexant_orig.png"></a>
<a data-fancybox="gallery" href="https://www.writingwhimsy.com/wp-content/uploads/2013/11/fancybox_banner.png"><img width="300px" src="https://www.writingwhimsy.com/wp-content/uploads/2013/11/fancybox_banner.png"></a>


<!-- 3. Have fun! -->

</body>
</html>

Народ подскажите может я туплю. Может это физически не возможно? Может идея не очень?

kostia170985,
строка 12 бесполезна
'.fancybox-image' создатся после клика по ссылке
и '.fancybox-image' "закрыта" от мыши и кликов -- zoom не сработает

К тому же в fancybox есть свой зум

Цитата:

Сообщение от Dilettante_Pro

есть свой зум

как заставить его увеличить картинку ?

Цитата:

Сообщение от рони

как заставить его увеличить картинку ?

В приведенном примере пост 2 видно:
после запуска fancybox (клика по исходным картинкам) появляется лупа, кликами по которой картинка увеличивается-уменьшается. То же происходит и просто при клике по картинке

Dilettante_Pro,
не верь глазам своим, это не увеличение картинки! :)

рони,
А что это? увеличение блока в котором картинка, пользователю ведь разницы нет

В смартфонах тоже зум не такой, как в фотокамерах с нормальным объективом.

j0hnik,
Dilettante_Pro,
нет там зума никакого, есть исходный размер картинки.

а больше и не надо, плыть начнет

либо вписать в размеры окна, либо истинный размер

https://github.com/fancyapps/fancybo...s/core.js#L853

.on("click.fb", "[data-fancybox-zoom]", function(e) {
          // Click handler for zoom button
          self[self.isScaledDown() ? "scaleToActual" : "scaleToFit"]();
        });

Цитата:

Сообщение от j0hnik

а больше и не надо

а если надо?

fancybox and zoom

:write: :)

Пример: zoom 300%

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head> <!-- 1. Add latest jQuery and fancyBox files -->
<style type="text/css">
   .fancybox-button.zoom{
        color:  #FFFF00;
   }

</style>
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/fancybox/3.4.1/jquery.fancybox.min.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/fancybox/3.4.1/jquery.fancybox.min.js"></script>

<script>
$(document).ready(function(){

$.fancybox.defaults.btnTpl.z = '<button data-fancybox-z class="fancybox-button" title="zoom 300%">300%</button>';

$('[data-fancybox="gallery"]').fancybox({ buttons : ['z', 'close'], afterShow : function(instance, current ) {
    $('[data-fancybox-z]').toggleClass("zoom", current.ratio == 3)
}});


$(document).on('click.fb', '[data-fancybox-z]', function( e ) {

    var instance = $.fancybox.getInstance();
	var current = instance.current;
    current.ratio = current.ratio != 3 ? 3 : 1/3;
    current.width  = current.width  * current.ratio;
    current.height = current.height * current.ratio;
    instance[ current.ratio == 3 ?  "scaleToActual" : "scaleToFit"]();
    $(this).toggleClass("zoom", current.ratio == 3);
});

});
</script>
</head>
<body>   <p>zoom</p>
<!-- 2. Create links -->

<a data-fancybox="gallery" href="http://www.newerapr.com/uploads/3/9/5/3/39535555/idf16-conexant_orig.png"><img width="300px" src="http://www.newerapr.com/uploads/3/9/5/3/39535555/idf16-conexant_orig.png"></a>
<a data-fancybox="gallery" href="https://www.writingwhimsy.com/wp-content/uploads/2013/11/fancybox_banner.png"><img width="300px" src="https://www.writingwhimsy.com/wp-content/uploads/2013/11/fancybox_banner.png"></a>


<!-- 3. Have fun! -->

</body>
</html>

рони,
А это зачем?

<script src="https://www.jacklmoore.com/js/jquery.zoom.js"></script>

Тоже обман зрения?

Dilettante_Pro,
:) убрал