Image gallery on jQuery. Image gallery in jQuery with interesting effect jquery gallery full screen

1. Implementing Portfolio Using jQuery Gallery

Project thumbnails scroll when you change the position of the mouse cursor in the left column. The content area displays an enlarged image with the project name, description, and a list of technologies used. As you navigate between thumbnails, project information swaps with each other in a stunning animated effect. When you click on the image on the description page, it zooms in also using jQuery animation. I also want to note the stunning elegant appearance of the entire portfolio page. See demo.

2. Super implementation of a portfolio site using CSS and jQuery

Excellent implementation of a photographer's portfolio site. 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 place more information in the fixed area, content scrolling is provided. The implementation of showing works from a portfolio is implemented in an unusual way: when you click on a thumbnail, the photo is displayed as a background image, which is automatically scaled when the browser window is resized.

3. jQuery portfolio wall

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 the browser window is changed, 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 the arrows. Clicking on the link opens a full description page with the text placed on a semi-transparent, fixed-height, scrolling block. A scalable project image is used as the page background. Looks cool - watch the demo.

4. Smooth jQuery page scrolling

Implementation of vertical and horizontal scrolling.

5. Plugin jQuery "Draggable Image Boxes Grid"

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

6. One-page portfolio site

One-page site with animated content change. On the demo page, go through the menu tabs to see the effect.

7. Switching the display of blocks to jQuery

With the help of this jQuery plugin "Switch Display Options", you can implement a switch on the page, with which the visitor will switch from a table display of information to a full view with block descriptions. Perfect for portfolio implementation.

8. Template for a restaurant website with jQuery gallery and map from Google

Original jQuery solution built for cafe site. The template has an interesting jQuery gallery for displaying dishes from the menu. Images in the gallery are scaled based on the size of the browser window. First, the gallery displays thumbnails with the name and a brief description of the dishes, with the full-size photo displayed dimmed in the background. Navigation between the available photos is carried out using the arrows or the mouse wheel. Clicking in the gallery mode will remove the thumbnails with the description and allow you to view the original large images stretched to the full 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 gorgeous jQuery gallery, a map from Google is very effectively integrated into the template.

9. Plasm The Wall plugin

To create a kind of "walls" from photographs or HTML blocks that can be dragged with the mouse across the screen within a fixed area.

10. Plugin for displaying elements in a circle

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

11. Stub page "Site under construction"

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

12. QuickFlip 2 Plugin

With it, you can make an interesting rotating business card effect when you click on a link.

13. jQuery clickmap

The idea is to track user clicks. In order to see the plugin in operation on the demo page, click with the mouse, and then click the "Analysis" button. And on a semi-transparent background, the points where you clicked with the mouse will be displayed.

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

15. jQuery Notes

Implementation of leaflets with 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 page on the "Demo" tab.

16. jQuery rating

17. HoverAttribute

Interesting design of links: when you hover over a link, its anchor changes. It looks cool.

18.jQuery Fancy captcha for registration form

Captcha implementation for the registration form. The plugin is a set of numbers that must be set in ascending order by dragging and dropping. Quite an interesting way to confirm that the registration is a real person, and not a robot.

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

20. Translator. jQuery plugin "jTextTranslate"

The plugin uses the Google Language API and can translate text into any languages \u200b\u200bprovided by Google. To translate, click on the icon next to the paragraph and select the language to be translated from the drop-down list.

21 jQuery pagination plugin

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

22. jQuery Notes plugin

This jQuery plugin allows you to implement paper notes on your site.

23. jQuery plugin "Catch404"

24. jQuery jBreadCrumb plugin

Plugin for creating animated breadcrumbs navigation chain

25. Plugin "Reel"

26. jQuery plugin "Dance Floor"

jQuery plugin for product page implementation. When you click on the product image, its description appears.

27. jQuery plugin "3D Cloud of Places"

28. Bulky CSS buttons

29. Animated horizontal page scrolling

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

30. jQuery plugin "Rating System"

jQuery effect for implementing evaluating something. The color of the circles and the text below them change depending on which one is the mouse cursor is hovering over.

31. jQuery Panel Magic

A plugin that implements site navigation. At the same time, your site is presented as a grid of documents, between which you can navigate with an interesting jQuery effect.

You can easily use this plugin to build small sites and web applications. It will also look good on portfolio sites.

32. Loading indicator on Mootools, plugin "MoogressBar"

Effective loading indicator.

33. Mootools plugin "CwComplete"

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

34. Great ajax chat using jQuery and CSS3

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

35. Implementation of the page "Propose by project"

Visitors can add a new proposal or vote for an existing one. An excellent solution for those who want to know the opinion of their audience about the site. Also, this page can be used to accumulate new ideas for the further development of your project. Technologies used: PHP, MySQL, jQuery, CSS

36. Implementing a vote / poll with PHP and jQuery

37. Voting on Ajax "TinyEditor"

Careful implementation of polls on the site. Technologies used: jQuery, Ajax, PHP and MySQL.

A very interesting solution for implementing voting on the site. By dragging the blocks up and down, 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 you place the block at the very bottom, it means that you liked it the least. After you have placed the blocks in the desired sequence, you must click on the "Submit poll" button so that the vote is taken into account. The results page displays the voting results and the number of visitors who voted. Technologies used: CSS, PHP, MySQL, jQuery.

Simple Ajax commenting system with validation of information input. Comments are stored in the database. Implemented using: PHP, MySQL, CSS, jQuery.

40. Counter of the number of file downloads

41. Notes on a page using PHP

Technologies used: PHP, jQuery, CSS.

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

43 jQuery site search using technology from Google

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

44. jQuery description overlay effect on image

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

45. Implementing a Q&A page with jQuery

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 selected one, and the active question with the answer to it is highlighted in a different color. Also, a link appears in the active answer field to return to the list of questions.

46. \u200b\u200bWebsite on Ajax. Content is loaded without page reload

47. Change background and text color with jQuery

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

48. Site Guide Using jQuery

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

49. Virtual tour of the "Joyride Kit" website

Using this plugin, you can familiarize the visitor with 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 on the Next button, or close the online tour (if it is not the first time he comes to this page) using the cross.

Continuing the series of reviews of new solutions that I have begun, I decided to put together a more complete collection of interesting and effective slideshows and photo galleries that I have ever met, created using the magic of jQuery.
I want to warn you right away that the resources that will be discussed in the review are mainly in English, but I think who needs it, they will figure it out intuitively or with the help of translators, of whom there are a dime a dozen. And if you look carefully, you can find descriptions of the technique for creating some galleries and sliders in Russian, since many of our web developers translate in the process of working on a particular project first for themselves, and then post detailed descriptions of all their manipulations for free access ...
For example, I did the same, at one time working on the creation mechanism, at first I found a gallery version suitable for me in the bourgeoisie, translated it for a better understanding of what I was doing, and later, I dare to 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 go directly to the review, look, read brief explanations and choose from a huge number of new jQuery plugins and scripts to implement interesting image sliders, photo galleries, slideshows on your sites: with automatic and manual change slides, background image sliders, with and without thumbnails, etc. etc...

Of.Website | 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 guide to creating a jQuery-based fullscreen gallery. The idea is to have a thumbnail of the shown full-screen image displayed to the side, with reflection as you move through the images using the arrows or mouse kokeshik. Large images change in slideshow style up or down depending on the transition you choose. The ability to scale the picture, which makes the image in the background for viewing in full screen mode or fit to the page size.

Parallax Slider

Parallax Slider an interesting solution for organizing the display of images in the form of a slide show with manual controls. Attracts the original placement of thumbnails of pictures. The official website has a complete layout for integrating and configuring the slider.

Minimalistic Slideshow Gallery with jQuery an excellent gallery of images with elements of automatic image change, as well as with the ability to manually control the display and selection of images from a drop-down block with a grid of thumbnails. Of the minuses, we can note the lack of viewing full-scale images, but this is the minimalism of this gallery.

It's a full-screen slideshow with auto-resizing images, no mind-blowing effects, simple and tasteful.

Minimit Galleryis a highly customizable jQuery plugin with a large selection of transitions when displaying images. With the help of Minimit gallery, you can organize a demonstration of images in the form of a carousel, slideshow, a simple rotator and a simple picture flipping.

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 flawless compatibility across 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, efficient CSS3 transitions and animation based.

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

Diapo slideshow is an open source project. You can suggest changes or improvements if you want. You can download and use it for free, also nothing and no one bothers to use this slider in your projects. The slider is easily customizable, interesting transitions between the presented content, and you can place anything in the slider, it works pretty quickly, without any jambs.

Is nothing more than another tool for creating slideshows on websites and other web projects. Supported by all modern browsers, horizontal and vertical animation, support for custom transitions, callback API, and more. You can use any html elements in slides, understandable and accessible for beginners, distributed completely free.

JavaScript Slideshow for Agile Development

Implement your slideshows with this awesome jQuery plugin. A highly customizable tool so you can build your content presentation according to your requirements. A data format is used to provide easier integration with external data or data from your CMS. This is a new version and written from scratch. The developers have tried to describe the entire process of working with their brainchild in an extremely clear and intelligible way.

- jQuery plugin that allows you to convert 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 subspecies), 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, included in the clip, almost all kinds of various sliders and galleries using the magic of jQuery. Photo slider, photo gallery, dynamic slideshow, carousel, content slider, tabs menu and much more, in general, there is a place where our irrepressible imagination can roam.

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

- such a simple slider built on jQuery, simple in all respects, does not require special skills, I think many will come in handy for the implementation of slideshows on their sites. The plugin has been tested in all modern browsers, including the slower IE.

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 as a slider. All view modes have view controls. An interesting solution in its own way, where it is not even standard.

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

Is a free jQuery plugin for viewing images and any other information in the form of a "lightbox". Popup with controls, shaded background and all, simple and tasteful.

Another jQuery plugin from the Lightbox series, although it weighs in a disgraceful way (9 KB), while it has a bunch of opportunities to work with. There is a decently designed interface that you can always improve or customize with CSS.

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

Image rotator with different types of transitions. It works both in automatic mode and on click, it is set up quite easily.

- a full-fledged image gallery rather than just a slider. Thumbnail preview and the ability to choose the transition effect, full support for all browsers, a detailed description of the integration into a web project and free distribution.

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

A chip from a series of the simplest image scrollers, though with the presence of viewing controls, respectively, works in both automatic and manual modes.

s3Slider - jQuery plugin, creates a slideshow from an unordered list of images and can be easily implemented on any web site.

This is a jQuery plugin that is optimized to handle large volumes of photos while conserving bandwidth.

Vegas Background

The Vegas Background jQuery plugin allows you to add beautiful full screen background images to your 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, if only you need it.

- a slider as a slider, no more, no less, with captions for images or announcements of articles and simple controls, using the "typing" method.

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

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

Checks the number of images in your list and dynamically creates a set of photo links in the form of digital navigation. In addition, clicking on each image will move forward or backward, and you can also flip through the images depending on the area of \u200b\u200bthe 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 fits perfectly into any WordPress template.

Another development of "Nivo", like everything that the guys from this studio do, the plug-in 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 the topic.

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

Piroboxis a lightweight jQuery "lightbox" script, viewing is in a popup block that automatically adjusts to the size of the image, with all controls.

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

Full screen slideshow with HTML5 and jQuery

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

Another development of the Codrops team, a full-fledged and functional image gallery, however, what's the point in describing it, you must see it.

Picture slideshow, pictures disappear right in front of your eyes, the effect is amazing.

Is a JavaScript framework for an image gallery 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. Possibility to view in pop-up window and in full screen mode.

Quietly, we begin to get used to it and wait for new works from the Codrops team. Please get a great picture slider with a great 3D transition effect to view pictures in full screen mode.

Another WordPress plugin in the series of slideshow organizers. Easily integrates into almost any design and offers many customization options for advanced users as well as inexperienced ones.

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

Nice slideshow plugin for wordpress integration. Xili-floom-slideshow is installed automatically, and personal settings are also allowed.

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

This plugin, widget allows you to create dynamic, manageable slideshows and presentations for your WordPress website or blog

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

Is a WordPress plugin for organizing photo slideshows, images from SmugMug, Flickr, MobileMe, Picasa or Photobucket RSS feed, works and displays with pure Javascript.

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

In my opinion Skitter is one of the best wordpress sliders. Attracted by the stability and speed of work, not too prominent controls, transition effects and a fairly simple connection to the theme.

Is a WordPress plugin with which you can easily and quickly organize a gallery of images on your site with the ability to view in a slideshow mode. The display can be either automatic or fully controlled with thumbnail display and image captions.

Of.Website | 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 is working normally.

Another simple WordPress slider that shows post images and short article previews. 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 plug-in "meteor", probably implying the speed of work, perhaps I did not notice anything about meteor.

oQey Gallery is a complete image gallery with slideshow elements for wordpress, with embedded 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, stuff it 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 preview and slideshow mode.

WOW Slider is a jQuery image slider for WordPress with great visuals (Explosion, Fly, Blinds, Squares, Slices, Base, Fade, Stack, Vertical Stack and Linear) and professionally designed templates.

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

| Demo

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

| Demo

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

I look at all of the above and I am amazed that it must be a flight of imagination for human people, and this is not all that variegated web developers have heaped up recently on the topic of organizing images on web projects. It's great that it is now possible to bring such great solutions for creating galleries and slideshows to life.
I dare to quietly hope that in this collection you will find something interesting for yourself, close up your own, unique gallery or slider, to the delight of your users and, of course, to your beloved, but where without that ...

by Dmitry Semenov
is a jQuery image gallery and content slider plugin. It's completely responsive, touch-friendly and has modular architecture that allows you include only features that you need to optimize file size and performance.

by Andy - The Coffeescripter
A highly customizable gallery / showcase plugin for jQuery.

by Trent
Galleriffic is a jQuery plugin that provides a rich, post-back free experience optimized to handle high volumes of photos while conserving bandwidth.

Tonic Gallery - jQuery XML Portfolio Gallery | $ 6

by Aino
Galleria is a JavaScript image gallery framework built on top of the jQuery library. The aim is to simplify the process of creating professional image galleries for the web and mobile devices.

by CatchMyFame
The other day I went looking for a simple way using jQuery to fade between a set of images on a page. So, being a coder, I set out to create my own plugin.

by Thomas Kahn
Smooth Div Scroll is a jQuery plugin that scrolls content horizontally left or right. Apart from many of the other scrolling plugins that have been written for jQuery, Smooth Div Scroll does not limit the scrolling to distinct steps.

by Victor Zambrano - frwrd.net
Minishowcase is a small and simple php / javascript online photo gallery, powered by AJAX that allows you to easily show your images online, without complex databases or coding, allowing to have an up-and-running gallery in a few minutes.

by Caspar David Friedrich
EOGallery is a web animated slideshow gallery made with jQuery. It only uses basic jQuery functions and Cody Lindley's Thickbox to display larger pictures.

by Arnault Pachot
A multi-format carousel for jQuery, Non obstrusive and accessible portfolio supporting multiple media: photos, video (flv), audio (mp3). This plugin for jQuery will automatically detect the extension of each media and apply the adapted player.

The Wall - Media Gallery - jQuery powered | $ 5

by Stefan Petre
Another image gallery plugin with space effect, very light and simple plugin.

by Moreno Di Domenico
jmFullWall is a jQuery plugin for the creation of an impressive portfolio.

by Fabrizio Calderan
Mosaiqy is a jQuery plugin for viewing and zooming photo working on Opera 9+, Firefox 3.6+, Safari 3.2+, Chrome and IE7 +. Photos are retrieved from a JSON / JSONP data structure and randomly moved inside the grid. All expensive animations are taken over by your GPU on recent browsers using CSS3 transitions, minimizing the CPU overhead.

by Cody
The following jQuery plugin transforms a set of images into a tiny gallery with several options. The Micro Image Gallery allows to switch between a grid view which shows a preview of the images as thumbnails and a single view showing one image only.

VION - jQuery Image Gallery Plugin | $ 7

by Malihu
A simple, yet elegant fullscreen image gallery created with the jQuery framework and some simple CSS.

Hello dear readers a! In this tutorial, I will show you how to create a minimalistic yet comfortable and functional photo gallery on jQuery, or a gallery of images, as it is convenient for anyone. The gallery has the ability to create categories, followed by filtering. It is also possible to launch a slideshow. The gallery works in all browsers, so there will be no problems with adaptation.

Two free libraries will be used to create this gallery: Quicksandand PrettyPhoto... They make it much easier to create a gallery. As always, you can see the result of the work on the demo page, as well as download the archive from the working gallery and all the source files. The only drawback, if I may say so, is the manual creation of thumbnails for large images. Otherwise, this gallery worthy of attention. Just like !

HTML markup

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

1
2
3
4
5
6
7
8

<ul class \u003d "portfolio-categ filter"\u003e
<li\u003eCategories:</ li\u003e
<li class \u003d "all active"\u003e All</ a\u003e
<li class \u003d "cat-item-1"\u003e Category 1</ a\u003e
<li class \u003d "cat-item-2"\u003e Category 2</ a\u003e
<li class \u003d "cat-item-3"\u003e Category 3</ a\u003e
<li class \u003d "cat-item-4"\u003e Category 4</ a\u003e
</ ul\u003e

1
2
3
4
5
6
7
8
9
10
11

Image name

published: 2012

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

Don't forget also about 2 important things, the data-id attribute must be unique for the li list element. The data-type attribute contains the category class, the list of which I described above. It's all about the markup.

CSS Styles

I will not focus on styles, since we are using a ready-made library PrettyPhoto, which is responsible for increasing the image, and there is a lot of css code. However, it is worth noting that there are 5 options for the design of the enlarged image, although ideally only 3, since in two options only the rounding is removed.

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28

Portfolio-categ (margin-bottom: 30px;)
.portfolio-categ li (
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. In order to give the effect of a stroke to the image, set the background color (white) and an indent of 10 pixels. The sizes of the list items are set in .portfolio-area li.

jQuery

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

// Select all children of portfolio-area and write to variable
var $ data \u003d $ (". portfolio-area") .clone ();

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

var filterClass \u003d $ (this) .attr ("class") .split ("") .slice (- 1) [0];

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

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

Using the clone () method and the selector, we select all the children of the .portfolio-area and write them to the $ data variable. Next, we track the click on one of the categories, the li element in the list with the .portfolio-categ class. 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 item, the selector this contains a list item, that is, li, we take the value of the class attribute from it and use the split method to split the class name into several parts, the border is a space (that is, 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 into the filterClass variable. If there was no space then 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 items with the class portfolio-item2 from the $ data array that we discussed above. The selected elements (and these are all the elements of the list, that is, all the pictures) are placed in the filteredData variable.

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

And in the end, we transfer the resulting variable to the library jquery quicksand, which filters images. This is all about filtering.

Now for the enlargement of the image in the popup. Everything is much simpler here.

1
2
3
4
5
6
7

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

A click is tracked on a link whose rel attribute begins with prettyPhoto. Then the library comes into play prettyPhotoand the image is miraculously enlarged. By the way, we also pass in a few parameters. Such as animation speed - fast, slide show delay - 5 seconds, Facebook theme (there are 5 themes in total in the images / prettyPhoto folder), and also prohibit displaying the name of the picture and enlarging the picture when you hover the mouse. Complete documentation for prettyPhoto can be found

To stay updated with the latest articles and lessons, subscribe to

For a long time I chose a topic for today's topic. As a result, I noticed that we have not yet made selections with image galleries... In my opinion, a great topic, since galleries are present on many sites. To be honest, they are all not very attractive. Considering the current development trends jquery, html5 and so on. I thought that the solutions should already be much more attractive than those that I have encountered before. So. After spending a day, I managed to find a huge number of scripts. From this whole mountain, I decided to select only, because I love, as you have already noticed from previous posts.
Image gallery applicable not only in case with photo albums... The script can be used, I think it will even be more correct, as portfolio for photographers, designers etc. Jquery effects will help grab the attention of visitors and just add elegance to your website.
So. To your attention collection jquery image gallery plugins for website.
Do not forget to comment and remember, so as not to lose this collection, you can add it to your favorites by clicking on the star at the bottom of the article.

Original plugin for creating an image gallery... Miniatures are shaped like diamond, which is very popular at the moment. This form is made using css3. The only drawback of this gallery is the lack of a lightbox that would open a photo in full size. That is, you need to screw the lightbox plugin with crabs. This script generates a responsive diamond-shaped grid of images.