Loading, please wait...

ARTDESIGN IMAGE RESIZE

Description

ArtDesign Image Resize is a JavaScript PlugIn, which resize images, centered the new content automatically and includes various effects - Overlay, Scale, GrayScale
Responsive (Resize to View Effect)
Support images with different resolution and types
Full support of all advanced Web browsers
Full style control only with JavaScript, without using CSS
Full style control - Size (width, height), Margin and Padding, Background (background color), Border (width, color, radius), Icon (font, size, color)
5 predefined styles
Set the style with attributes
Set multiple styles, and each of them overwrites the previous
Opportunity to define an unlimited number of own styles
Integration with ArtDesign Icons
Hover Animations
Public Methods: Destroy

Demo

Image 1 Image 1
Image 1
Image 1
Image 1

HTML

<div class="ArtDesign">
    <img src="Path/To/Images/1.jpg" alt="Image 1" data-plugin-ad-image-resize="ad-image-resize">
    <img src="Path/To/Images/1.jpg" alt="Image 1" data-plugin-ad-image-resize="ad-image-resize" data-ad-image-resize-width="150" data-ad-image-resize-height="150">
    <img src="Path/To/Images/1.jpg" alt="Image 1" data-plugin-ad-image-resize="ad-image-resize" data-ad-image-resize-overlay="true">
    <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="200" data-ad-image-resize-scale="true">
    <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="200" data-ad-image-resize-gray-scale="true">
</div>

JavaScript

<script type="text/javascript">
    $(document).ready(function() {
        $(".ArtDesign").ArtDesignImageResize();
    });
</script>