CodeCanyon Image HD Retina & Android Image Enhancer 4030026

CodeCanyon Image HD Retina & Android Image Enhancer 4030026

CodeCanyon Image HD Retina & Android Image Enhancer 4030026
JavaScript \ Image \ Media
Mobile \ Retina \ Xhdpi \ Images \ HDPI \ Android \ Droid



JavaScript - Image HD Retina & Android Image Enhancer 4030026 by sublantic @ CodeCanyon

JavaScript \ Image \ Media

Last Update: 13 February 13; Compatible Browsers: Safari, Chrome; High Resolution: Yes; Files Included: JavaScript JS, HTML, CSS.

- About

This is just a simple script to replace your standard resolution images with higher res (retina, hdpi, etc.) images based on the platform and screen resolution. I’ve seen lots of solutions for handling retina images, but little to nothing about serving the nice crisp images to the higher density Android devices, so I thought I’d write something to handle both.

It’s pretty plug & play, but I’d also tried to make super configurable. By default, you just have to add ImageHD.run() on page load, and it will update all of the images with a higher resolution version on any devices that support it, based on the default file structure.

image.png (original image)
[email protected] (retina image)
hdpi/image.png (hdpi image)
xhdpi/image.png (xhdpi)
You can easily configure it to either grab a new image by appending the type to the original image (i.e. image.png becomes [email protected] for retina) or grab an image with the same name from a different directory (i.e. image.png becomes xhdpi/image.png for XHDPI android devices). You can also tell it to always replace all images, or only replace images with a given class name.

It’s not fully tested yet, so there may still be some issues, but so far it seems to work well. But, let me know if you find any bugs, or have any suggestions for improvements.

- Usage

- Replace Images with proper resolution
All you need to do to replace all your images with nice retina/hdpi version is load the script and run this line of code.

`ImageHD.load();`

See below for configuration options

- Naming conventions

This script assume a few standard file naming conventions, but if that’s not how you roll, you can update it in the config. Assuming you have a file “logo.png” that you load by default, the script will load “[email protected]” for retina devices, “drawable-hdpi/logo.png” for HDPI Android devices, “drawable-xhdpi/logo.png” for XHDPI Android devices, etc.

- Get current screen density

If you would like to get the current screen density, it’s as simple as.

`ImageHD.density();`

- Replace images with correct resolution

Let’s say you’ve coded your site for MDPI devices, but want to serve HDPI images to higher density devices. Simply add a class of ’.android-dpi’ to any images you want to update, and the script will take care of
the rest. The only rquirement is that the images should have the dpi in the name so it knows what images to use. For example name your logo “site-logo-mdpi.png” and it will be replaced with “site-logo-hdpi.png” on hdpi device, “site-logo-xhdpi.png” on XHDPI devices, and so on.

- CONFIG OPTIONS

- class_name
This allows you to only update images with a certain class name. Set to false to replace all images

- method
‘dir’ => get same image name from this dir | ‘append’ => append to image name in same dir || ‘auto’ => uses dir for android & append for ios

- set_dimensions
This will set an explicit width/height on all updated images to prevent image enlargement on any images that don’t have dimensions set.

- android_dir_append
By default, the script will check for a directory with the same name as the current density, for example it will check “hdpi/image.png” on hdpi devices. If you want to prepend a value to that (for example if you’re dropping in drawables from an android project) you can can set this to “drawble-” and it will load “drawable-hdpi/image.png”.

- ios_dir_append
It’s less likely that you will want to change this, but this has the same functionality as android_dir_append, but targeted at ios devices.

- android
A JSON object of android screen densities you want to target. If theres a density you don’t want to update, set it to false (by default, we assume you’re using mdpi as a baseline and only replace hdpi & xhdpi images)

- retina_droid
If want to serve the same iOS @2x images to XHDPI devices, set this to true.

- autoload
Set this to true and ImageHD will auto run once the dom has loaded, without the need to explicitly call ImageHD.run

- debug
set true to log what’s happening in the console.

PHP Map + Location Plugin; PHP Video Plugin; PHP Twitter Plugin; PHP Image Plugin; PHP Bit.ly Plugin; Dweamer - Dreamweaver Theme Builder.

Keywords: 2x, HDPI, android, droid, hd, images, ios, mac, mobile, mobile web, retina, web, xhdpi.



Tags: Mobile, Image, Android, Retina, Xhdpi, Images, Droid

Premium CodeCanyon Image HD Retina & Android Image Enhancer 4030026 WordPress Themes, Website Templates, Mobile Themes, Flash Templates & Scripts from creative professional designers. Full details of CodeCanyon Image HD Retina & Android Image Enhancer 4030026 for digital design and education. CodeCanyon Image HD Retina & Android Image Enhancer 4030026 desigen style information or anything related.

Comments:

Name:*
E-Mail:*
Add Comments:
Enter Code: *