https://github.com/klml/imgspread

imgspread spreads a thumbnail to a bigger image inside the text and pans the surround or beneath text
https://github.com/klml/imgspread

Last synced: 15 days ago
JSON representation

imgspread spreads a thumbnail to a bigger image inside the text and pans the surround or beneath text

• Host: GitHub
• URL: https://github.com/klml/imgspread
• Owner: klml
• License: mit
• Created: 2014-05-19T16:55:47.000Z (over 10 years ago)
• Default Branch: master
• Last Pushed: 2021-10-24T19:35:54.000Z (about 3 years ago)
• Last Synced: 2024-10-31T18:08:06.149Z (2 months ago)
• Language: HTML
• Homepage: http://klml.github.io/imgspread/
• Size: 9.77 KB
• Stars: 1
• Watchers: 3
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
imgspread

=========

imgspread spreads a thumbnail to a bigger image inside the text and pans the surrounding or beneath text.

[Demo](https://klml.github.io/imgspread/) and kind a [Gallery](https://klml.github.io/imgspread/gallery.html).

Imho an unobtrusive alternative to [modal window](https://en.wikipedia.org/wiki/Modal_window) like [fancyboxing](https://fancybox.net).

## Usage

```

    window.addEventListener("load", function () {

        imgspread("");

    });

```

Use custom CSS-class:

```

    window.addEventListener("load", function () {

        imgspread("my_custom_class");

    });

```

## Similar approach

* [version for mediawiki](http://regionales-wirtschaften-wiki.de/Kleinstkraftwerke) with [srcset attribute](http://www.w3.org/html/wg/drafts/srcset/w3c-srcset/), script [on wikipedia](https://de.wikipedia.org/wiki/Benutzer:VanGore/common.js).

## Usability

Usability pros and cons:

+ there is __no modal window__, so the main window still __can__ be used and seen. 

+ if there is no JS: you get an __unobtrusive__ thumb and link to the big version

- __word wraps__ in continuous text changes every time you zoom in a image

Has anybody similar approaches? fork or 

## TODO

* srcset

* big image with url logic