Skip to content
View in the app

A better way to browse. Learn more.

Web Designer Forum

A full-screen app on your home screen with push notifications, badges and more.

To install this app on iOS and iPadOS
  1. Tap the Share icon in Safari
  2. Scroll the menu and tap Add to Home Screen.
  3. Tap Add in the top-right corner.
To install this app on Android
  1. Tap the 3-dot menu (⋮) in the top-right corner of the browser.
  2. Tap Add to Home screen or Install app.
  3. Confirm by tapping Install.

Hover Zoom Effect in Wordpress

Featured Replies

This might be a bit of a tall order, but I'm stuck and need some help.

 

I'm working on a site for someone who is very keen to have a hover zoom effoect on his images.

 

I'm using Worpdress with ng gallery. I'd like the effect to apply to singlepic view in ng gallery.

 

My PHP and JS skills are fairly rudimentary, but I've found a couple of scripts which look like they might do the job:

 

http://thecodeplayer.com/walkthrough/magnifying-glass-for-images-using-jquery-and-css3 and http://www.mind-projects.it/projects/jqzoom/

 

The trick is to get them to apply to the ng gallery display template which looks like this:

 

<?php 
/**
Template Page for the single pic

Follow variables are useable :

	$image : Contain all about the image 
	$meta  : Contain the raw Meta data from the image 
	$exif  : Contain the clean up Exif data from file
	$iptc  : Contain the clean up IPTC data from file 
	$xmp   : Contain the clean up XMP data  from file
	$db    : Contain the clean up META data from the database (should be imported during upload)

Please note : A Image resize or watermarking operation will remove all meta information, exif will in this case loaded from database 

 You can check the content when you insert the tag <?php var_dump($variable) ?>
 If you would like to show the timestamp of the image ,you can use <?php echo $exif['created_timestamp'] ?>
**/
?>
<?php if (!defined ('ABSPATH')) die ('No direct access allowed'); ?><?php if (!empty ($image)) : ?>

<a href="<?php echo $image->imageURL ?>" title="<?php echo $image->linktitle ?>" <?php echo $image->thumbcode ?> >
	<img class="<?php echo $image->classname ?>" src="<?php echo $image->thumbnailURL ?>" alt="<?php echo $image->alttext ?>" title="<?php echo $image->alttext ?>" />
</a>
<?php if (!empty ($image->caption)) : ?><span><?php echo $image->caption ?></span><?php endif; ?>
<?php endif; ?>

 

The code from the first JS uses a background image, which might be harder to tweak/implement.

 

I can see that the ability to make this work is within my grasp, but a serious stretch on my ability, so any help would be very much appreciated.

 

Regards,

 

Robin

Create an account or sign in to comment

Account

Navigation

Search

Search

Configure browser push notifications

Chrome (Android)
  1. Tap the lock icon next to the address bar.
  2. Tap Permissions → Notifications.
  3. Adjust your preference.
Chrome (Desktop)
  1. Click the padlock icon in the address bar.
  2. Select Site settings.
  3. Find Notifications and adjust your preference.