jQuery plugin that blows your visitors' retinas

Last update: Jun 30, 2022

Related tags

Overview

Dense.js

Dense is a jQuery plugin for serving retina-ready, high pixel ratio images with ease. Small, ease-to-adapt, yet very customizable and works cross-browser. With Dense, your content images get support for data-ratiox attributes and Apple's retina image naming convention.

Install

Download package or using Bower:

$ bower install dense

Usage

Using Dense is simple. Include the plugin and initialize its method:

<script src="jquery.js"></script>
<script src="dense.js"></script>
<script>
    $('img').dense();
</script>

For more instructions and options see the documentation.

Build

Dense uses Grunt to run tasks. First make sure that you have all base dependencies installed by running npm in the repository's directory:

$ cd dense
$ npm install

After you have installed all dependencies, you will be able to run tasks using Grunt, like releasing, building, publishing and testing:

$ grunt [task]

Where the [task] is one of test, build, jsdoc or release. Tasks jsdoc and release:[major|minor|patch] require Java in addition to the Node.js due to the use of JSDoc3.

Comments

Image preload won't work with cross-domain image
If user is using a CDN or loading external image, the AJAX preload method won't work because of cross-domain issue.

https://github.com/gocom/dense/blob/master/src/dense.js#L211-L224

I think creating an Image element is better here.

$img = new Image(); $img.src = "//preload-me.com/image.jpg";
opened by kayue 1
Fix for issue #3.

Added the appropriate check to the code. Couldn't see any obvious way to test this since there doesn't appear to be a way to hardcode a devicePixelRatio.

opened by rstuart85 0
Improper evaluation of options.skipExtensions
Line 171 performs the following test:

if (!originalImage || devicePixelRatio === 1 || $.inArray(originalImage.split('.').pop().split(/[\?\#]/).shift(), options.skipExtensions))

The $.inArray() method returns -1 when no matches are found and -1 evaluates to true in JavaScript:

> -1 ? 'true' : 'false' > "true"

The net effect is that when you aren't using any data-{ratio}x attributes and hence relying on the src attribute of the img, dense doesn't work because of this failed test. It should be:

if (!originalImage || devicePixelRatio === 1 || $.inArray(originalImage.split('.').pop().split(/[\?\#]/).shift(), options.skipExtensions) !== -1)
opened by rstuart85 0
Replacing a paths into background-image in inline styles?
If I has this:

<img src=…>

It is very similar to this:

<div style='background-image: url(…)'></div>

So let's replace this image paths too!

I have suggested this feature in https://github.com/imulus/retinajs/issues/178 also
opened by Grawl 0
Added check if image is already "dense" and fixed extension skipping

Added check if image is already "dense" (in case the name already ends with “glue”+ devicePixelRatio + ‘x’), skip image with “no-dense” class and fixed extension skipping as inArray returns 0 for SVG check, that was evaluated to false and not skipped.

opened by giano 1

Owner

Jukka Svahn

Backend developer by trade, hobbyist designer and frontend fiddler, self-proclaimed home cook and baker

GitHub http://dense.rah.pw

A jQuery plugin that displays a thumbnail grid expanding preview similar to the effect seen on Google Images.

jQuery GRIDDER 1.4.2 ======= A jQuery plugin that displays a thumbnail grid expanding preview similar to the effect seen on Google Images. We have all

455 Nov 6, 2022

jQuery plugin that makes an image erasable (with mouse or touch movements)

jQuery.eraser v0.5.2 a jQuery plugin that makes an image erasable (with mouse or touch movements) This plugin replaces the targeted image by an intera

327 Oct 27, 2022

jQuery plugin based on raphael.js that allows you to display dynamic vector maps

jQuery Mapael - Dynamic vector maps The complete documentation is available on Mapael website (repository: 'neveldo/mapael-documentation'). Additional

1k Jan 5, 2023

A jquery plugin for comparing two images

jQuery Images Compare A jquery plugin for comparing two images Badges Features compatibility : ie9+ Effort to put appearance via css (easier to skin /

49 Sep 5, 2022

Unite Gallery - Responsive jQuery Image and Video Gallery Plugin. Aim to be the best gallery on the web on it's kind. See demo here:

##Unite Gallery - Responsive jQuery Gallery Plugin Product Link: unitegallery.net This gallery has commercial versions for: WordPress , Joomla! , Pres

531 Oct 24, 2022

jQuery plugin for 'responsive cropping'. Dynamically crop images to fill available space without cutting out the image's subject. Great for full-screen images.

3.2k Dec 30, 2022

⚠️ [Deprecated] No longer maintained, please use https://github.com/fengyuanchen/jquery-cropper

Cropper A simple jQuery image cropping plugin. As of v4.0.0, the core code of Cropper is replaced with Cropper.js. Demo Cropper.js - JavaScript image

7.8k Dec 27, 2022

Nivo Slider - The Most Awesome jQuery Image Slider

Maintainer's Wanted! - Ineterested in contributing regularly to Nivo Slider development? Get in touch Nivo Slider The Nivo Slider is world renowned as

1.2k Dec 24, 2022

DEPRECATED jQuery Responsive Carousel.

YEAH SO THIS IS PRETTY MUCH DEAD, DO YOURSELF A FAVOR AND SWITCH TO tiny-slider Owl Carousel 2 Touch enabled jQuery plugin that lets you create a beau

7.7k Jan 4, 2023

⚠️ [Deprecated] No longer maintained, please use https://github.com/fengyuanchen/jquery-viewer

Viewer A simple jQuery image viewing plugin. As of v1.0.0, the core code of Viewer is replaced with Viewer.js. Demo Viewer.js - JavaScript image viewe

1k Dec 19, 2022

A light wight javascript image viewing plugin with smooth animation and 0 dependence

50 Nov 12, 2022

Doblar - a fully local image converter that runs in your browser

Doblar is a fully local image converter that runs in your browser. Doblar is purely client side: nothing is uploaded to a server or anything like that. All conversions take place in your browser, which means your files never leave your computer.

28 Dec 17, 2022

🦉The jQuery plugin "Stick to me" allows you to create exit-popups on your web page, so you can capture visitors just as they are about to leave.

?? The jQuery plugin "Stick to me" allows you to create exit-popups on your web page, so you can capture visitors just as they are about to leave. How

18 Feb 10, 2022

Easy way to know how many visitors are viewing your Github, Website

Visit Counter Easy way to know how many visitors are viewing your Github, Website Reference for Image query Usage Default Example page It can be your

7 Dec 24, 2022

Lightweight analytics abstraction layer for tracking page views, custom events, & identifying visitors

A lightweight analytics abstraction library for tracking page views, custom events, & identify visitors. Designed to work with any third-party analyti

1.9k Dec 31, 2022

A variety of jQuery plugin patterns for jump starting your plugin development

jQuery Plugin Patterns So, you've tried out jQuery Boilerplate or written a few of your own plugins before. They work to a degree and are readable, bu

1.6k Dec 31, 2022

This is a simple Image popup Jquery plugin. With a very simple configuration, you can show a popup on your webpage. By the way, this plugin works after page load.

Jquery-SingleImagePopup This is a simple Image popup Jquery plugin. With a very simple configuration, you can show a popup on your webpage. By the way

1 Aug 22, 2022