Skip to main content

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. 

Hi Romaric, 


Add this CSS and you should be set:


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

Best,

Hristian

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


It works perfectly, thank you very much Hristian 

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



Image Credit: Superhero by Simon Child from the Noun Project

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 

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!

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