JSFiddle - React, Tailwind, and code Playground

by Marco

HTML

<section id="reader" class="list">
      
        <article class="row" id="spread0">
            <span class="spread">
                <img src="http://placehold.it/600x870" />
            </span>
        </article>
        
</section>

CSS

html, body {
    margin: 0;
    padding: 0;
} 

/* Container fyrir aðalefni */
        section.list {
            position: absolute;
            margin: 0;
            height: 100vh;
            width: 100vw;
            white-space: nowrap;
            overflow-x: hidden;
            overflow-y: hidden;
        }
        
        /* Container fyrir opnur */
        section.list article {
            position: relative;
            margin: 0;
            display: inline-block;
            vertical-align: top;
            width: 90vw;
            height: 90vh;
            text-align: center;
        }

        /* Passa upp á að síður passi */
        section.list article img {
            max-width:50%;
            max-height:100%;
            padding: 6% 0 5%;
            padding: 9vh 0 8vh;
            display:inline-block;
        }

        /* Zoom */
        section.list span.draggable {
            overflow-x: hidden;
            overflow-y: hidden;
        }

        section.list span.draggable img {
            max-height: none;
            max-width: none;
        }

JavaScript

$("span.spread").draggable({disabled:true})	
 $("span.spread").dblclick(function () {
		$(this).toggleClass("draggable");
		if($(this).hasClass('draggable')){
			$("span.spread").draggable({disabled:false})
			}else{
			$("span.spread").draggable({disabled:true})
			$(this).css({'position':'relative','top':'0px','left':'0px'})
			
			}
	});