turn.js issue with css zoom

Question

I do know that turn.js has it's own zoom but, I have added a simple zoom script with css zoom.

It's working, I mean when you press the zoom button it does zoom in the page (and zoom out) but I can't seem to be able to figure out how to resize the flipbook.

I do have an eventListener for the full screen but it doesn't seem to work for zoom. (I know this might be really simple but I just couldn't figure it out.)

<button onclick="zoomed()" class="fa fa-search-plus" > </button> 

<!-- Zoom -->
var zoom_el = document.getElementById("flipbook");
var zom= true;
function zoomed(){
    if (zom == true) {
    zoom_el.style.zoom = 1.5;
    zoom_el.style.MozTransform = 'scale(1.5)';
    zoom_el.style.WebkitTransform = 'scale(1.5)';
    autoCenter: true
    zom = false
    }
    else {
    zoom_el.style.zoom= 1;
    zoom_el.style.MozTransform = 'scale(1)';
    zoom_el.style.WebkitTransform = 'scale(1)';
    autoCenter: true
    zom=true
    }
}


<!-- EventListener -->

window.addEventListener('resize', function (e) {
  flip.style.width = '';
  flip.style.height = '';
  $(flip).turn('size', flip.clientWidth, flip.clientHeight);

Should I try to change states for the id="flipbook would something like that work? — JohnnyD, Aug 17 '20 at 11:50

score 1 · Answer 1 · edited Jun 04 '22 at 14:05

I found an answer on this website. The event listener doesn't detect class changes so we need a mutation observer, though you might still need the event listener:

const mainNode = document.getElementById('flipbook')
const toggleNode = document.getElementById('zoomed')

toggleNode.addEventListener('click', function() {
  mainNode.classList.toggle('--zoomed')
})

function callback(mutationsList, observer) {
  console.log('Mutations:', mutationsList)
  console.log('Observer:', observer)
  mutationsList.forEach(mutation => {
    if (mutation.attributeName === 'class') {
      zoomed_el.style.width = '';
      zoomed_el.style.height = '';
      autoCenter: true
      $(zoomed_el).turn('size', zoomed_el.clientWidth, zoomed_el.clientHeight);
    }
  })
}

const mutationObserver = new MutationObserver(callback)

mutationObserver.observe(mainNode, {
  attributes: true
})

window.addEventListener('resize', function(e) {
  zoomed_el.style.width = '';
  zoomed_el.style.height = '';
  $(zoomed_el).turn('size', zoom_el.clientWidth, zoom_el.clientHeight);
});

.zoomed {
  width: 1383px !important;
  height: 900px !important;
  left: -411px !important;
  top: 200px !important;
  padding-bottom: 30px !important;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button id="zoomed" class="fa fa-search-plus"> </button>

turn.js issue with css zoom

1 Answers1