Beautiful gallery with sorting in JQuery. Image gallery in jQuery with an interesting effect Jquery gallery

Hello everyone!
Developers of all stripes, when creating their next web project, are often interested in the question of how to present their users with various types of images, be they photographs or sets of pictures. For this, the inquisitive minds of the online space, for the most part of course this is a “bourgeois” space, are looking for more and more new solutions to create spectacular, colorful, and most importantly functional slide shows and photo galleries. For the most part, they are customized by developers to fit the design of the template of the web project being created, or in the form of plugins and modules for a specific site management engine. It’s worth looking at modern templates for, not a single theme, with rare exceptions, can do without some kind of plug-in slider or simple image rotator. So it’s understandable that many web developers want to have something like this in their arsenal and surprise their readers to the fullest by effectively presenting images on their sites.

Continuing the ongoing series of reviews of emerging new solutions when creating, I decided to put together a more complete collection of the most interesting and effective slideshows and photo galleries I have ever encountered, created using the magic of jQuery.
I would like to warn you right away that the resources discussed in the review are mainly in English, but I think whoever needs it will figure it out intuitively or with the help of translators, of whom there are a dime a dozen. And if you search hard enough, you can find descriptions of the technique for creating some galleries and sliders in Russian, since many of our web developers translate while working on a particular project, first for themselves, and then post detailed descriptions of all their manipulations for free access .
For example, this is what I did, when I was working on the mechanism for creating , I first found a gallery option that was suitable for me in the burzhunet, translated it for a better understanding of what I was doing, and in the future it turned out, I hope, not a bad article about using the Highslide script, with examples of work in various application variations.
And so, enough of the unnecessary lyrics, let's move on directly to the review, watch, read brief explanations and choose from a huge number of new jQuery plugins and scripts for implementing interesting image sliders, photo galleries, slide shows on your sites: with automatic and manual change sliders, background image sliders, with and without thumbnails, etc. etc...

Of.Site | Demo

A complete, customizable jQuery image gallery with slideshow elements, transition effects, and multiple album options. Compatible with all modern desktop and mobile browsers.

A tutorial on how to create a full screen gallery using jQuery. The idea is for a thumbnail of the featured full-screen image to appear to the side, with a reflection as you move through the images using the arrows or mouse click. Large images move up or down in a slideshow style depending on the transition you choose. The ability to scale the image, which makes the image in the background viewable in full screen mode or adjusted to the page size.

Parallax Slider is an interesting solution for organizing the display of images in the form of a slide show with manual control elements. The original placement of thumbnail pictures attracts attention. The official website has a complete breakdown of how to integrate and configure the slider.

Minimalistic Slideshow Gallery with jQuery is an excellent image gallery with elements for automatically changing pictures, as well as the ability to manually control display and select images from a drop-down block with a grid of thumbnails. One of the disadvantages is the lack of viewing full-size images, but this is the minimalism of this gallery.

This is a full-screen slideshow with automatically changing images, no mind-blowing effects, everything is simple and tasteful.

Minimit Gallery is a highly customizable jQuery plugin, with a large selection of transitions when displaying images. Using the Minimit gallery, you can organize a display of images in the form of a carousel, a slide show, a simple rotator, and a regular picture scroller.

is a tiny (2kb) jQuery plugin that provides a simple, no-nonsense way to display images as a slideshow.

is a nice looking javascript gallery, with intuitive controls and seamless compatibility on all computers, iPhones and mobile devices. Very easy to install and configure

Unlike many Javascript and jQuery image sliders, Slider.js is a hybrid solution, powered by CSS3 transitions and animations.

This is a one-page template for creating various presentations in HTML5 and CSS3.

Diapo slideshow is an open source project. If you want, you can suggest changes or improvements. You can download and use it for free, and nothing and no one is stopping you from using this slider in your projects. The slider is easy to customize, there are interesting transitions between the presented content, and you can place anything in the slider, it works quite quickly, without any jambs.

is nothing more than another tool for creating slideshows on websites and other web projects. Supports all modern browsers, horizontal and vertical animations, support for custom transitions, callback API and much more. You can use any HTML elements in your slides, it is understandable and accessible for beginners, and is distributed completely free of charge.

Implement your slideshows with this awesome jQuery plugin. Highly customizable tool so you can build your content presentation according to your requirements. To provide easier integration with external data or data from your CMS, the data format is used. This is a new version and written from scratch. The developers tried to describe the entire process of working with their brainchild very clearly and intelligibly.

is a jQuery plugin that allows you to transform unordered lists into slideshows with attractive animation effects. In a slide show, you can display a list of slides, either using numbers or thumbnails, or using the Previous and Next buttons. The slider has many original animation types, including cube (with various sub-types), pipe, block and more.

A complete set of tools for organizing all kinds of presentations of various content on your web projects. The bourgeois guys did their best, including almost all types of various sliders and galleries using the magic of jQuery. Photo slider, photo gallery, dynamic slide show, carousel, content slider, tabs menu and much more, in general there is room for our irrepressible imagination to run wild.

This is a jQuery slideshow plugin that is built with simplicity in mind. Only the most useful set of functions is packed, both for beginners and advanced developers, providing the opportunity to create simple, but at the same time very effective slideshows that are user-friendly.

— a simple slider built on jQuery, simple in all respects, not requiring special skills, I think many will find it useful for implementing slide shows on their websites. The plugin was tested in all modern browsers, including the slow IE browser.

jbgallery is a kind of user interface widget written in javascript of the jQuery library. Its function is to show one large image as the background of the site in full-screen mode, several images in the form of a slider. All viewing modes have viewing controls. It’s an interesting solution in its own way, and in some cases it’s not even standard.

It is an easy-to-use jQuery plugin for displaying your photos as a slideshow with transition effects between images (you've seen more interesting ones). jqFancyTransitions is compatible and extensively tested with Safari 2+, Internet Explorer 6+, Firefox 2+, Google Chrome 3+, Opera 9+.

is a freely distributed jQuery plugin for viewing images and other information in the Lightbox form. Popup window with controls, shaded background and all that, simple and tasteful.

Another jQuery plugin from the Lightbox series, although it weighs outrageously little (9 KB), but has a ton of functionality. There is a decently designed interface that you can always improve or customize using CSS.

Already from the name it becomes clear that there is nothing fancy, we have a very simple automatic image scroller, with completely missing controls. Who knows, maybe this slider will attract your attention precisely with its minimalism.

Image rotator with different types of transitions. It works both automatically and by clicking, and is quite easy to set up.

— a full-fledged image gallery rather than just a slider. Preview of thumbnails and the ability to select transition effects, full support for all browsers, detailed description of integration into a web project and free distribution.

This is an implementation of ready-to-use slideshows using scriptaculous/prototype or jQuery. Horinaja is somewhat of an innovative solution because it allows you to use a wheel to scroll through the content placed in the slider. When the mouse pointer is outside the slideshow area, scrolling occurs automatically; when the pointer is placed over the slideshow, scrolling stops.

This is a feature from a series of simple image scrollers, albeit with viewing controls, and therefore works in both automatic and manual modes.

s3Slider is a jQuery plugin that creates a slideshow from an unordered list of images and can be easily implemented on any web platform.

This is a jQuery plugin that is optimized for processing large volumes of photos while saving bandwidth.

Vegas Background jQuery plugin allows you to add beautiful full-screen background images to web pages, all with slideshow elements. If you carefully study the intricacies of working with the plugin, you can find many interesting solutions, of course, only if you need it.

— a slider as a slider, no more, no less, with captions for images or announcements of articles and simple controls, at random.

is a lightweight (about 5 KB) javascript for organizing image viewing. Automatic resizing and scaling of large images allows you to view the picture in full size within the browser window

Version 4 of PikaChoose jQuery Image Gallery is available! Pikachoose is a lightweight jQuery slideshow with great features! Integration with Fancybox, excellent themes (though not free) and much more are offered to your attention by the plugin developers.

Checks the number of images in your listing and dynamically creates a set of photo links as digital navigation. In addition, clicking on each image will move forward or backward, and you can also scroll through the images depending on the area you click on the picture (for example: clicking on the left side of the picture will move the slides back and forth, respectively, for the right side of the image).

Another jQuery slider that will fit perfectly into any WordPress template.

Another development of “Nivo”, like everything the guys from this studio do, the plugin is made with high quality, contains 16 unique transition effects, keyboard navigation and much more. This version includes a dedicated plugin directly for WordPress. So for all fans of this blogging engine, Nivo Slider will be just right for you.

jQuery plugin that allows you to quickly create a simple, effective and beautiful slider for images of any size.

Pirobox is a lightweight jQuery “lightbox” script, viewing is carried out in a pop-up block that automatically adjusts to the image size, with all controls.

The creators of this gallery offer a rather original presentation of the pictures. The images are displayed in miniatures in the form of a wave, when you click on the thumbnail, we will see a medium-sized version of the image, click a second time and you will see a large image. You can consider this an experiment, but you must admit that something new and unusual is always interesting.

To create slideshows and display pictures in full screen mode, the developers used the already familiar Vegas jQuery plugin, which contains many ideas and techniques previously described in detail in the group’s articles. The presence of HTML5 audio elements and the style of transitions between images are attractive.

Another development from the Codrops team, a full-fledged and functional image gallery, however, there’s no point in describing it, you have to see it.

Image slideshow, pictures disappear right before your eyes, the effect is simply wonderful.

Is a JavaScript image gallery framework built on top of the jQuery library. The goal is to simplify the process of developing a professional image gallery for web and mobile devices. You can view it in a pop-up window or in full screen mode.

We are quietly starting to get used to it and wait for new works from the Codrops team. Please get an excellent image slider with a magnificent 3D transition effect to view images in full screen mode.

Another WordPress plugin from the slideshow organizer series. Easily integrates into almost any design and offers many customization options for experienced users and non-experienced ones too.

Another plugin written for WordPress, it will make it much easier to organize a slideshow of pictures or any other content on your blogs.

A good slideshow plugin for integration into WordPress. Xili-floom-slideshow is installed automatically, and personal settings are also allowed.

Slimbox2 is a well-established WordPress plugin for displaying images with a Lightbox effect. Supports automatic slideshow and resizing of images in the browser window. And in general, this plugin has many advantages over other plugins in this series.

This plugin/widget allows you to create dynamic, controlled slideshows and presentations for your website or blog running on the WordPress engine.

This WordPress plugin transforms embedded gallery images into a simple and flexible slideshow. The plugin uses FlexSlider jQuery image slider and user personal settings.

is a WordPress plugin for organizing slideshows of photos, pictures from SmugMug, Flickr, MobileMe, Picasa or Photobucket RSS feed, works and displays using pure Javascript.

A simple slider for WordPress and more. Nothing superfluous or cumbersome, the work is done in a minimalist style, the emphasis is on stability and speed, and it connects perfectly to the blog management engine.

In my opinion, Skitter is one of the best sliders that supports working with WordPress. I am attracted by the stability and speed of operation, not too prominent controls, transition effects and a fairly simple connection to the theme.

is a plugin for WordPress with which you can easily and quickly organize an image gallery on your website with the ability to view it in slide show mode. The display can be either automatic or fully controlled with demonstration of thumbnails and captions for images.

Of.Site | Demo

Shows all pictures for a post/page as a slideshow. Easy installation. This plugin requires Adobe Flash for the version with transition animation, if Flash is not found the slider works as usual.

Another simple slider for WordPress, it shows images for posts and short announcements of articles. I use just such a plugin on this blog from time to time.

Meteor Slides is a jQuery WordPress slider with over twenty transition styles to choose from. The author called the plugin a “meteor”, probably implying the speed of operation; perhaps I didn’t notice anything meteoric.

oQey Gallery is a full-fledged image gallery with slideshow elements for WordPress, with built-in video and music capabilities.

It is a slideshow with flash animation elements for viewing images and videos on websites and blogs. You can place this slider on any website, in any size and with any content you like.

Flash Gallery plugin turns your regular galleries into stunning image walls, with support for multiple albums per post, full screen viewing and slideshow mode.

WOW Slider is a jQuery image slider for WordPress with amazing visual effects (Explosion, Fly, Blinds, Squares, Fragments, Basic, Fade, Stack, Vertical Stack and Linear) and professionally designed templates.

Promotion Slider is a jQuery plugin that makes it easy to create a simple slideshow, or implement multiple zones of rotating ads on a page, because it is a highly customizable tool, you will have full control over what you show in the slider and over how the module works generally.

| Demo

New in version 2.4: support for drag-n-drop photo sorting directly through the WordPress editor, as well as the ability to add photo links to main images. (IE8 may have some bugs, works fine in all major browsers. The authors promise full support for IE8 in the future.)

| Demo

The final chord of this review will be this plugin for WordPress, another slider with interesting visual effects for selecting and changing images.

I look at everything described above and am amazed, what a flight of fancy these people have, but this is not all that various web developers have come up with lately on the topic of organizing images on web projects. It's great that it is now possible to implement such wonderful solutions for creating galleries and slide shows.
I dare to quietly hope that in this collection you will find something interesting for yourself, create your own unique gallery or slider, to the delight of your users and, of course, your beloved self, and where would we be without this...

In this lesson I will show you how to create a minimalistic, but at the same time convenient and functional photo gallery using jQuery, or an image gallery, as you wish. The gallery has the ability to create categories, followed by filtering. It is also possible to launch a slide show. The gallery works in all browsers, so there will be no problems with adaptation.

To create this gallery, we will use two free jQuery libraries: Quicksand and PrettyPhoto. They make creating a gallery much easier. As always, you can see the result of the work on the demo page, and also download the archive from the working gallery and all the source files. The only drawback, so to speak, is the manual creation of thumbnails for large images. In all other respects, this gallery is worthy of attention.

SOURCES

First, let's look at the panel with a list of categories, this is a bulleted list ul. Moreover, each list element must have a unique class name.

• Categories:


• All


• Category 1


• Category 2


• Category 3


• Category 4

Name of the picture

As mentioned above, list items are images in the gallery. Each list element includes components. This is the image itself, or rather its miniature, as well as a description. The thumbnail is a link to the main image. The rel attribute is needed to call the javascript and open the main image.

Don’t forget also about 2 important things: the li list element must have a unique data-id attribute. The data-type attribute contains the category class, the list of which I described above. Everything seems to be about markup.

I won’t particularly focus on styles, since we use the ready-made PrettyPhoto library, which is responsible for enlarging the image, and there is quite a lot of CSS code. However, it is worth noting that there are 5 options for designing an enlarged image, although ideally only 3, since in two options only the rounding is removed.

Therefore, I will only show CSS styles for thumbnails and the list of categories.

Portfolio-categ ( margin-bottom:30px; )
.portfolio-categli (
display:inline;
margin-right:10px;
}
.image-block(
display:block;
position: relative;
}
.image-block img (
border: 1px solid #d5d5d5;
border-radius: 4px 4px 4px 4px;
background:#FFFFFF;
padding:10px;
}
.image-block img:hover (
border: 1px solid #A9CF54;
box-shadow:0 0 5px #A9CF54;
}
.portfolio-area li (
float: left;
margin: 0 12px 20px 0;
overflow: hidden;
width: 245px;
padding:5px;
}
.home-portfolio-text ( margin-top:10px; )
li.active a ( text-decoration:underline; )

In principle, everything should be clear with styles. To make the categories line up, the display property is set to inline . To give the effect of an outline to the image, set the background color (white) and the padding to 10 pixels. The sizes of list items are set in .portfolio-area li .

And finally, the most important thing is what the whole lesson is for. This is jQuery code. Let's start by filtering the images by category.

// Select all child elements of portfolio-area and write to a variable
var $data = $(".portfolio-area").clone();

$(".portfolio-categ li").click(function(e) (
$(".filter li").removeClass("active");

Var filterClass=$(this).attr("class").split(" ").slice(-1);

If (filterClass == "all") (
var $filteredData = $data.find(".portfolio-item2");
) else (
var $filteredData = $data.find(".portfolio-item2");
}
$(".portfolio-area").quicksand($filteredData, (
duration: 600,
adjustHeight: "auto"
), function () (

LightboxPhoto();
});
$(this).addClass("active");
return false;
});

Using the clone() method and a selector, we select all child elements of .portfolio-area and write them to the $data variable. Next, we track the click on one of the categories, the li element of the list with the class .portfolio-categ . We make all categories inactive by removing removeClass(“active”), if this is not done, then over time all categories will be active and filtering will stop.

Since we click on a list element, the this selector contains a list element, that is, li , from it we take the value of the class attribute and using the split method we split the class name into several parts, the border is a space (i.e. if the class was " all active" then after splitting we get an array of "all" and "active"). And then using the slice method, we select the first element of the array (in our case, “all”), and write the resulting result to the filterClass variable. If there was no space, the class name will not change.

Next, we check if the filterClass variable contains the string all , then using the .find method we select all elements with the portfolio-item2 class from the $data array, which we looked at above. The selected elements (and these are all elements of the list, that is, all the pictures) are placed in the filteredData variable.

Otherwise, if filterClass is not equal to all , then we will place not all elements of the list in the filterData variable, but only those whose data-type attribute matches the category class. In short, elements of only one category.

And ultimately, we pass the resulting variable to the jquery quicksand library, which filters the images. That's it for filtering.

Now, as for enlarging the image in the pop-up window. Everything is much simpler here.

JQuery("a").prettyPhoto((
animationSpeed: "fast",
slideshow: 5000,
theme: "facebook",
show_title: false,
overlay_gallery: false
});

A click on a link whose rel attribute begins with prettyPhoto is tracked. Then the prettyPhoto library comes into play and the image is miraculously enlarged. By the way, we are also passing several parameters. Such as the animation speed is fast, the slide show delay is 5 seconds, the Facebook design theme (there are 5 themes in total, they are located in the images/prettyPhoto folder), and we also prohibit showing the name of the picture and enlarging the picture when hovering the mouse.

Hi all! Today we will talk about perhaps the best free photo gallery, video and photo slider, let's talk about “photo frame”. Despite the fact that the script has not been supported for 2 years now and the author switched to a project on a similar topic, it works great and continues to please the eye.

Main advantages (+)

Cons (-)

This connection option is the simplest, but not the best; it should be used only if you need to display the gallery on most pages of the site. The advantage of this option is the use of CDN.

In this connection option, script files will be displayed only on the necessary pages via [shortcode]. And if you use the Autoptimize plugin, then the script code will also be integrated into the theme files. These simple manipulations should increase the site loading speed.

The gallery is displayed in HTML code using container c class="fotorama", the container contains the image output code or link to image . When writing an article using the WordPress engine, switch the editor to text mode and enter the container c class="fotorama" .

It looks like this:

Or like this (numbering of links is optional):

1 3 4

Examples of Fotorama settings Container dimensions

The size of the photo frame block is the size of the first image, other images are scaled in proportion to the first. To correct this situation, you can specify the dimensions manually.

There are other settings:

Data-width="98%" //relative width data-ratio="800/600" //aspect ratio data-minwidth="420" //min. width data-maxwidth="900" // max. width data-minheight="320" // min. height data-maxheight="100% // relative max height data-height="100% // relative height

Miniatures

Data-nav="thumbs" is responsible for thumbnails

But this method is not very effective, since the script has to load all the photos at once to generate thumbnails, so it would be more rational to prepare small copies of the pictures in advance. WordPress automatically creates thumbnails, which is what we will use. To get a link to the thumbnail, add -70x70 to the file name (https://site/wp-content/uploads/2017/11/27ltl9eRXk.jpg → https://site/wp-content/uploads/2017/11/27ltl9eRXk- 70x70.jpg).

By default, the thumbnail is 64 × 64. You can adjust this parameter using data-thumbwidth (width) and data-thumbheight (height). If you need the thumbnail to have its own size, then set the width and height parameters for the thumbnail file:

HTML code + Fotorama

Photoframe perfectly processes HTML and CSS, which significantly expands the functionality of the script. Work with links, blocks, tables, paragraphs, write CSS and much more. Below are some examples of the gallery's work. If the visual part is not displayed, then click the "Result" button.

Show/Hide Examples

See the Pen ooppwb by Ivanov Klim (@DreamerKlim) on CodePen.

See the Pen aVEEVb by Ivanov Klim (@DreamerKlim) on CodePen.

Full screen mode data-allowfullscreen="true" //in the browser window data-allowfullscreen="native" //on the entire monitor

It is possible to add a separate large image for full screen mode via data-full:

Other data-autoplay ="true" //autoplay data-autoplay="3000" //interval between slides in ms data-caption ="One" //comments on pictures data-keyboard ="true" //arrow navigation data-shuffle ="true" //images in different order data-navposition ="top" //thumbnails at the top data-loop ="true" //cyclic scrolling Let's try to connect everything and add a video "some comment 1" > "some comment 2" >

Hi all! In this article we will look at how to make a beautiful and conveniently sortable gallery using JQuery.

A beautiful, conveniently sorted gallery is a wonderful thing for your website that will delight you and your visitors. Today we will look at a very easy to install and configure plugin for the JQuery library – Filterizr.

Despite the ease of use, the plugin is quite lightweight and effective. Let's take a closer look at it.

To see how the plugin works, go to the official website, and here it is in front of you!

You can choose to sort by city, nature, industry, sunrise, sunset or show all photos (default). There is a Shuffle button that will allow you to shuffle the images. The ASC and DESC buttons sort pictures in ascending and descending order, respectively. If you want to find an image by position or description, select the desired item in the drop-down list and enter the query in the search field. When you hover your mouse over the image, the picture turns from black and white to color.

To download the library, click the Download button or use NPM:

Npm install filterizr

The plugin is already configured out of the box, but if you want to override the defaults, you can either:

1) Pass an object with parameters to the JQuery constructor

Var filterizd = $(".filtr-container").filterizr((
// parameters
})

2) Rewrite the options using the setOptions() method on the Filterizr object.

Filterizd.filterizr("setOptions", (
// parameters
})

Default parameters:

Options = (
animationDuration: 0.5,
callbacks: (
onFilteringStart: function() ( ),
onFilteringEnd: function() ( )
},
delay: 0,
delayMode: "progressive",
easing: "ease-out",
filter: "all",
filterOutCss: (
opacity: 0,
transform: "scale(0.5)"
},
filterInCss: (
opacity: 0,
transform: "scale(1)"
},
layout: "sameSize",
selector: ".filtr-container",
setupControls: true
}

More detailed instructions and descriptions of each parameter can be found at

Project thumbnails scroll when you move the mouse cursor in the left column. The content area displays a larger image with the project name, description, and list of technologies used. As you move between thumbnails, project information changes to each other with a stunning animated effect. When you click on an image on the description page, it enlarges using jQuery animation. I would also like to note the stunning elegant appearance of the entire portfolio page. Watch the demo.

Excellent implementation of a photographer’s portfolio website. When you click on a menu item, an area with content of a fixed height and width is assembled from squares scattered across the screen. In order to fit more information into a fixed area, the content can be scrolled. The implementation of displaying works from the portfolio is unusual: when you click on the thumbnail, the photo is displayed as a background image, which is automatically scaled when the browser window size is changed.

An original solution for creating an online portfolio. Project blocks (thumbnails and a short description with a link) are displayed several in a row; when you change the browser window, the blocks are redistributed evenly on the page with an animated effect. Each project can have several thumbnail images, the transition between which is carried out using arrows. Clicking on the link opens a page with a full description, on which the text is placed on a semi-transparent block of a fixed height with scrolling. A scalable image of the project is used as the page background. Looks cool - watch the demo.

Implementation of vertical and horizontal scrolling.

A draggable grid consisting of content blocks and images. The grid can be dragged using the mouse (press any mouse button and drag in the desired direction). When you click on the thumbnail, the main image expands to the full width of the screen. When you click on a dark block with text, an area with a more detailed description opens.

One-page website with animated content changes. On the demo page, navigate through the menu tabs to see the effect.

Using this jQuery “Switch Display Options” plugin, you can implement a switch on the page, with which the visitor will switch from a tabular display of information to a full view with a description of the blocks. Perfect for portfolio implementation.

An original jQuery solution created for a cafe website. The template implements an interesting jQuery gallery for displaying dishes from the menu. Images in the gallery are scaled depending on the size of the browser window. First, the gallery displays thumbnail images with the name and brief description of the dishes, while the full-size photo appears darkened in the background. Navigate between available photos using arrows or the mouse wheel. Clicking the mouse in gallery mode will remove the thumbnails with descriptions and allow you to view the original large images stretched across the entire width of the window. To return to the site menu from the gallery, click on the link in the upper right corner. In addition to the chic jQuery gallery, a map from Google is very effectively integrated into the template.

To create unique “walls” from photographs or HTML blocks that can be dragged across the screen within a fixed area using the mouse.

Displays various elements on the page along a circle of a given diameter.

The page has the ability to send an e-mail address, which is recorded in the database and to which a notification about the opening of the site can be sent. The page is also decorated with a small slideshow based on the jQuery plugin Nivo Slider v. 2.3.

With its help, you can create an interesting effect of a business card rotating when you click on a link.

The idea is to track user clicks. To see the plugin in action on the demo page, click the mouse and then click the “Analyze” button. And the points where you clicked with the mouse will be displayed on a translucent background.

Implementation of a nice on-screen keyboard. You never know, it will come in handy for something.

Implementation of sheets of notes. The text can be edited, and the notes themselves can be deleted or moved around the screen. To see an example, go to the “Demo” tab on the demo page.

Interesting link design: when you hover over a link, its anchor changes. Looks cool.

Implementation of captcha for the registration form. The plugin is a set of numbers that need to be set in ascending order by dragging them. Quite an interesting way to confirm that the registration is being carried out by a real person and not a robot.

There are buttons at the bottom of the screen that you can use to smoothly scroll the page up or down.

The plugin uses the Google Language API and can translate text into any languages ​​provided by Google. To translate, you need to click on the icon next to the paragraph and select the language into which you want to translate from the drop-down list.

Excellent implementation of scrolling links for page navigation. Implemented using jQuery.

This jQuery plugin will allow you to implement “paper” notes on your website.

Plugin for creating animated breadcrumb navigation chain

jQuery plugin for implementing a product page. When you click on a product image, its description appears.

jQuery effect of vertical page scrolling. Perfect for implementing one-page websites and portfolio websites. To view the effect, click on the menu item on the demo page.

jQuery effect for implementing evaluation of something. The color of the circles and the text underneath them changes depending on which of them the mouse cursor is hovering over.

A plugin that implements site navigation. In this case, your site is presented as a grid of documents, between which a transition is made with an interesting jQuery effect.

You can easily use this plugin to create small websites and web applications. It will also not look bad on portfolio sites.

Effective loading indicator.

When filling out a field, the plugin will suggest possible options for filling using Ajax, while it will filter and show only those options that satisfy the text already entered in the field.

Before starting a conversation, the visitor must enter his nickname and e-mail. The right column shows how many people are logged in to the chat. Technologies used: PHP, MySQL, jQuery, CSS.

Visitors can add a new proposal or vote for an existing one. An excellent solution for those who want to find out what their audience thinks about the site. You can also use this page to accumulate new ideas for the further development of your project. Technologies used: PHP, MySQL, jQuery, CSS

Accurate implementation of surveys on the site. Technologies used: JQuery, Ajax, PHP and MySQL.

A very interesting solution for implementing voting on a website. By dragging blocks up and down and grabbing the images with the mouse, you can arrange them on the page in any order. The higher you leave the block, the better you rated it and, accordingly, if the block is placed at the very bottom, it means you liked it the least. After you place the blocks in the desired sequence, you must click on the “Submit poll” button for the vote to be taken into account. The results page displays the voting results and the number of visitors who voted. Technologies used: CSS, PHP, MySQL, jQuery.

A simple Ajax commenting system that checks whether information is entered correctly. Comments are stored in a database. Implemented using: PHP, MySQL, CSS, jQuery.

Technologies used: PHP, jQuery, CSS.

When you navigate through menu items, the content is loaded without reloading the page. Technologies used: PHP, jQuery, CSS.

Implementation of site search using Google AJAX Search API. You can provide the visitor with the opportunity to search both on your site and on the Internet. In this case, the search can be carried out not only by site pages, but also by images and multimedia files.

A very interesting effect that can be used in the implementation of a portfolio. When you click on an image, it darkens with a translucent background and a caption appears describing what you should pay attention to.

jQuery implementation of the FAQ page on the site. A list of questions is displayed at the top of the page. When you click on a question, the page smoothly scrolls to the one you selected, and the active question with its answer is highlighted in a different color. A link to return to the list of questions also appears in the active answer field.

The color changes when you hover the mouse over it. You can make the color change randomly.

Using this interesting plugin, you can introduce the visitor to the main functions of your site if he is visiting it for the first time. When the page loads, a block appears in the upper right corner asking you to take a tour of the site. If a visitor is visiting your site for the first time, they can use a short guide to familiarize themselves with the main features. In this case, the page is darkened and the necessary blocks at each step are marked. If the visitor has already been to your site before, he can simply close the window offering a tour of the site.

Using this plugin, you can introduce the visitor to the main functionality of the page. This is done in the form of a sequential pop-up description of the elements. The visitor can view all the tips by clicking the Next button, or close the online tour (if this is not the first time he has come to this page) using the cross.