Jump to content

Archived

This topic is now archived and is closed to further replies.

abuzzelli

Image zoom

Recommended Posts

abuzzelli+    4
abuzzelli

Is there a way to add a zoom feature to images on a page? Maybe a plugin?

Share this post


Link to post
Share on other sites
batman    389
batman

Hi abuzzelli

You don´t need a plugin

 

I make this for you

http://help-mac.com.ar/prueba-imagen/

 

You can write a HTML like

<div class="grow pic"><img alt="beach" src="http://help-mac.com.ar/wp-content/uploads/2013/10/Reflojo-Glaciar-copia2.jpg" /></div>

 

 

and then add this CSS

 

/*GROW*/
.grow img {
  height: 700px;
  width: 300px;
 
  -webkit-transition: all 1s ease;
     -moz-transition: all 1s ease;
       -o-transition: all 1s ease;
      -ms-transition: all 1s ease;
          transition: all 1s ease;}
 
.grow img:hover {
  width: 1400px;
  height: 600px;}
 
:geek:
 
You have examples in

Life is too short to remove USB safely ...

Share this post


Link to post
Share on other sites
James B    436
James B

Let us know if the above solution works for you :-)

 

Thank you Batman


Kindly search the forum and read the documentation before posting. It will help you resolve many issues.

For CSS help be sure to check out W3Schools first and be sure to download FireBug for FireFox for troubleshooting.

James B

Share this post


Link to post
Share on other sites
abuzzelli+    4
abuzzelli

Thanks batman! I appreciate the help. Only problem is it needs to happen automatically because my client needs to be able to add in photos herself without coding.

Share this post


Link to post
Share on other sites
James B    436
James B

Hi there, I don't think you'd be able to do that without the client having to amend the class or by adding a more complex filter into a child themes function.php.

 

It might be easier to use a plugin if you want it to be sitewide without the client having to edit anything etc, something like http://wordpress.org/plugins/zoom-image/ maybe?


Kindly search the forum and read the documentation before posting. It will help you resolve many issues.

For CSS help be sure to check out W3Schools first and be sure to download FireBug for FireFox for troubleshooting.

James B

Share this post


Link to post
Share on other sites

  • Similar Content

    • cstudio
      By cstudio
      How do I control the lightbox effect on the plugin "popthumbs"?  On mobile, it opens up much to small then when expanded it opens to large.  I would like to control the the lightbox to like 90% of the viewer window but I can't figure out how/where to control that.
      Site example

       
      Thx
    • Michael Kummer
      By Michael Kummer+
      Hi guys,
      I have noticed that all thumbnails on www.michaelkummer.com are scaled down in CSS or HTML, rather than on the backend by Jetpack's Photon. See https://db.tt/vNJCn7Gh and https://db.tt/3ZpkHM7G. 
      Any idea why Pins sets the image width and height to something much larger than what's shown on the screen? Is there any way to fix this so that Photon can do a better job in rescaling the images on the backend before they are delivered to the browser?
      Thanks
      Michael 
    • FRevi
      By FRevi+
      I am trying to achieve a gallery (Envira Gallery plugin) that spans the full width of a page, within Platform 5 theme. Can't figure it out.
      The page should look roughly like this: www.frankrevi.photography/envira/favorites-2 (maybe minus the title, that's another story). This is a standalone gallery page and not part of my site. Nothing links to it.
      But instead it is this on the real page: www.frankrevi.photography/favorites.
      Currently I have the gallery in a Pagelines Framework Content section. My framework content wrap is set to unwrapped full width. I'm using all 12 columns. In Pagelines Settings, my Layout/Nav Content Width is set to 100%.
      How can I get the gallery on the real page URL to be the full page width please?
    • sfmstudios
      By sfmstudios+
      I'm using the boxes section on a local development site to play around with some options, and running into an issue.  
      Have the following settings for the boxes:
      Type: Images/SVC Media on Top Image Appearance: Standard/Default Image/Icon Width: 280px Image Opacity: 100% Each of my box images is 280x150 in size, but the result of the image on the box is a strange zoomed-in, cropped square (see attached).  I looked to adjust border properties via CSS, but couldn't find a fix.  What solutions are out there?

    • richardjacruz
      By richardjacruz+
      I received our monthly Alexa report, and it pointed out that there were missing alt tags on EVERY page on our site. Upon closer inspection, it looks like the QuickSlider which is used for the scrolling banners at the top of the site doesn't bring in the alt tags. Recently, you made a change to the RevSlider to allow images to have "alt" tags. Can you do that for the QuickSlider too?
      Thanks.
×