The image preview plug-in
The imagepreview is a jQuery plug-in for creating the image preview on hover in your web pages. So, if your web page has thumbnails and you want to display the larger view of images with or without captions, the imagepreview can be a good choice.
The script adds an element as you hover over an image or some other element and it also calculates the mouse position and adjusts the image preview accordingly.
In the next section, you can see live demos of using this nice plug-in. Two demos are given below; one without the captions while other displays caption like tooltips.
A demo of image preview without captions
In this demo, four images are used in the gallery. As you bring the mouse over any image thumbnail, the image preview i.e. the larger image will display. The large image will move with the mouse as long as the pointer is inside the particular image.
Have a look by clicking the link or image below:
The markup for this demo:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 | A demo of image preview Without captions The code: How to set up image preview plug-in?The procedure is quite simple. Step 1 Download the plug-in: You may download this plug-in from the Github website by following this link: Credit: anarchyta You may also get the required imagepreview.min.js file by view source the demo page and download on your system. Step 2 refer the JS and CSS files: As shown in the above demos code, you need to refer the style.css and imagepreview.min.js files in the web page where you need to use this image preview plug-in. Step 3: Use the markup: You may see how to use the markup in above two demos. The larger images are placed inside the tag while their respective smaller images are placed in the tag. For captions, the title of the tag is used.
Related Tutorials:Video liên quanChủ Đề |