Display an image in a responsive imagebox without jQuery.

Related tags

Learning resource gallery imagebox
Overview

Documentation

ImageBox latest version 1.3.0

Include this files:

<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/tobiasroeder/[email protected]/dist/imagebox.min.css">
<script src="https://cdn.jsdelivr.net/gh/tobiasroeder/[email protected]/dist/imagebox.min.js"></script>

If IE support is needed:

<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/tobiasroeder/[email protected]/dist/imagebox.min.css">
<script src="https://cdn.jsdelivr.net/gh/tobiasroeder/[email protected]/dist/imagebox.ie.min.js"></script>

Currently only version 1.2.0 available

How it works:

add to the <img> tag the following attributes:

  • data-imagebox (single image)
  • data-imagebox="gallery" (gallery)
  • data-imagebox-src="img_big.jpg" (voluntary, else it use the src attribute)
  • data-imagebox-caption="Lorem ipsum"

Small feature for the caption:

  • data-imagebox-caption="{loc} Lorem ipsum" (the {loc} will display an small location icon in the beginning)

Multiple galleries:

  • data-imagebox="gallery-ID" (each image with this attribute and this name is bundled to a gallery)

Options:

Parameter Type Default Info
info bool false Display an info about the ImageBox in the console
swipeToChange bool true Change between images in the gallery with a simple swipe (right/left)
swipeToClose bool true Close the ImageBox (single image/gallery) (top/down)
keyControls bool true Esc close ImageBox, ArrowLeft previous image, ArrowRight next image
closeEverywhere bool true Close the ImageBox everywhere (only single image)

Example:

// not available in imagebox.ie.js (Edge and IE)
imagebox.options({
  info: false,
  swipeToChange: true,
  swipeToClose: true,
  keyControls: true,
  closeEverywhere: true
});

Examples:

single image

<img src="img_small.jpg" data-imagebox data-imagebox-src="img_big.jpg" data-imagebox-caption="Lorem ipsum">

gallery

<img src="img_small.jpg" data-imagebox="gallery" data-imagebox-src="img_big.jpg" data-imagebox-caption="Lorem ipsum">

multiple galleries

<!-- Gallery 1 -->
<img src="img/san-francisco.jpg" alt="San Francisco" data-imagebox="g1">
<img src="img/new-york.jpg" alt="New York" data-imagebox="g1">

<!-- Gallery 2 -->
<img src="img/seattle.jpg" alt="Seattle" data-imagebox="g2">
<img src="img/detroit.jpg" alt="Detroit" data-imagebox="g2">

Live example:

An live example can be found on CodePen. You can also play there with the ImageBox around.

Tested in:

Browser Version Known Issues
Safari 14.0.3
Safari (iOS) 14.0
Chrome 89.0.4389.90
Opera 75.0.3969.93
Firefox 87.0
Chrome (Android) 80.0.3987.162 #11
Samsung Internet 13.2.3.2 #11

imagebox.css & imagebox.js (v1.3.0)

Try it yourself

You might also like...

Responsive navigation plugin without library dependencies and with fast touch screen support.

Responsive Nav Responsive navigation plugin without library dependencies and with fast touch screen support. Responsive Nav is a tiny JavaScript plugi

Dec 29, 2022

High performance and SEO friendly lazy loader for images (responsive and normal), iframes and more, that detects any visibility changes triggered through user interaction, CSS or JavaScript without configuration.

lazysizes lazysizes is a fast (jank-free), SEO-friendly and self-initializing lazyloader for images (including responsive images picture/srcset), ifra

Jan 1, 2023

A responsive image cropping tool for React

A responsive image cropping tool for React

This documentation refers to v10. Go to 9.1.1 tag for v9 docs. React Image Crop An image cropping tool for React with no dependencies. CodeSanbox Demo

Dec 21, 2022

Calculating Pi number without limitation until 10k digits or more in your browser powered by JS without any third party library!

Calculating Pi number without limitation until 10k digits or more in your browser powered by JS without any third party library!

PI Calculator Web JS (Online) Calculating Pi number without limitation until 10k digits or more in your browser powered by JS without any third party

Jul 27, 2022

A simple Node.js code to get unlimited instagram public pictures by every user without api, without credentials.

A simple Node.js code to get unlimited instagram public pictures by every user without api, without credentials.

Instagram Without APIs Instagram Scraping in August 2022, no credentials required This is a Node.js library, are you looking for the same in PHP? go t

Dec 29, 2022

🖼 Simple file-upload utility that shows a preview of the uploaded image. Written in TypeScript. No dependencies. Works well with or without a framework.

🖼 Simple file-upload utility that shows a preview of the uploaded image. Written in TypeScript. No dependencies. Works well with or without a framework.

file-upload-with-preview 🖼 Simple file-upload utility that shows a preview of the uploaded image. Written in TypeScript. No dependencies. Works well

Dec 26, 2022

🖼️ Image proxy for Next.js. Makes it possible to use dynamic domains in next/image component.

Next.js Image Proxy Image proxy for Next.js. Makes it possible to use dynamic domains in next/image component. ❔ Motivation This library makes it poss

Dec 1, 2022

A Javascript library that discourages and prevents image theft/download by preventing client ability to retrieve the image.

ProtectImage.js ProtectImage.js is a Javascript library that helps prevent image theft by disabling traditional user interactions to download/copy ima

Aug 18, 2022

Simple JavaScript Library to add parallax image to background-image

Simple JavaScript Library to add parallax image to background-image

Backpax Simple JavaScript Library to add parallax image to background-image Install $ npm install backpax --save Demo Demo page is here Usage If you

Oct 12, 2022
Comments
  • Gallery doesn't work with multiple pages with 1.3.0 version

    Gallery doesn't work with multiple pages with 1.3.0 version

    I'm using your gallery combined to the pagination.js, after your update to the 1.3.0 it doesn't work when switch the page of my gallery. In the first page works great, but when switch page and try to click an image to open it in the gallery appears only the black background with 80% opacity.

    EDIT: I'm seeing in the second "pagination.js" page the imagebox.min.js is not able to update the <body class=""> to <body class="imagebox">; also if select 2sd page and return on the 1th page

    opened by prinkoID 2
  • IE11 error

    IE11 error

    IE11 error SCRIPT438: Object doesn't support property or method 'remove' [and unfortunately, I still need to support IE11] from google search https://stackoverflow.com/questions/18919560/object-doesnt-support-property-or-method-remove Can this be fixed/updated in your code, thanks, Col

    fixed 
    opened by coldes 0
  • Scrollbar is enabled during the gallery mode on the IOS mobile version

    Scrollbar is enabled during the gallery mode on the IOS mobile version

    When the gallery is opening the scrollbar in the mobile version should be locked. Now is possible scroll the page also when the gallery is open. In the Desktop mode is correctly locked. This error is showed only in Sefari mobile with IOS

    opened by prinkoID 0
  • Add fade in-out between the images when navigate into the gallery

    Add fade in-out between the images when navigate into the gallery

    When navigate into the gallery with left and right the next/previous image is fast and create some glitch in some cases (probably only in mobile version)

    bug 
    opened by prinkoID 2
Releases(1.3.0)

  • 1.3.0(Mar 29, 2021)

    New

    • Multiple Galleries
    • Smooth transition between image change
    • A lot more ImageBox options
    • Extended keyboard support
    • Swipe gestures for mobile devices
    Source code(tar.gz)
    Source code(zip)

  • 1.2.0(Mar 20, 2020)

    Update

    • source code (ImageBox is now an object in imagebox.js, not imagebox.ie.js more)
    • if you close the ImageBox, it's only be hidden and not removed anymore
    • data-imagebox-description is called data-imagebox-caption now

    New

    • IE11 and Edge Browser support
    • close the ImageBox with the 'Esc' button
    • ImageBox options (display the info in the console)
    Source code(tar.gz)
    Source code(zip)

  • 1.1.0(Apr 11, 2019)

  • 1.0.4(Mar 31, 2019)

  • 1.0.3(Mar 1, 2019)

    Update

    • description font family is 'Helvetica Neue' now
    • description font size is '1.2em' now
    • description size in smaller screens is less
    • fade out animation is smoother

    New

    • syntax to use ImageBox (Important! v1.0.3 is not compatible with v1.0.2)
    • beautify your description with an location icon (see Documentation)
    Source code(tar.gz)
    Source code(zip)

  • 1.0.2(Feb 16, 2019)

  • 1.0.1(Feb 15, 2019)

  • 1.0.0(Feb 15, 2019)

Owner
Tobias Röder
I'm a web developer and I love open source.
Tobias Röder
GitHub https://tobiasroeder.github.io/ImageBox
this is a single-page web application. we built a book website where the user can add , remove and display books. we used modules to implement these functionalities. also, we used the Date class to display the date and time.

Awsome Books In this Project, we have built A Books websites. Built With ?? HTML CSS javascript Git & Github Live Demo Here you can find the live Demo

Nedjwa Bouraiou 10 Aug 3, 2022
A public board for all the Computer Society and Students to display their profile. An online year-book for you to display your profile in the most creative manner

Student's Yearbook by IEEE Computer Society Student's yearbook is an open-source project which intends to dispaly the students who will be graduating

IEEE Computer Society 11 Dec 18, 2022
optimize image & upload file to cloud as image bed with tiny image automic.

Rush! 图片压缩 & 直传图床工具 这是一个兴趣使然的项目, 希望 Rush! 能让这个世界的网络资源浪费减少一点点 下载 Downloads 获取最新发行版 功能 Features 拖拽批量压缩图片, 支持格式 jpg/png/gif Drop to optimize, jpg/png/gif

{ Chao } 3 Nov 12, 2022
Responsive Tabs is a jQuery plugin that provides responsive tab functionality.

Responsive Tabs is a jQuery plugin that provides responsive tab functionality. The tabs transform to an accordion when it reaches a CSS breakpoint. You can use this plugin as a solution for displaying tabs elegantly on desktop, tablet and mobile.

Jelle Kralt 537 Dec 8, 2022
A jquery plugin that makes images truly responsive, without sacrificing anyone's face. Give it more stars!

Responsify.js A jquery plugin that makes images truly responsive, without sacrificing anyone's face :D When images are used in a responsive container

Wenting Zhang 1.3k Dec 14, 2022
Responsive tabs-to-accordion script without jQuery, written using pure JavaScript

vanilla-tabs Responsive tabs-to-accordion script without jQuery, written using pure JavaScript Author Dmytro Kudleichuk LinkedIn GitHub Online Demo Se

Dmitriy Kudleichuk 7 Dec 20, 2022
Freewall is a cross-browser and responsive jQuery plugin to help you create grid, image and masonry layouts for desktop, mobile, and tablet...

Freewall Freewall is a cross-browser and responsive jQuery plugin to help you create many types of grid layouts: flexible layouts, images layouts, nes

Minh Nguyen 1.9k Dec 27, 2022
Plain JavaScript version of jQuery's slideToggle(), slideDown(), & slideUp(), but does not use display: none.

dom-slider It works like jQuery's slideToggle(), slideDown(), & slideUp(), but does not use display: none. Uses CSS3 transitions and element.scrollHei

Brenton Cozby 56 Dec 27, 2022
A jQuery number display

For a React version see react-split-flap-effect Flapper Project Homepage Live Demo A jQuery number display Flapper is a jQuery plugin that replicates

Justin Kerr Sheckler 186 Nov 23, 2022
An npm package with Tailwind CSS utility classes for creating responsive grid columns without media queries using auto fit.

Grid Auto Fit for Tailwind CSS A plugin that helps you create a responsive grid layout in Tailwind CSS without using media queries. It uses the auto-f

Thirus 80 Dec 28, 2022