Cloud Zoom - простой и легкий в интеграции зум для картинок.

Дописи в корисному

Главная

Корисне

Show Post

Мои заметки по joomla

бер.

Cloud Zoom - простой и легкий в интеграции зум для картинок.

Искал не это, но в принципе подошло как вариант решения задачи. Может кому будет полезно:

Облако масштабирования изображения без увеличения JQuery плагин, сопоставим альтернативе продуктов, таких как Magic Zoom. По сравнению с популярной jQZoom плагин, имеет больше возможностей и более надежен и совместим в различных браузерах.

Пример HTML файла:


<html>
<head>

<!-- Load the Cloud Zoom CSS file -->
<link href="/styles/cloud-zoom.css" rel="stylesheet" type="text/css" />

<!-- You can load the jQuery library from the Google Content Network.
Probably better than from your own server. -->
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>

<!-- Load the Cloud Zoom JavaScript file -->
<script type="text/JavaScript" src="/js/cloud-zoom.1.0.2.min.js"></script>

</head>
    <body>
        
        <!--	
        An anchor with class of 'cloud-zoom' should surround the small image.
        The anchor's href should point to the big zoom image.
        Any options can be specified in the rel attribute of the anchor.
        Options should be specified in regular JavaScript object format,
        but without the braces.
        -->
    	
        <a href='/images/zoomengine/bigimage00.jpg' class = 'cloud-zoom' id='zoom1'
            rel="adjustX: 10, adjustY:-4">
            <img src="/images/zoomengine/smallimage.jpg" alt='' title="Optional title display" />
        </a>
        
         
        <!--	
        You can optionally create a gallery by creating anchors with a class of 'cloud-zoom-gallery'.
        The anchor's href should point to the big zoom image.
        In the rel attribute you must specify the id of the zoom to use (useZoom: 'zoom1'),
        and also the small image to use (smallImage: /images/....)
        -->
        
        <a href='/images/zoomengine/bigimage00.jpg' class='cloud-zoom-gallery' title='Thumbnail 1'
        	rel="useZoom: 'zoom1', smallImage: '/images/zoomengine/smallimage.jpg' ">
        <img src="/images/zoomengine/tinyimage.jpg" alt = "Thumbnail 1"/></a>
        
        <a href='/images/zoomengine/bigimage01.jpg' class='cloud-zoom-gallery' title='Thumbnail 2'
        	rel="useZoom: 'zoom1', smallImage: ' /images/zoomengine/smallimage-1.jpg'">
        <img src="/images/zoomengine/tinyimage-1.jpg" alt = "Thumbnail 2"/></a>                  
        
        <a href='/images/zoomengine/bigimage02.jpg' class='cloud-zoom-gallery' title='Thumbnail 3'
        	rel="useZoom: 'zoom1', smallImage: '/images/zoomengine/smallimage-2.jpg' ">
        <img src="/images/zoomengine/tinyimage-2.jpg" alt = "Thumbnail 3"/></a>
    
    </body>
</html>

Дальше таблица поддерживаемых еффектов:

Parameter	Description (from V1.0.0)	Default Value
zoomWidth	The width of the zoom window in pixels. If 'auto' is specified, the width will be the same as the small image.	'auto'
zoomHeight	The height of the zoom window in pixels. If 'auto' is specified, the height will be the same as the small image.	'auto'
position	Specifies the position of the zoom window relative to the small image. Allowable values are 'left', 'right', 'top', 'bottom', 'inside' or you can specifiy the id of an html element to place the zoom window in e.g. position: 'element1'	'right'
adjustX	Allows you to fine tune the x-position of the zoom window in pixels.	0
adjustY	Allows you to fine tune the y-position of the zoom window in pixels.	0
tint	Specifies a tint colour which will cover the small image. Colours should be specified in hex format, e.g. '#aa00aa'. Does not work with softFocus.	false
tintOpacity	Opacity of the tint, where 0 is fully transparent, and 1 is fully opaque.	0.5
lensOpacity	Opacity of the lens mouse pointer, where 0 is fully transparent, and 1 is fully opaque. In tint and soft-focus modes, it will always be transparent.	0.5
softFocus	Applies a subtle blur effect to the small image. Set to true or false. Does not work with tint.	false
smoothMove	Amount of smoothness/drift of the zoom image as it moves. The higher the number, the smoother/more drifty the movement will be. 1 = no smoothing.	3
showTitle	Shows the title tag of the image. True or false.	true
titleOpacity	Specifies the opacity of the title if displayed, where 0 is fully transparent, and 1 is fully opaque.	0.5