Description

This script extension plugin allows you to add a zoom functionality to your images. It is powerful, easy to configure, and features a stack of image zoom options.

This extension is currently in BETA and the settings form is a little technical. In the next release, we will make this much simpler and user-friendly. More parameters will also be added later.

 

 

Features

  • Inner/outer zooming
  • Controls for magnifier size
  • Controls for zoom range value
  • Zoom speed
  • Magnifier animation
  • Zoom animation speed

Download

Instructions

  • Upload the cjte-imagezoom.zip file using the WordPress Plugin uploader
  • Activate the plugin
  • Edit the Page/Post you want to add an image with the image zoom effect
  • Click the CJT shortcode embed button and select Image Zoomer
  • Configure the settings and add your image
  • Click Done and then Publish/Update your Page/Post
data-largeIf an empty value is not specified, a small picture is taken as big. Optional parameter
data-titleThe title of the tooltip. If no value is specified or an empty value is not output. Optional parameter
data-helpPrompt text. If no value is specified or an empty value is not output. Optional parameter
data-text-bottomThe text to the picture is shown from the bottom of the big container. If no value is specified or an empty value is not output. Optional parameter
loadinggifdata: image/gifPath to the image shown when loading big image
loadopacity0.1The transparency of the overlapping background of the zoomed image when the big image is loaded, takes values ​​in the range: 0 - 1
loadbackground#878787Background colour of overlapping zoomed image when loading big image in format (CSS)
cursorshadetrueShows the cursor area
magnifycursorcrosshairThe mouse pointer over a small picture in the format (CSS)
cursorshadecolor#ffffffColour of the cursor area in the format (CSS)
cursorshadeopacity0.3Transparency of the cursor area, takes values ​​in the range: 0 - 1
cursorshadeborder1px solid blackExternal border of the cursor area in the format (CSS)
stepzoom0.5Zoom step when scrolling the mouse wheel, takes values ​​in the range: 0 - infinity
zoomrange[2, 2]Start the zoom, if so zoomstart < zoomrange[begining], the plug-in will install 'zoomstart = zoomrange[beginning]'
disablewheeltrueDisables scrolling of the document with the mouse wheel when the cursor is over a small picture, if the zoom range is not specified, or 'zoomrange[beginning] == zoomrange[end]'
showstatustrueShow hint when hovering over a small picture
showstatustime2000The display time of the tooltip, in milliseconds (ms)
statusdivborder1px solid blackExternal border tips in format (CSS)
statusdivbackground#C0C0C0Container background colour in format (CSS)
statusdivpadding4pxInner indent of the text of the prompt from the curb in the format (CSS)
statusdivfontbold 13px ArialFont text tips in format (CSS)
statusdivopacity0.8Transparency of the hint container, takes values ​​in the range: 0 - 1
magnifierposrightContainer display side, takes values left/right
magnifiersize[small.width, small.height]The size of the container in px, in the [width, height] default format is equal to the size of small pictures
magnifiereffectanimateshowInThe effect of the appearance / hiding of the container, takes the values: fadeIn / showIn / slideIn
innerzoomfalseShows container 'within' small pictures
innerzoommagnifierfalseAllows you to navigate the container on a small picture, behind the mouse cursor (lens effect)
descareaemptyIndicates the ID or class name in the format CSS arbitrary domain inside which the container will be shown, if width and height 'descarea' areas are not defined, this parameter is ignored
zindexemptyThis is the 'z-index' for all
tags
leftoffset15Indent the container to the left of the small picture in pixels (px)
rightoffset15Indent the container to the right of the small picture in pixels (px)
switchsidestrueThe edge of the screen is taken into account when the container is displayed. If there is not enough space for the display, the container will be shown on the other side of the small picture
magnifierborder1px solid blackOuter border of container (CSS)
textdnbackground#ffffffThe background colour of the container where the text is placed (CSS)
textdnpadding10pxThe inner indent of the text from the curb of the container (CSS)
textdnfont13px/20px cursive[font-style || font-variant || font-weight] font-size [/line-height] font-family | inherit
scrollspeedanimate5Scrolling big pictures, takes integer and fractional values ​​in the range: 1 - infinity
zoomspeedanimate7Zooming takes integer and fractional values ​​in the range: 1 - infinity
loopspeedanimate2.5Moving the cursor area and the big container behind the cursor in the lens effect mode. Takes integer and fractional values ​​in the range: 1 - infinity
magnifierspeedanimate350Show the big container in milliseconds (ms)
classmagnifiermagnifierThe CSS class name for the big picture container. If its class is given, then the parameter 'magnifierborder' is not taken into account
classcursorshadecursorshadeThe name of the CSS class for the cursor area. If its class is given, then the parameters are 'cursorshadeborder', 'cursorshadeopacity', 'cursorshadecolor' are not taken into account
classstatusdivstatusdivThe name of the CSS class for the hint container. If its class is given, then the parameters are 'statusdivborder', 'statusdivbackground', 'statusdivpadding', 'statusdivfont', 'statusdivopacitynot' taken into account
classtextdntextdnThe name of the CSS class for the container with the text to the picture. If its class is given, then the parameters are 'textdnbackground', 'textdnpadding', 'textdnfont' are not taken into account

Screenshots

 

Credits

This CJT extension plugin is based on the jQuery script by Sergei Zaragulov (http://zoomsl.sergeland.ru). All licenses and attribution notices are kept intact.

0 replies

Leave a Reply

Want to join the discussion?
Feel free to contribute!

Leave a Reply

Your email address will not be published. Required fields are marked *