Jquery Zooming Effect on Unbounce

  • 4 April 2016
  • 6 replies
  • 101 views
R

Hello Unbounce Community, 

I’m trying to add a jquery zooming effect found here http://www.elevateweb.co.uk/image-zoom/examples 

On my landing page, I’ve put a html box with this code inside : 

![](http://doc.directportes.fr/assets/img/petite.png)" rel=“nofollow” target="_blank" title=“Link http//docdirectportesfr/assets/img/grandejpg/”>http://doc.directportes.fr/assets/img/grande.jpg"/>;

And with the Javascript Manager, i’ve added two script : 

 

 " rel=“nofollow” target="_blank" title=“Link http//docdirectportesfr/assets/js/jqueryelevateZoomminjs/script”>http://doc.directportes.fr/assets/js/jquery.elevateZoom.min.js">;

It works, but the problem is that the ‘LensZoom’ appear behind the image. Is seemt that Unbounce give the priority at the image instead of the jquery. 

Is there a possibility to give priority at the ‘LensZoom’ ? 

To see the actual result, you can see the first door on http://www.directportes.fr/v3 

Thanks guys for your help. 

6 replies

Hristian
Userlevel 7
Badge +3

Hi Romaric, 

Add this CSS and you should be set:

<br />.zoomContainer {<br />z-index: 999<br />}<br />

Best,
Hristian

Hristian K. → experimentation-as-a-service → https://www.revise.agency/
R

You’re not a Hero, now you’re a SuperHero ! 

It works perfectly, thank you very much Hristian 

Hristian
Userlevel 7
Badge +3

Now I have to re-order my cape and make it say SuperHero 😮 🙂

Image Credit: Superhero by Simon Child from the Noun Project

Hristian K. → experimentation-as-a-service → https://www.revise.agency/
R

Hello Hristian, 

I saw that it was possible to add a Stricky Header on unbounce. 

I implement this feature, and now I have conflict with the Zoom effect. 

I try to reduce the Z index of the Zoom, but nothing (from 999 to 700)

The test link is : http://www.directportes.fr/luxe-1/  

I tryed to google this to have some help, but I see that there are conflict with Z index and floating things.
http://stackoverflow.com/questions/579753/css-floating-w-overlap

 

Thanks for your help, 
Romaric 

A

Hello,

There is any chance to use in an Unbounce LP a zoom effect similar to the one used on this site?
https://www.kurtgeiger.com/

Tx a lot!

A

I finally made it! This is the css you could add in your Stylesheets folder:

#lp-pom-image-x .lp-pom-image-container img { -webkit-transition: all 0.9s ease; -moz-transition: all 0.9s ease; -o-transition: all 0.9s ease; -ms-transition: all 0.9s ease; transition: all 0.9s ease; line-height: 0; width: 100%; height: auto; } #lp-pom-image-x .lp-pom-image-container img:hover { width: 110%!important; height: auto; width: 120%; height: auto; }

x = the number of the image you want to zoom from your Landing Page //

Reply


Terms & ConditionsCookie settings