Image modal javascript

1

https://www.ufcstore.eu/memorabilia/championship-belt/ufc-championship-replica-belt

what kind of image modal are they using?

2

This is a basic explanation (NOTE: some of the ways the do things on w3Schools are outdated. I posted the link so you get an idea of the modal concept. You can use jQuery and css instead and tweak it yourself):

http://www.w3schools.com/howto/howto_css_modal_images.asp

3

i did this but there is no zoom mode in this w3school one

4

Can you post a link of what you have tried please? So you know how to do the modal, what you mean is how to do the zoom is that correct?

Try using this javascript library, and on click, you can show the modal with fullsize image.
Library site: http://www.elevateweb.co.uk/image-zoom
Demo: http://www.elevateweb.co.uk/image-zoom/examples

1 Like
5

http://codepen.io/rattlewu1f/pen/KNVzBY

this is what i have done as of yet
replicated the image model
but i still feel its not proper cux the second image becomes a little white when i hover over it…
plus i cant get the image modal to work when i get my image inside my css
background:url();
tho the above one is has its images placed in html img tag

6

Your modal is working fine. Here is your problem with the white on hover:

#myImg, #myImg1:hover {
    opacity: 0.7;
}

You have this css that is not working as expected. It sets your mountain picture to someone white, and your bird pic to somewhat white on hover. I am assuming that you want your image to turn white on hover, so to fix it, you need to have the hover pseudo-class on both:

#myImg:hover, #myImg1:hover {
    opacity: 0.7;
}

But think about this. Because you are going to be zooming in on the pictures, why do you even want opacity? Just remove that altogether. Now, that modal looks good. If you want to tweak the css yourself to make it look more like the ufcstore, go for it.

But now let’s work on the zoom. To do the zoom, we will add a javascript library called ElevateZoom. It also needs jQuery to run. So in your codepen settings, add jQuery as a dependancy, and also add this link as a dependancy:

https://cdn.jsdelivr.net/elevatezoom/3.0.8/jqueryElevateZoom.js

adawdawdadwa.png1232×562 54 KB

OK, now that the library and dependencies are installed, let’s get to work on making it work. So in your javascript tab, add the following code:

$("#myImg").elevateZoom({
  zoomType: "inner",
  cursor: "pointer"
});

$("#myImg1").elevateZoom({
  zoomType: "inner",
  cursor: "pointer"
});

There you go! Here’s my fork of your project:
Codepen

And the config for ElevateZoom if you want to tweak it some more:
http://www.elevateweb.co.uk/image-zoom/configuration

1 Like