A simple gallery in jquery. jQuery morphing gallery

I spent a long time choosing the topic for today’s topic. As a result, I noticed that we have not yet made collections with image galleries. In my opinion, it’s an excellent topic, since many sites have galleries. Frankly, they are all not very attractive. Considering the current trends in the development of jquery, html5, etc., I thought that there must be much more attractive solutions than those that I had encountered before. So. After spending a day, I managed to find a huge number scripts. From this whole mountain, I decided to select only, because I love, as you already noticed from previous posts.
The image gallery is applicable not only in the case of photo albums. The script can be used, I think it would be even more correct, as a portfolio for photographers, designers, etc. Jquery effects will help attract the attention of visitors and simply add elegance to your site.
So. We bring to your attention a collection of jquery image gallery plugins for the site.
Don’t 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.

PHOTOBOXFree, easy, responsive gallery images, in which all effects and transitions are made using CSS3. Ideal for creating a photographer's portfolio website.

S Gallery An attractive Jquery image gallery plugin. The animation works using css3.

DIAMONDS.JSOriginal plugin for creating an image gallery. The miniatures are shaped like a diamond, which is at the moment very popular. This form is made using css3. The only negative of this gallery is the absence of a lightbox in which the photo would open in full size. That is, you will need to screw in the lightbox plugin. This script forms adaptive grid diamond-shaped images.

Superbox A modern image gallery using Jquery, css3 and html5. We are all used to the fact that when you click on the preview full image opens in a lightbox (pop-up window). The developers of this plugin decided that the lightbox had already become obsolete. The images in this gallery open below the preview. Watch the demo and see that this solution looks much more modern.
| Smooth Diagonal Fade Gallery A modern image gallery in which previews are distributed across the entire screen space. The script can scan a folder with photos on the server, that is, you do not need to insert each image separately. Just upload the pictures to a folder on the server and specify the path to the directory in the settings. Then the script will do everything itself.

Gamma Gallery A stylish, lightweight, responsive image gallery with a Pinterest-style grid that has become very popular these days. The script works great on both desktop computers, and on mobile devices ah with any screen resolution. Great solution to create a web designer portfolio.

THUMBNAIL GRID WITH EXPANDING PREVIEWThe plugin is a responsive image grid. When you click below, a larger photo and description will appear. Good for creating a portfolio.

jGalleryjGallery is a full-screen, responsive image gallery. Effects, transitions and even style are easily customizable.

Glisse.js A simple but very effective image gallery plugin. This is exactly the solution when you need to create a photo album. The plugin supports albums and has a very cool flipping effect.

Mosaic Flow A simple, responsive image gallery with a Pinterest-style grid.

GalereyaAnother stylish gallery with a Pinterest-style grid filtered by category. Works in browsers: Chrome, Safari, Firefox, Opera, IE7+, Android browser, Chrome mobile, Firefox mobile.

least.jsExcellent free gallery images using JQUERY, 5 and CSS3. She has a very attractive appearance and will undoubtedly attract the attention of your visitors.

flipLightBox A simple image gallery. When you click on the preview, the full image opens in a lightbox.

blueimp GalleryFlexible gallery. Capable of outputting to modal window not only images, but also videos. Works great on touch devices. It is easy to customize and it is possible to expand the functionality using additional plugins (See the next plugin).

In this tutorial, I'll show you how to create an interactive image gallery for your website so that when visitors click on the image thumbnails, they can see a larger view of each image. And no page reload! Images appear automatically with a fade-in effect!

We will have an area on the page with thumbnails of the gallery images and an area where we will show the image in a larger scale. By clicking on any of the thumbnails, the visitor will see the corresponding large image in this area. The image will appear for some time, creating an animation effect, and the previous image will dissolve at this time.

Coping with this task is quite easy if you use the capabilities of the jQuery library. This is what we will do with you.

Create an Image Gallery with jQuery

But before writing Java Script code we need to go through some preparatory stages.

First, you need to prepare your images. We will have two types of images: thumbnails and images large size. I created an “img” folder, in which I created 2 more folders: “big” and “small”. I saved large images in the “big” folder (they are all about the same size in width and height, about 500px by 500px). The “small” folder contains thumbnails of the same images (their sizes should also be approximately the same. When I say approximately, this means that a difference of 2-3 pixels does not matter much).

You can use my images by downloading files from the source or create the same folder structure and place your images there, creating your own gallery.

Secondly, we need to create an html file, create the page layout with our gallery in it and connect a css file (style sheet) to this file.

Let's do this now.

1. Open the editor to create our code and create a new html file. Let's call it “gallery.html” and save it in the same directory where the folder with the “img” pictures is located.

Now let's write the contents of this file.

Between the “body” tags there will be a div with the identifier “wrapper”. It will contain 2 main elements: a header tag, which will contain the title, and a div with the identifier “content”, which will contain our entire gallery.

The "content" div will contain a div with ID "main", which will contain the title for the gallery; a div with the identifier “gallery”, where the thumbnails of our images are located, and another div with the identifier “photo”. The div with the identifier “photo” will be empty for now, but when the gallery is running, large images of the corresponding thumbnails will be displayed in it.

That's basically all. The code for all of the above will look like this:

Gallery jQuery

Gallery with jQuery

My Gallery

This is what the page will look like if we open it in a browser:

2. Now the page needs to be styled. To do this, create a style sheet file “style.css” and save it in the same directory as the html document.

Let's connect this file to our page. Go to our html file that we just worked with and between the head tags, connect the file of the just created style sheet by writing the following line of code:

The style sheet is connected and now it's time to add styles for all our elements. Go to the “style.css” file and write the following code:

body(background:rgba(102,102,153,1);) #wrapper(margin:0 auto; width:80%;) header(text-align:center;).logo(font-family:Helvetica, sans-serif; font- size:36px; color:#DD8D15; text-shadow:2px 2px 2px #333333;) h1(font-family:Tahoma, Geneva, sans-serif; font-style:italic; color:#FFF; text-shadow:2px 2px 2px #333; text-align:center;) #gallery(float:left; width:90px; margin-left:20px; border-right:1px solid #fff;) #gallery img(margin:0 0 10px 0; display:inline-block; border:1px solid #000;) #photo(position:relative; margin-left:150px; border-top:1px solid #fff;) #photo img(position:absolute; padding-left:150px ;)

Here we set the color for our page, set the width for the div with the ID "wrapper" and set its position to the center.

We also create styles for fonts, specifying various parameters such as color, size, shadow, font style and alignment.

We assign a left float, width, padding, and right border to the div with the identifier “gallery.”

For thumbnail pictures, we also set the frame indentation and the “display:inline-block” property, which generates block element, wrapped around other web page elements.

We set the div with the identifier “photo” to the left, the top frame, and also position it relatively, and position the large images that will fall within it absolutely.

Now if we refresh the page in the browser, we will see this:

3. And the last preparatory step is to connect the jQuery library to our page and create a js file for your own script.

You can download the jQuery library file from http://jquery.com/ or download it from the sources for this tutorial from the folder called "js".

To download a file to connect the library from the site jquery.com need to:

1. Click on the “Download” button in the site menu.
2. On the page that opens, find the link “Download the compressed, production jQuery 1.10.2” (the last numbers are the version of the library, they may differ).
3. Click on the link right click mouse and select “Save target as...”, after which you need to select the location where you want to save the file.

By the way, you also need to create a folder called “js” in the main directory and place the jQuery library file there, which you will download either from their website or from the sources.

After that, create a new JavaScript file, name it “my_script.js” and save it in the “js” folder as well. This file will contain all our code for running the gallery.

But before writing it, we need to connect these two files to our html page.

To do this, go to the “gallery.html” file again and before the closing head tag add the following lines:

We have connected our files and now we can get down to the fun part - writing code for the gallery to work.

4. Open the file “my_script.js” and write the following lines:

This function waits for our entire HTML page to load before it starts executing the JavaScript code. Between curly braces all our subsequent code will be located. By the way, it is not necessary to write the comment “//all our code will be located here”; it is here just to make it clearer to you.

First we need to select all the links that are in the div with id "gallery" and assign a mouse click event to them. To the click event we will pass anonymous function, which will perform any actions. IN in this case the function will have a variable "evt" that will store the event object (i.e. the link that was clicked).

$(document).ready(function() ( $("#gallery a").click(function(evt)( )); ));

Typically, the browser reacts to clicking on a link in the following way: it sends us to the page specified in the “href” parameter of the link. But in this case we don't need it. We want large images to appear on the same page we're currently on, in a space designated for them. So the first step is to override the browser's default behavior when clicking on our links. Just for this we need the “evt” variable, in which the event object is stored. We need to apply the "preventDefault" event object function to it.

$(document).ready(function() ( $("#gallery a").click(function(evt)( evt.preventDefault(); )); ));

Now if you reload the page in the browser and try to click on the thumbnail, the browser will not send you to another page with a large picture, as it would have been before. You'll just stay on the same page.

First, we'll extract the "href" attribute of the large image whose thumbnail was clicked and place it in the "imgPath" variable.

Secondly, we will create a variable "oldImg" which will store that big picture, which is currently in the image area.

Third, we will create a variable “newImg” in which we will form img tag for a new picture that should appear in the image area. Here we need the “imgPath” variable, which contains the “href” attribute for this image.

$(document).ready(function() ( $("#gallery a").click(function(evt)( evt.preventDefault(); var imgPath = $(this).attr("href"); var oldImg = $("#photo img"); var newImg = $("" ));

We have created all the variables we need. All that remains is to do some things with them.

So, we need the new picture, the thumbnail of which the visitor just clicked, to disappear first. You ask: “Why?” The fact is that in order to create a manifestation effect, we first need to completely hide the image. We can achieve this using the hide() function.

The next action will be to add a new image to the tag with the identifier “photo” and here we will use the prepend() function, which will add the html code of the image to the tag, namely at the very beginning.

And now our picture should appear beautifully, for example, in one second. The fadeIn() function will help us here.

$(document).ready(function() ( $("#gallery a").click(function(evt)( evt.preventDefault(); var imgPath = $(this).attr("href"); var oldImg = $("#photo img"); var newImg = $(""); $("#photo").prepend(newImg.fadeIn(1000)); ;

You can even check your page in the browser (after reloading it first). If you click on any picture, it will appear. But if you click on another one after that, nothing else will happen.

That's right. Now, before a new picture appears, we must delete the old one.

And we will do it like this: first we will hide old picture within 1 second (this is how we get it smooth transition between images). The fadeOut() function will help us with this.

But this is not enough, you need to not only hide the image, but also remove it from the “photo” tag, and therefore we will pass the effect time (1000 milliseconds) as the first parameter to the fadeOut() function, and as the second parameter a function that will delete the old picture using the remove() function.

Our gallery is now up and running. You can reload the browser page and check if it works.

The only thing left to do is to add one more line of code so that when the page loads, the first photo will already be displayed in the area for large images.

To do this, we will use selectors and a jQuery library filter to select the first image, and then “hang” it on it click event(), to which we will not pass any arguments. This will cause the pre-defined event handlers to run and the image to appear in desired area.

We need to add just one line almost at the very end. Thus, all our JavaScript code will look like this:

All! The gallery is ready! You can see her work by clicking on the icon that says “Demo” at the very beginning of the post.

You can place such a gallery on your website or blog to show your photos or your products... or anything else you like; whatever you come up with yourself.

JQuery is truly very powerful. For example, in this specific case We wrote very little code and got a perfectly working gallery. And this is only a small part of what you can do if you know the capabilities of this library and know how to use them.

If this topic is interesting to you, but you are new to it, then I can highly recommend good course from Evgeny Popov “Javascript + jQuery for beginners in video format”.

In it you can get acquainted not only with the jQuery library, but also with Java basics Script, which you undoubtedly also need to know. After completing this course, you will not only learn the basics, but also learn to understand this programming language and create interactive elements web pages.

And on this note, I will say goodbye to you.

If you liked the lesson or have any questions, write comments, and I will definitely answer you and generally be glad to see any of your comments!

Also share this lesson with your friends using the buttons social networks and subscribe to blog updates (if you haven't already). I promise you many interesting and useful lessons and articles.

I also congratulate you on the approaching New Year Holidays and wish you a fun time!

Image galleries in the form of a slider. When I started preparing material for this collection, I thought that there would simply be two infinities of high-quality material, since the topic of image galleries is as old as the world and is very popular. My surprise knew no bounds when, with each newly opened demo, the hope of finding something decent melted before our eyes. In this regard, the selection was not large but, in my opinion, with quite interesting specimens. Among them there are both adaptive image galleries and galleries.
By the way, in the previous topic I made a selection of gallery plugins for WordPress, so if you have a website on WordPress, I think it will be extremely interesting to you.

1. Unite Gallery A free, responsive photo and video gallery based on the jQuery library. During development, the emphasis was on ease of use and configuration. Comes with pretty a large number high-quality design themes, and also, importantly, there is the opportunity to write own themes registration.2. Responsive Image Gallery with Thumbnail Carousel Responsive image gallery with the function of disabling the thumbnail carousel. Adjusts to the size of your screen, there is a preloader for loading images.

4. Full Page Image Gallery with jQuery Another full-screen image gallery. Its peculiarity and “zest” is the movement of an enlarged full-screen image depending on the position of the mouse.
The thumbnail bar at the bottom of the screen scrolls automatically when the user moves the mouse.

5. Slider Gallery With jQuery Ideal for dividing galleries into albums. When you select an album, thumbnails with an image slider will be shown.

6. Galleria This is a well-designed responsive image gallery capable of displaying photo and video galleries from Flickr, Picasa, YouTube, etc. Mobile device support and ability to work in full screen mode. It is possible to display signatures. There are paid Webdesign with jQuery is very easy! PP Gallery - universal photo gallery with miniatures.
Installation and configuration

Among the variety of photo galleries, a special place is occupied by programs that use thumbnail previews to move through pictures in the viewing window (see, for example, the article Photo Gallery prettyPhoto).This method is especially convenient for galleries with a large number images, since scrolling through them sequentially is quite tedious. You can, of course, go back to original page and choose the desired picture, but this method cannot be called successful.

The versatile PP Gallery photo gallery, a plugin from the great free jQuery library, makes it easy to browse and open any number of images without leaving the gallery viewer. PP Gallery has ample opportunities navigation, and the presence of a slider for moving through the thumbnails allows you to quickly navigate even through a very large collection of photos. In addition, the thumbnails in the photo gallery window itself in many cases make it unnecessary to place them on the main page (more on this below).

The PP Gallery photo gallery has a viewing mode both by clicking the mouse or using the forward/back keys, and in slideshow. It is easy to install, has an elegant appearance and that's it necessary settings. Detailed description PP Gallery photo galleries can be viewed on the developers' website. A working example is shown in the figure:

Installing a photo gallery PP Gallery

As usual, we start by creating a new folder on the site, calling it, for example, ppgallery. Then download the archive and unpack it into the created folder. We will have one js folder with scripts and another with CSS files.

Next, we’ll add to the header of the page with the future photo gallery inside the tag... the following lines indicating the paths to our new files, and a little JavaScript to initialize and configure the PP Gallery parameters:

$(document).ready(function() (
$("#gallery").ppGallery((
screenFade: 0.8, //background transparency
screenColor: "#333333", //background color
thumbWidth: 60, //width of thumbnails. Default 60px
maxWidth: "700", //control the maximum width of images (set larger than the largest)
slideShowDelay: "2", //speed of changing pictures in the slide show (sec)
showHiddenGalleryButton: "", //#view - hide thumbnails on the gallery page (not to be confused with the gallery window!)
autoOpen: 0 //launch the gallery immediately when the page opens (1= yes, 0= no)
});
});

Important Note: if your site uses several jQuery plugins, then it is more convenient to transfer the jquery.js file (preferably latest version) V root folder so as not to download it several times. In this case, the line for accessing it will look the same for all plugins. In particular, for our example it turns out like this:

It is not recommended to use several on one page different versions jQuery so they don't conflict with each other. At the same time, be sure to check the operation of the plugins with installed version jQuery, since not all versions are interchangeable.

To place images (large - big.jpg and thumbnails - small.jpg), an unordered list of regular hyperlinks with the identifier id="gallery" is used:

If you want to display captions under images, they should be included in hyperlinks.

This completes the installation of PP Gallery, and you can launch the photo gallery and admire it in the browser. As they often say in advertising, you will be surprised how simple and fast everything is... However, this is typical for most jQuery plugins, which have been making the life of web designers easier for several years now.

Setting photo gallery options PP Gallery

The main settings for the appearance of the PP Gallery photo gallery are located in the elementary CSS file ppgallery.css and in the js script we placed in the ... tag. Russian comments, I hope, do not require explanation.

Since the PP Gallery photo gallery window displays thumbnails of all images, then, in principle, their duplication on the site page becomes optional. The only exception is if you want to colorfully design a photo gallery with all sorts of bells and whistles. But why do this if by clicking on any picture the visitor still goes to the PP Gallery window and your work will go unnoticed?

Therefore, on the site page you can hide all gallery images, leaving only the launch button for the PP Gallery program. To do this, enter the value #view in the initialization line
showHiddenGalleryButton: "#view", //#view - hide thumbnails on the gallery page
and add a photo gallery launch button using a tag before the list of images (before

The design of the button can be anything: in the form of a simple inscription, button, picture, etc. For example, such a button can be made using a thumbnail of a folder with pictures, as shown on the right. The example, again, is working, you can click!

Let's summarize.
PP Gallery is a universal photo gallery that can be easily and quickly installed on a website. It has an attractive appearance and advanced navigation capabilities using thumbnail previews, which in many cases allows you to avoid placing images on the main photo gallery page.

Hello, dear readers! 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 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 that’s it 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. Just like !

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

1
2
3
4
5
6
7
8

Categories:
All
Category 1
Category 2
Category 3
Category 4

1
2
3
4
5
6
7
8
9
10
11

Name of the picture

published: 2012

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 required for javascript call and opening 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 already use ready-made library PrettyPhoto, which is responsible for enlarging the image, and css code quite a lot. 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 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-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 outlining an image, set background color(white) and a padding of 10 pixels. List item sizes are set in .portfolio-area li .

And finally, the most important thing is what the whole lesson is for. This jQuery code. Let's start by filtering the pictures 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 child elements portfolio-area and write it to a variable
var $data = $(".portfolio-area" ) .clone () ;

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

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

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 is 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 transfer the resulting variable to jquery library quicksand, which filters images. That's it for filtering.

Now, as for enlarging the image in the pop-up window. 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 on a link that has rel attribute starts with prettyPhoto. Then the prettyPhoto library comes into play and the image is miraculously enlarged. By the way, we are also passing several parameters. Such as animation speed - fast, slide show delay - 5 seconds, theme Facebook design(there are 5 themes in total, they are located in the images/prettyPhoto folder), and we also prohibit the display of the name of the picture and the enlargement of the picture when hovering the mouse. Full documentation for prettyPhoto can be found

To stay up to date with the latest articles and lessons, subscribe to