Scalize - jQuery Point Scale

Is a responsive scaling position with jquery, you can build awesome your project witch scalize

Follow @adamnurdin01 Star Download

File Structure

Include scalize.css and scalize.js into your project

scalize/
├── css/
│   ├── scalize.css
│   ├── scalize.min.css
│   sass/
│   ├── animation.scss
│   ├── css3-mixins.scss
│   ├── responsisve.scss
│   ├── scalize.scss
│   ├── variable.scss
└── js/
    ├── scalize.js
    └── scalize.min.js   

Basic

Place it on inside tag <body>

<div class="scalize">
    <img src="img/img01.jpg" alt="">
    <a class="item-point" data-top="730" data-left="227"></a>
    <a class="item-point" data-top="380" data-left="862"></a>
    <a class="item-point" data-top="470" data-left="1550"></a>
</div>

Javascript
$(document).ready(function(){
    $('.scalize').scalize({
        selector: '.item-point',
        styleSelector: 'circle'
    });
}); 

Options

styleSelector circle, square, content
animationSelector pulse, pulse2, marker
animationPopoverIn Select Animate Daneden
animationPopoverOut Select Animate Daneden
onInit Initialize scalize event
getSelectorElement

e => element of selector

function(e){
    // Selector On Click
    console.log(e.data('top'));
}    
getValueRemove

e => element of selector

function(e){
    // Selector On Remove
    console.log(e.data('value'));
}    

Change Log

v.1.0

Credit

Looking for awesome design ?


Follow @adamnurdin01 Star