Loading, please wait...

ARTDESIGN IMAGE RESIZE

SETTINGS

Attributes

data-plugin-ad-image-resize="ad-image-resize"

This attribute is required in order to applied the plugin on the desired element
<img src="Path/To/Images/1.jpg" alt="Image 1" data-plugin-ad-image-resize="ad-image-resize">

data-ad-image-resize-options="Blue, WithOutBorders"

This attribute overwrites the settings of the plugin
<img src="Path/To/Images/1.jpg" alt="Image 1" data-plugin-ad-image-resize="ad-image-resize" data-ad-image-resize-options="Blue, WithOutBorders">

data-ad-image-resize-width="600"

This attribute specifies maximum width of the image (into pixels)
<img src="Path/To/Images/1.jpg" alt="Image 1" data-plugin-ad-image-resize="ad-image-resize" data-ad-image-resize-width="600">

data-ad-image-resize-height="400"

This attribute specifies maximum height of the image (into pixels)
<img src="Path/To/Images/1.jpg" alt="Image 1" data-plugin-ad-image-resize="ad-image-resize" data-ad-image-resize-width="400">

data-ad-image-resize-overlay="true"

This attribute activates Overlay effect
<img src="Path/To/Images/1.jpg" alt="Image 1" data-plugin-ad-image-resize="ad-image-resize" data-ad-image-resize-gray-scale="true">

data-ad-image-resize-scale="true"

This attribute activates Scale effect
<img src="Path/To/Images/1.jpg" alt="Image 1" data-plugin-ad-image-resize="ad-image-resize" data-ad-image-resize-scale="true">

data-ad-image-resize-gray-scale="true"

This attribute activates Gray Scale effect
<img src="Path/To/Images/1.jpg" alt="Image 1" data-plugin-ad-image-resize="ad-image-resize" data-ad-image-resize-gray-scale="true">

Public Methods

Destroy

<script type="text/javascript">
    var ImageResize = $(".ArtDesign").ArtDesignImageResize();
    ImageResize.Destroy();
</script>

Default Options

<script type="text/javascript">
    Global: { // Global settings of the element
        ClassPrefix: "IR_", // Put ClassPrefix on the style of the element in order to prevent a conflict with other styles from external CSS file; Must be string; By default: "IR_"
        Width: 300, // Set the Width; Must be string (px, %, auto); By default: 300
        Height: 200, // Set the Height; Must be string (px, %, auto); By default: 200
        HeightConstant: true, // If it is true it sets height constant; Must be boolean; By default: true
        ParentElementToResize: "body", // Specifies the element to which the image is resized; Must be string; By default: "body"
        Float: "left", // Positions element to the left or right; Must be string (left, right); By default: "left"
        Cursor: "pointer" // Set Cursor style on CSS; Must be string; By default: "pointer"
    },
    BrowserSupport: { // Settings for the browser support
        Chrome: 20, // Indicates the require minimum version of the Chrome browser; Must be integer; By default: 20
        Mozilla: 20, // Indicates the require minimum version of the Mozilla browser; Must be integer; By default: 20
        Opera: 20, // Indicates the require minimum version of the Opera browser; Must be integer; By default: 20
        Safari: 5, // Indicates the require minimum version of the Safari browser; Must be integer; By default: 5
        MSIE: 9, // Indicates the require minimum version of the MSIE browser; Must be integer; By default: 9
        MSEdge: 12 // Indicates the require minimum version of the MSEdge browser; Must be integer; By default: 12
    },
    FloatLeft: { // Settings for the FloatLeft of the element
        Margin: "7px 14px 0 0", // Set the Margin (top, right, bottom, left); Must be String; By default: "7px 14px 0 0"
        BorderWidth: "2px 2px 2px 2px", // Set the BorderWidth (top, right, bottom, left); Must be String; By default: "2px 2px 2px 2px"
        BorderStyle: "solid", // Set the BorderStyle; Must be String; By default: "solid"
        BorderColor: "#6488AA", // Set the BorderColor; Must be String; By default: "#6488AA"
        BorderRadius: "0%" // Set the BorderRadius; Must be String; By default: "0%"
    },
    FloatRight: { // Settings for the FloatRight of the element
        Margin: "7px 0 0 14px", // Set the Margin (top, right, bottom, left); Must be String; By default: "7px 0 0 14px"
        BorderWidth: "3px 2px 2px 2px", // Set the BorderWidth (top, right, bottom, left); Must be String; By default: "3px 2px 2px 2px"
        BorderStyle: "solid", // Set the BorderStyle; Must be String; By default: "solid"
        BorderColor: "#6488AA", // Set the BorderColor; Must be String; By default: "#6488AA"
        BorderRadius: "0%" // Set the BorderRadius; Must be String; By default: "0%"
    },
    NoFloat: { // Settings for the NoFloat of the element
        Margin: "7px 0 0 0", // Set the Margin (top, right, bottom, left); Must be String; By default: "7px 0 0 0"
        BorderWidth: "0 0 20px 0", // Set the BorderWidth (top, right, bottom, left); Must be String; By default: "0 0 20px 0"
        BorderStyle: "solid", // Set the BorderStyle; Must be String; By default: "solid"
        BorderColor: "#6488AA", // Set the BorderColor; Must be String; By default: "#6488AA"
        BorderRadius: "0%" // Set the BorderRadius; Must be String; By default: "0%"
    },
    GrayScale: { // Settings for the GrayScale of the element
        GrayScaleSpeed: 0.5, // Set the Gray scale speed; Must be integer or decimal; By default: 0.5
        GrayScale: false, // If it is true it activates the gray scale; Must be boolean; By default: false
        Normal: 1, // If it is 1 in this position the image is black and white; Must be integer; By default: 1
        Hover: 0 // // If it is 0 in this position the image is colorful; Must be integer; By default: 0
    },
    Scale: { // Settings for the Scale of the element
        ScaleSpeed: 0.5, // Set the scale speed; Must be integer or decimal; By default: 0.5
        Scale: false, // If it is true it activates the scale; Must be boolean; By default: false
        ScaleNormal: 1, // Set the scale of normal position; Must be integer or decimal (more than 1); By default: 1
        ScaleHover: 1.04 // Set the scale of hover position; Must be integer or decimal(more than 1); By default: 1.04
    },
    Overlay: { // Settings for the Overlay of the element
        AnimationSpeed: 0.5, // Set the AnimationSpeed; Must be decimal; By default: 0.5
        Overlay: false, // If it is true, it sets the following settings for Overlay; Must be boolean; By default: false
        Element: "
", // Set the HTML structure of the Overlay; Must be string; By default: "
" Background: "rgba(255, 255, 255, 0.7)", // Settings for Background at rgba Icon: { // Icon settings Icon: true, // If it is true it sets the icon IconCode: "icon-link-1", // Set the Icon from the ArtDesignIcons PlugIn; Must be string; By default: "icon-link-1" FontSize: "40px", // Set the size of the font; Must be string (px, %); By default: "40px" Color: "#6488AA" // Set the color; Must be string; By default: "#6488AA" } } </script>