Until now, the only method I knew to bring a retro feel to a web page was to spend hours and hours on Photoshop to modify the design to make it totally 80s; but it is over now. VintageJS manages all itself to bring a totally retro feel to the images. It works like a charm using canvas element of HTML5.
Zoomy – to Create Magnification
Zoomy enables to add zoom function to an image. The zoom performs just like a screen magnifier and the area around the mouse pointer enlarges to give a magnified view. You require two versions of an image, medium and larger for zoom display. Zoomy’s installation is quite simple. You only need to include an address of the zoom image and original image, and ask the Zoomy to show them while scaling. The entire process completes in quick, small steps.
Author: Jacob Lowe, Larry Battle & Chris PearsonjQuery Version: 1.6 +
Official Page
Learn how to do it!
jQuery Image Parallax
You just can’t stop yourself from adding few interactive elements in the header of your website, though the usage of different elements can deteriorate the performance and look. Great thanks to the jQuery Image Parallax plugin that you can enrich your website with an interactive colorful animation, without affecting the loading speed of the web site. The effect is really entertaining, when the web site reacts to the actions of users.
Advanced jQuery Background Image Slideshow
Did you ever wish to create a website like GOTOCHINA? Do you dream to show the browser window background images to grasp the users’ attention?
Advanced jQuery Background Image Slideshow is a jQuery plugin that provides just the same eye-catching display using jQuery. Moreover, the plugin offers an ability to show the background images as a slideshow. Again, the jQuery plugin is a lightweight plugin, when it comes to code.
Author: Marco Kuiper
jQuery Position Absolute
jQuery Position Absolute is a smashing jQuery plugin capable to show products on the screen in an entertaining and amazing way. This superb jQuery plugin is a nice alternative to the way of showing images in thumbnails. When a user clicks on a product, its image will zoom out to display a featured close-up view along with its info. And, when he clicks on the next item, the earlier opened image will close and clicked item will be on display.
Imagelens – for Lens Style Zooming
Imagelens enables to create lens style zoom feature for images. If you want to show your users different images in thumbnail and zoom, you can set any specific image source. Moreover, you can add many other cool effects, like setting the border’s width and color.
Cloud Zoom
Cloud Zoom, an image zoom plugin, performs like a Magic Zoom. When compared to many other image zoom plugins, like jQZoom, you will find Cloud Zoom to be small, feature-rich and more compatible with all major browsers.
Cloud Zoom can be used to zoom images on websites in many ways. Its flexibility is ideal for e-commerce sites that want to give their customers a quick view of the products offered.
Making an Interactive Picture with jQuery
Without going dynamic is now no longer a way in web designing. Here is a very nice, vivid way to do something with jQuery dynamics to make an eye-catching website.
You can make an interactive picture having tooltips and popup modals. This will be great if you want to display any specific element of an image. The plugin was created getting inspired by an interactive display of the IKEA website, where they used Flash.
jQuery Photo Tagger Plugin – to Add Flickr-Style Tagging to Your Images
Photo Tagger allows to select sections from a photo and tag them with keywords, just as seen in Flickr. The selected portion is visible only when the mouse hovers over the image and becomes invisible when it moves away. Photo Tagger connects with the server through the provided API URLs, so that the tags can be added, saved, and removed anytime.
Author: Ben Nadel
jSquares
jSquares pops up an image with its content in an overlay, when the user hovers the mouse over any of them. The inspiration is taken from the image pattern shown on ted website. jSquares works smoothly with all browsers.
There are many ways to add more style to it, like you can show different images in the overlay and on display. Secondly, you can adjust the overlay’s size according to the image’s size. For example, if there is a large-size image, e.g. 300*300, you can set its overlay size to 350*300. Similarly, for a small-size image, e.g. 150*150, it is better to have the overlay size of 150*250. If you find any problem in running jSquares with latest jQuery versions, go here to get updates to support jQuery 1.6.1.