Zoom 2 images simultaneously

Asked

Viewed 42 times

0

Good morning, you guys, I need to click on 2 images and they should open side by side so that the client can make a comparison of before and after.

Notice that I am using the materialboxed from materialize until ai ok if it click on 1 image only, but when it selects 2 images wanted to make the same effect...

<div class="col s2" style="width: 110px">
    <img src="<?php echo Url::getBase().'img/varizes2.jpg'?>" width="105" class="materialboxed"/>
    <label>
        <input type="checkbox" />
        <span>&nbsp;</span>
    </label>
</div>
javascript image

1 answer

0

Nor the documentation nor the code specify that it is necessary for HTML to be a <img>.

Then you can simply create a container and apply the plugin to the container instead of the images.

Example:

$('.compare').materialbox();
.compare {
  display: flex;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">
     
<div class="compare">
  <img src="https://via.placeholder.com/200">
  <img src="https://via.placeholder.com/200/fff000/ffffff">
</div>

Jsfiddle working...

  • Fernando had thought so too, but I think what he wants is at the click of the check opens the images, I do not know, it seems that this is it!

  • 1

    But if that’s what he wants, just look at the documentation and activate it using method .open(). I don’t think that would be much of a barrier. I hope so...

  • Fernando, thank you for the answer, you are not yet so friend, and as Leandrade said, I will "check 2" images and I will have a third button let’s say so that when clicking this third button the two checked images would open the same as the slider right there... I was clear? thanks

  • Hmmm.. then the images inside the materialbox will be dynamic? It will depend on user input?

  • Yes, they will be dynamic, but they will be saved in a comic...

Browser other questions tagged javascript image

You are not signed in. Login or sign up in order to post.