iPhone Tutorial Icon CartoonSmart Blog CartoonSmart Affiliate Program Free Tutorial Videos CartoonSmart CartoonSmart Discounts About Contact CartoonSmart How to Optimize Flash for iOS or Android Export
Tutorials
Freebies and Demos iPhone/iPad tutorials iOS App Starter Kits PhoneGap Tutorials Dreamweaver and  HTML5 tutorials Toon Boom Tutorials Illustrator tutorials Animation and Motion Tutorials
Just Flash Tutorials
Flash to Android or iOs tutorials Actionscript 3 tutorials Gaming Drawing Tutorials Animation Tutorials Interface Design Tutorials Actionscript 2 tutorials MySQL
 
cartoon templates
Flash Templates
 
New Stuff
Your Cart
 
Easy to setup with Xml
HTML 5 Zoomer component

Give Every Image in a Series the Spotlight
With This HTML5 Slideshow Gallery


Component compatibility: requires no software



Make Detailed Images Easily Zoom-able and Interactive!

Runs incredibly well on the iPad too! Check out this demo video on YouTube.






Curious About What's Customizable? Read the Features List...

Fully XML driven for smooth installing and maintaining.

Support for really large image files tested successfully with 6000 x 6000px .jpg

Support for multiple instances in the same page: you may have as many Zoom Components as you want in the same page , each one of them with a different image and different settings.

RESIZABLE You can specify your own canvas width and height.

Completely customizeable theme, background color and graphics (buttons, scrollbar, markers, mini map etc) can be modified and positioned anywhere with ease. The interactive elements are actually images (.png or .jpg) so you can replace them with your own graphics, which can be any size or shape, so the look of this component can be completely modified. Please make sure to view all the samples in the live preview for inspiration and some already-made variations of the interactive elements

Highly customizable image preloader, you can change the radius, thickness and color theme.

The initial zoom percentage and the zoom factor can be set
, so you can zoom the image as much as you like just by changing a parameter in the XML file.

The speed of zooming and the speed of movement in response to the buttons, scroll bar (or mouse wheel) or to gestures on mobile devices can be adjusted.

Scrollbar for zooming the image in and out (can be enabled or disabled).

All the buttons can be enabled or disabled, including the scrollbar and mini map, Navigation / controls (up, down, left, right, zoom in, zoom out, reset, maximum size, on/off ) buttons can be toggled.

On / Off button for controls: with this feature the visitor will be able to hide the navigation controls in order to see the image behind the controls and the On /Off button can be pressed again in order to make the controls visible.

Small image navigator (mini map) is completely customizable: the navigator size position, border size, border color, border opacity, border radius can be set (can be enabled or disabled).


Markers and/or tool tips: unlimited number of markers is supported, the position of these markers is set easily in the XML file. When a marker is pressed or touched the image will zoom to the point in which the marker is positioned and align the zoom point to center. On mobile devices when a marker is touched and held for a second the tool tip will appear if it is not disabled.

The markers can be used without the tool tips popup box, and the tool tips can be disabled individually for each marker.

Markers zooming factor percentage: this can be set individually for each marker, for example a 50% (zooming factor percentage) will be half of the initial zoom factor, this means that by setting a zooming factor percentage at 50% the image will be zoomed 50% (half) of the initial zoom factor and align the zoom point to center. Basically you can add custom zoom levels for each marker, this is a really handy feature.

The tool tips are highly customizable: the size can be set, the content of the tool tips can include any HTML content , you can add anything you like in them (images, text, div, p , li ...) and also you can style the content with CSS.

The entire Zoomer Template can be used inside an HTML page or be opened in a lightbox window just like the jQuery plugin.



More examples of this gallery template






Interested in setting this up? Check out this video guide...



Not seeing the video above, click here to watch it on Vimeo







  40
Purchase this Tutorial
Paypal Cards2CO
Purchase With a Credit Card and receive download links minutes after the order
With the Personal License you can create an unlimited number of galleries for yourself or your company. You can not resell, redistribute or repackage the source code under any circumstances.
 
  25
Purchase this Tutorial
Paypal Cards2CO
Purchase With a Credit Card and receive download links minutes after the order

With the Developer License you can use this template as a freelance developer . You may upload the work-for-hire modifcations of the template to your client's website. You are not allowed to resell, redistribute or repackage the source code under any circumstances aside from establishing a work-for-hire relationship with a client, where you (not the client) performs modifications to the code.
 






CartoonSmart Affiliate Program Binpress 1&1 Hosting Web and Animation Design for Hire
Bulk Discount on CartoonSmart Tutorials





Once-a-Month Newsletter Sign-Up...


Email: