.NET Image Tiger Component (Images and Media)

Purchase $10.00

“.NET Image Tiger Component” is an advanced image manipulation component for .NET that will help you to complete most of the image manipulation needs.
It will help you with all the basic image handling like resize, crop, rotate, scale, flip, save in different formats, but in addition it comes with many fascinating image effects like jitter, sharpen, blur, watermark, brightness, contrast, sepia, emboss, EXIF data reading, and many more.

You will get a perfect and easy help with many examples so that you can start using “Image Tiger” within a few minutes.

Megazoom Image Viewer (Images and Media)

Purchase $10.00

What is Megazoom ?

The Megazoom plugin is a powerful, versatile, easy to use and customize image navigator for displaying large images prepared for showcasing products (high resolution product images, e.g. clothes, cars, technical schemes etc), displaying maps, and any other images, with its zooming, panning, dragging, navigation controls, scrollbar, zoom buttons,and highly customizable markers.It has a responsive layout making it perfect for any type of page layout.

The Megazoom plugin is mobile optimized running great on iOS (iPad, iPhone), Android and Windows8 mobile devices and of course it works on every modern browser and older browsers like IE7 and IE8. We have tested it on IPAD3 and on a SAMSUNG GALAXY S3 and it runs great on both devices, follow the links to view this demos. Video demonstration on Android or Video demonstration demo on IOS.

The Megazoom plugin can be used in any type of HTML page including Wordpress, at this link there is a demo page running in Wordpress (Please note that this is NOT a Wordpress plugin!, the Megazoom must be installed manually with html code and the images uploaded with a ftp client, we have inclulded a tutorial about how to install it in Wordpress.

We have also included full documentation, examples pages and PSD files along with five skins.

Main features

• Tons of options (check them out in our live previews).


• Easy to use and install.


• Fully Responsive & Mobile Optimized (Smartphones & Tablets).


• Fast CSS3 & JavaScript engine with fall back on CSS1 for older browsers like IE7 or IE8 (exceptional performance!).


• Responsive layout.


• Three dispay types: responsive, fullscreen and lightbox.


• Support for large image resolution, we have made successful tests with images up to 6000px width and/or height.


• The zoom factor(maximum zoom level) and start/initial zoom factor (initial zoom level) can be specified.


• The animation zoom speed and animation pan speed. can be set.


• Double clik zoom and double clik zoom factor (optional).


• Mouse wheel support on desktop.


• Mouse drag on desktop or touch drag on mobile.


• Gestures event support on mobile, the image can be zoomed with two fingers!.


• Keyboard support (optional).


• Animated preloader, the preloader text can be modified.


• Navigator window (optional).


• Complete control buttons bar with buttons.


• All buttons are optional, the order of buttons can be set as you wish and they can be easily removed if one or more are not needed. Below there is an image illustrating some possible buttons order scenarios.



• Pan buttons (optional).


• Zoom in/out buttons plus scrollbar(optional)


• Hide / show markers button (optional)


• Info window button for showing a detailed custom made window which supports unlimited html content (optional).


• Hide / show controller button.


• Fullscreen button (optional)


• Customizable buttons tooltips, the buttons tooltips text can be modified with ease based on the presented product type (please note that the buttons tooltips are optional).


• Awesome markers / hotspots support! Three hotspots types (link, small info window and detailed info window) allowing to display information about the product on specific regions. The markers / hotspots can be set to be displayed only after a specified zoom factor.


• The markers / hotspots can be of any size or shape and they can vary, for example if you want to add three link type hotspots each of them can have a different size or graphics, this applies to all markers/hotspots types. The markers also have support for animated gif.


• Built in tool for finding the correct position of the marker / hotspot on an image Basically this tool allows to move a white box over the image and displays the current position and zoom factor this way is easy to set a marker over the image. Please note that the white box info will update even if the image is zoomed offering fine tune control. Below there is an image to ilustrate this tool.



• Customizable custom right click menu (optional). Below there is an image to ilustrate this.



• Five awesome skins along with the .psd files included (check them out in our live previews).
  
• Detailed Documentation included!.


• Examples files for each skin and display type included, this way the html can be copied and pasted into your html page!.


• Many others features, all of them are explained in details in the documentation files.

Special notes

The gestures events only work on IOS (Ipad and Iphone) the other operating systems dose not support gestures events.

Using the up and down keyboard arrows is also scrolling the browser if the keys are hold, this is something that can’t be prevented, the browser does not allow it. This behavior only applies if the display type is responsive or lightbox.

Mobile devices operating systems are rasterizing the image, this means that if an image has 6000px in width the operating system will reduce the width based on it’s limits.

Image cropper & Uploader jQuery plugin (Images and Media)

Purchase $10.00

Note about support: all support requests about related to “Image cropper” are answered only in comments or on email.

I look forward to your comments on the work of the plugin

• With plugin attached PHP script with an example image save


• I also plan to make such a plugin specially for WordPress and for other similar CMS

Plugin’s performance capabilities

The Image Cropper Plugin is created for a more convenient cropping of an image in a browser before sending it to the server.

1. Plugin allows to crop large-size images that do not fit your screen.


2. Plugin allows to set a necessary size of an image, e.g. 400×300


3. It is possible to switch on or off multiloading of files, it allows to upload one image or several images at a time.


4. It allows to send extra $_POST data to the server together with loading of an image.


5. It is possible to drag files on the loading pushbutton.


6. It allows to set a max size of an image by width or by height.


7. Plugin allows to set your own styles at hover or focus

How work the other plug-ins download and cropping images?

1. Upload photos to the server using the standard boot


2. After uploading photos you can meet plugin that allows you to crope the image but
   it does not cut it on the fly(immediately) and finds coordinate X and Y, the width and
   height and sends them back to the server and the server that had received the data
   (x,y,width,height) loads the images into the memory, checks it, cut it and than saves and
   gives the results of the work to the browser.

How Image cropper works?

1. Call the plug on the block, for example Upload image You
   can also drag image and throw them into the block if included the parameter drop: true
   when plugin is initializing.


2. If the crop: true then after the image selection screen appears window with proposal to
   mark necessary area and cut it, I want to note that the image will not load, it has loaded
   into the browser from your computer and will not send.


3. For your convenience it is made two fields for width and height, you can point width and
   height you need into them.


4. Mark the area you need on the photo and click Cut than the selected area with photowith
   other parameters ( tipe, size…) will send as a view POST request to the address you had
   indicated , but if you will click Ignore the image will send without cutting, that is to say
   in the whole format.


5. Server receives incoming data and stores your image in the format you want.

Additions:

- want you to pay attention if the image is very large it is reduced to the available size
of the window your web browser but the size of the image when it is cutting remains
unchanged it allows you to work with large formats, for example: 6000×4000.

- Also the system with the indication of the maximum size of the photo realized in the
plagin, for example, you want to limit your users with upload images no more than
1200px in width, than you should point the parameter maxWidth: 1200 plugin will check
the image size itself, and if it is more you specified, the image will automatically reduce
proportionally without losing of the quality, to 1200 in width.

Example:
you specified maxWidth: 1200 user loads the image in size200px width and height to 1600px
Eventually the image will reduce without losing of quality to the size of width 1200px
height: 874px, great, is not it? The same principle will work on maxHeigh, you can specify
two parameters at once and maxWidth and maxHeight.
Plugging s parameters:

v2.0 – New option

1. ratio: [‘1/1’, ‘4/3’] – can set the aspect ratio selection (You can change the cropping)

v1.0 – Basic settings

1. url: ’/upload.php’ – indicates the way the data will be send to


2. name: ‘file’ – is responsible for the name of $_POST variable, e.g. php: $_POST[‘file’]


3. multiple: true – permits or forbids loading of more than 1 file


4. data: {} – sends additional data with the cropping of an image, format json for example id: 1


5. drop: true – permits drag&drop of files


6. crop: true – allows cropping of images


7. maxWidth: false – is responsible for a max size of an uploaded image, e.g. if you set 1200 and the original size is 1600, an image will shrink proportionally untill the size of 1200 by width.


8. maxHeight: false – is responsible for a max size of an uploaded image, e.g. if you set 1200 and the original size is 1600, an image will shrink proportionally untill the size of 1200 by height.


9. hoverClass: ‘hover’ – is the category of CSS styles that is activated when is hovered upon.


10. focusClass: ‘focus’ – similarly to hoverClass but is actived when is focused at.


11. onChange: – callback function is activated when you choose an image, it calls back 3 parameters, file – the file itself, ext – the file extention, render – base64 code of an image, it is used in the src attribute beside <img /> tag.


12. onSubmit: – callback function is activared when you confirm cropping of an image, it calls back the same parameters as onChange file, ext and render


13. onComplete: – callback function returnes the element – the very element upon which the plugin is summoned, ext – the file extention, response – the server response, render – base64 code of an image.

Image Crop (Images and Media)

Purchase $8.00

jQuery & Canvas Image Crop

A cropper for when you need images to be a specific size. It works using a predetermined aspect ratio. The UI differs from other croppers, here you may drag the image into position and even resize it.

Touchescreen Compatible!

• Works in all the major browsers, including IE8+ and mobile.


• Cropping and resizing is done through Canvas. No backend scripting required.


• Minimal code. Doesn’t require jQuery UI.


• The UI differs drastically from traditional image croppers.


• Idiot-proof. I’ve added precautions to insure the computer illiterate don’t break it. For example, if the image proporations do not scale to the predetermined aspect ratio, then the image will automatically zoom in until it does scale.


• Aspect ratio is easily changable through CSS. You haven’t got to touch any JavaScript.


• Custom styles. The code is barebones, it’s very easy to style.