All Projects → NikxDa → Ambient

NikxDa / Ambient

Licence: mit
Lightweight ambient light javascript library for HTML image and video elements

Programming Languages

javascript
184084 projects - #8 most used programming language

Projects that are alternatives of or similar to Ambient

Isobmff
C++ Library for ISO/IEC 14496-12 - ISO Base Media File Format (QuickTime, MPEG-4, HEIF, etc)
Stars: ✭ 157 (+685%)
Mutual labels:  library, image
Landscapist
🍂 Jetpack Compose image loading library which can fetch and display network images using Glide, Coil, and Fresco.
Stars: ✭ 264 (+1220%)
Mutual labels:  library, image
Media Watermark
GPU/CPU-based iOS Watermark Library for Image and Video Overlay
Stars: ✭ 170 (+750%)
Mutual labels:  library, image
Ptimagealbumviewcontroller
"Image Album" — or "Photo Album" if you like that better — View( Controller) for all crazy iOS developers out there...
Stars: ✭ 199 (+895%)
Mutual labels:  library, image
React Native Blurhash
🖼️ A library to show colorful blurry placeholders while your content loads.
Stars: ✭ 430 (+2050%)
Mutual labels:  library, image
Silicompressor
A powerful, flexible and easy to use Video and Image compression library for Android.
Stars: ✭ 1,081 (+5305%)
Mutual labels:  library, image
Slideimageview
Simple and convenient library that allows you to slide images through a view.
Stars: ✭ 227 (+1035%)
Mutual labels:  library, image
Imageviewer.swift
An easy to use Image Viewer that is inspired by Facebook
Stars: ✭ 1,071 (+5255%)
Mutual labels:  library, image
Ptshowcaseviewcontroller
An initial implementation of a "showcase" view( controller) for iOS apps... Visualizes images, videos and PDF files beautifully! (by @pittleorg) [meta: image, photo, video, document, pdf, album, gallery, showcase, gallery, iOS, iPhone, iPad, component, library, viewer]
Stars: ✭ 395 (+1875%)
Mutual labels:  library, image
Kiimagepager
The KIImagePager is inspired by foursquare's ImageSlideshow, the user may scroll through images loaded from the Web
Stars: ✭ 324 (+1520%)
Mutual labels:  library, image
Bottomsheet Imagepicker
Modern image picker for Android
Stars: ✭ 267 (+1235%)
Mutual labels:  library, image
Louvre
A small customizable library useful to handle an gallery image pick action built-in your app. 🌄🌠
Stars: ✭ 629 (+3045%)
Mutual labels:  library, image
Jvedio
Windows desktop application to manage local video;Support baidu AI, youdao translation;Support FFMPEG video processing;Support multi-database management and statistics;Support skin switching
Stars: ✭ 545 (+2625%)
Mutual labels:  library, image
Handright
A lightweight Python library for simulating Chinese handwriting
Stars: ✭ 634 (+3070%)
Mutual labels:  library, image
Timesheet.js
JavaScript library for HTML5 & CSS3 time sheets
Stars: ✭ 6,881 (+34305%)
Mutual labels:  library
Upload Image To Smms By Automator
Drag your image to me, I will upload it to SM.MS automatically and backup info to iCloud. 只需拖拽图片即可轻松上传至 SM.MS 图床并且复制链接,所有图片和链接信息会被备份至 iCloud 方便后期检索。
Stars: ✭ 15 (-25%)
Mutual labels:  image
Omgl
Pythonic OpenGL Bindings
Stars: ✭ 13 (-35%)
Mutual labels:  library
Printcess
Haskell pretty printing library supporting indentation, mixfix operators, and automatic line breaks.
Stars: ✭ 13 (-35%)
Mutual labels:  library
Eglo
EGL/X11 Abstraction Library for Pocket C.H.I.P
Stars: ✭ 15 (-25%)
Mutual labels:  library
Rxsociallib
分享登录工具库,简洁配置,可配合RxJava/RxJava2使用,支持QQ微信微博
Stars: ✭ 15 (-25%)
Mutual labels:  library
A JavaScript Ambient Light Library. Lightweight. Fast. Portable.

Description

Ambient.js is a lightweight and flexible JavaScript library that adds ambient lighting to any <img> or <video> tags.

Installation

To install ambient, simply download the script file (minified version is recommended) and insert it into your HTML-file, either in the <head>-tag or right before the end of the <body>-tag.

<script type="text/javascript" src="ambient.min.js"></script>

You're all set!

Quick Start

Step 1: Add the data-ambient tag to any img or video element you want.

<img alt="An image" src="https://images.unsplash.com/photo-1466854076813-4aa9ac0fc347" data-ambient>

Step 2: Initialize a new Ambient-instance and call the mount ()-function.

var ambient = new Ambient ();
ambient.mount ();

Output: QuickStart Output

Methods and properties

The following methods and/or properties are available:

// Ambient instance:
Ambient.mount () 	// Wraps all selected images and videos and return an `AmbientElement` array containing every wrapped element
Ambient.unmount () 	// Restores the pre-mounted state
Ambient.elements 	// Array which contains all wrapped elements as `AmbientElement` instances

AmbientElement.disable () 	// Disables the ambient lighting for the selected element
AmbientElement.enable () 	// Enables the ambient lighting for the selected element

Options

When initializing Ambient, there are a few options available for you to modify. Pass any option you want to modify into the constructor:

var ambient = new Ambient (/* options go here */);

The default values are:

{
	insertCSS: true, 		// Controls whether the CSS is auto-inserted into the HTML file
	retainAttributes: true, // If set to true, any argument the image has before being wrapped will be retained and copied onto the new image element
	blur: -1 				// When set to -1, the default value of 45px will be used
}

How it works

When mount () is called, any image or video which has the data-ambient tag set will be padded with a wrapper div and an additional shadow element. Any attribute the image has will be retained and copied over to the new image element. The structure of this wrapper is the following:

<div class="ambient__container"> <!-- This is the wrapper element by which the original image is replaced -->
	<img class="ambient__visible ..." src="..." ...> <!-- The new image element which holds the image -->
	<img class="ambient__shadow" src="..."> <!-- The shadow element, which is used to provide the ambient effect -->
</div>

If you do not want to retain the attributes the image has before Ambient.js kicks in, you may set the retainAttributes option to false when Ambient is initialized.

Styling the image wrapper

When applying styles, keep in mind that the image you are styling is now at a completely different position inside the document. You should now consider styling the outer container, because the image will be styled to completely fill it by default. This is also the reason why, by default, any attribute the original image has will not be retained - it most probably would not make sense to have these styles in the new context.

One might notice that there is no way to differentiate between multiple containers. Ambient.js provides a simple solution for this: When the data-ambient attribute is not only set, but contains a value, the id attribute of the container will reflect this value. This allows for easy control over a big amount of containers.

Note that the container has to have its position property set to relative. If you need to position the image absolutely, you should wrap another div element around it, and set this one to have an absolute position.

Example:

<img src="..." data-ambient="test-image">
<!-- will render -->
<div class="ambient__container" id="test-image">...</div>

Including CSS file manually

By default, Ambient.js comes with a base64 variant of ambiant.min.css, which it will include into the HTML's <head> tag on initialization. If you do not want this to happen, simply set the insertCSS option to false when initializing Ambient.

Since the CSS data is missing when you do this, you will have to include the ambient.min.css file into the HTML manually.

Known issues

  • When initializing Ambient with the retainAttributes option set to false, a call to unmount () will not restore the original attributes.

Contributing

Contributions are always welcome! Feel free to send a pull request, it'll be reviewed and then merged if possible.

License

MIT

Note that the project description data, including the texts, logos, images, and/or trademarks, for each open source project belongs to its rightful owner. If you wish to add or remove any projects, please contact us at [email protected].