A vanilla js library to show preview images on hover

Related tags

Learning resource javascript hacktoberfest hacktoberfest-accepted
Overview

Hover Preview

A vanilla js library to show preview images on hover, check a Demo here

Please watch 👀 or star 🌟 this repo if you like it.

preview

Getting started

  1. Grab the minified js code, from here.

  2. Add hover-preview.min.js to bottom of your body tag, example -

    <script defer src='/js/hover-preview.min.js'></script>

  3. Add class hover-preview to img tag that should have preview behaviour.

    <img src="poster.jpg" class="hover-preview" />

  4. Add data-preview attribute with pipe(|) seperated preview image urls, example

    <img
  src="poster.jpg"
  class="hover-preview"
  data-preview="preview1.jpg|preview2.jpg|preview3.jpg"
/>

Build minified bundle

$ yarn build
You might also like...

Compare James Webb Space Telescope images to older images.

Compare James Webb Space Telescope images to older images.

How much more powerful is the James Webb Space Telescope when compared to Hubble? Find out! More info Want to help out? CONTRIBUTING.md Blog post with

Jan 3, 2023

Simple jQuery plugin that will allow users to zoom in your images, perfect for product images and galleries.

Simple jQuery plugin that will allow users to zoom in your images, perfect for product images and galleries.

Image Zoom (jQuery) Plugin Simple jQuery plugin that will allow users to zoom in your images, perfect for product images and galleries that is less th

Aug 3, 2022

Easiest 1-click way to install and use Stable Diffusion on your own computer. Provides a browser UI for generating images from text prompts and images. Just enter your text prompt, and see the generated image.

Easiest 1-click way to install and use Stable Diffusion on your own computer. Provides a browser UI for generating images from text prompts and images. Just enter your text prompt, and see the generated image.

Stable Diffusion UI Easiest way to install and use Stable Diffusion on your own computer. No dependencies or technical knowledge required. 1-click ins

Dec 30, 2022

MidJourney is an AI text-to-image service that generates images based on textual prompts. It is often used to create artistic or imaginative images, and is available on Discord and through a web interface here.

MidJourney is an AI text-to-image service that generates images based on textual prompts. It is often used to create artistic or imaginative images, and is available on Discord and through a web interface here.

Midjourney MidJourney is an AI text-to-image service that generates images based on textual prompts. It is often used to create artistic or imaginativ

May 1, 2023

WPPConnect/WA-JS API SERVER is a small api server to provide url preview for @wppconnect/wa-js library

WPPConnect/WA-JS API SERVER WPPConnect/WA-JS API SERVER is a small api server to provide url preview for @wppconnect/wa-js library Our online channels

Aug 11, 2022

Wallpik is a stock images & wallpapers downloading web app built with vanilla JavaScript & Pexels API

Wallpik is a stock images & wallpapers downloading web app built with vanilla JavaScript & Pexels API

Wallpik the stock photos & wallpaper web app (Preview) Wallpik Wallpik is a single page application built with HTML, CSS, Vanilla JavaScript & Pexels

Apr 19, 2022

Vanilla JavaScript plugin for lazyloading images

Lazy Load Remastered Lazy Load delays loading of images in long web pages. Images outside of viewport will not be loaded before user scrolls to them.

Dec 31, 2022

Superlight vanilla javascript plugin, for modern web dropdowns. Supporting multi-options, search and images. Designed to be seamlessly themed

Superlight vanilla javascript plugin, for modern web dropdowns. Supporting multi-options, search and images. Designed to be seamlessly themed

Superlight vanilla javascript dropdowns by LCweb Need to jump off of jQuery (or any other) dependency? Other packages are too heavy to just tweak sele

Dec 26, 2022

Enable hover capabilities for Cypress. 🛸

cypress-hover 🛸 Enable hover capabilities for Cypress 🛸 with zero dependencies! 💯 Installation npm install cypress-hover Usage In your cypress/sup

Sep 1, 2022
Comments
  • Timeout/Interval bug

    Timeout/Interval bug

    There is a bug in this plugin

    Visit this website, hover over an image, then move your cursor very fast in and out of the image, the images will start flickering which is not expected they only change after a delay of 500ms

    I'm not sure what is happening maybe mouseleave event is not registered and mousein event is registered twice thrice by moving cursor in and out.

    Possible patches

    1. using correct events from mouseleave, mouseout, mousein .... may fix this issue
    2. set a timeout and interval variable and avoid setting multiple timeout and intervals at once. or maybe Find out what is causing the race condition and a better way to code this plugin.
    bug hacktoberfest hacktober hacktoberfest-accepted 
    opened by AviKKi 6
  • Method to add configuration

    Method to add configuration

    Following variables should be configurable

    • class name hover-preview
    • attribute name data-preview
    • constant HOVER_DELAY
    • constant PREVIEW_DURATION

    A discussion regarding which method should be best is required.

    Suggested method -

    1. defining all the configurations as a json object in document head.
    2. exposing a global variable ex. - HoverPreview with .init method to initialize plugin with all configurations.
    enhancement help wanted hacktoberfest hacktober hacktoberfest-accepted 
    opened by AviKKi 0
  • Should add fade in/fade out effect when switching image

    Should add fade in/fade out effect when switching image

    Currently, It look pretty sharp and sudden when image src is changed. To make it more smoothly, we can add fade in fade out effect when switching image.

    This is a solution I found: https://stackoverflow.com/questions/23583245/add-transition-while-changing-img-src-with-javascript

    opened by dao-phuong 1
  • Added the Demo in ReadMe

    Added the Demo in ReadMe

    I have added the demo link in the ReadMe file and also updated the example/index.html file I have used jsdelivr in order to access the hover-review.minified.js file instead of directly accesing the raw github file. Cause in 2013, GitHub started using X-Content-Type-Options: nosniff, which instructs more modern browsers to enforce strict MIME type checking. It then returns the raw files in a MIME type returned by the server, preventing the browser from using the file as-intended (if the browser honors the setting).

    You can read more about this here

    hacktoberfest-accepted 
    opened by Gilbishkosma 2
Owner
Atul Yadav
Atul Yadav
GitHub
Codebraid Preview provides a Markdown preview for Pandoc documents within VS Code.

Codebraid Preview provides a Markdown preview for Pandoc documents within VS Code. Most Markdown previews don't support all of Pandoc's extensions to Markdown syntax. Codebraid Preview supports 100% of Pandoc features—because the preview is generated by Pandoc itself! There is also full bidirectional scroll sync and document export.

Geoffrey Poore 12 Dec 28, 2022
Get an isolated preview database for every Netlify Preview Deployment

Netlify Preview Database Plugin Create an isolated preview database for each preview deployment in Netlify Quickstart • Website • Docs • Discord • Twi

Snaplet 10 Nov 16, 2022
This is a vanilla Node.js rest API created to show that it is possible to create a rest API using only vanilla Node.js

This is a vanilla Node.js rest API created to show that it is possible to create a rest API using only vanilla Node.js. But in most cases, I would recommend you to use something like Express in a production project for productivity purposes.

Eduardo Dantas 7 Jul 19, 2022
Javascript library to animate images on hover.

Ripple Hover Effect Javascript library to animate images on hover. If this project help you, don't forget to star it. Codepen demo by Essam Abed Demo

Essam Abed 13 Nov 21, 2022
LazyLoad is a lightweight, flexible script that speeds up your website by deferring the loading of your below-the-fold images, backgrounds, videos, iframes and scripts to when they will enter the viewport. Written in plain "vanilla" JavaScript, it leverages IntersectionObserver, supports responsive images and enables native lazy loading.

LazyLoad is a lightweight (2.4 kB) and flexible script that speeds up your web application by deferring the loading of your below-the-fold images, vid

Andrea Verlicchi 7.1k Jan 2, 2023
A collection of CSS3 powered hover effects to be applied to links, buttons, logos, SVG, featured images and so on

A collection of CSS3 powered hover effects to be applied to links, buttons, logos, SVG, featured images and so on. Easily apply to your own elements, modify or just use for inspiration. Available in CSS, Sass, and LESS.

Ian Lunn 27.9k Jan 4, 2023
TVMAZE API-based webapp, receives TV show episodes with all data about that TV show.

TVMAZE API-based webapp, receives TV show episodes with all data about that TV show. The Webapp has two interfaces: A home page, showing a list of Tv show episodes you can like. And a popup window with more data about the TV show that you can comment on.

Yasin Warsame 4 Aug 9, 2022
Utility for generating preview images of StarCraft: Brood War and Remastered maps

bwpreview Utility for generating preview images of StarCraft: Brood War and Remastered maps (.scm and .scx files). All of the actual work of parsing m

Michiel Sikma 5 Oct 14, 2022
Generate social preview images in your Next.js API from Sanity webhooks

sanity-next-social-image-generator Automatically generate social share images using Sanity webhooks, and your Next.js API! Requirements A Next.js appl

Jordan McRae 9 Sep 4, 2022
A full screen slide show for images and videos

Vanilla JS Slide full screen slide show for videos and images Why? This is a scratch-your-own-itch project as I wanted a way to see images and videos

Christian Heilmann 24 Oct 26, 2022