In this tutorial I will show you how to create a minimalist, but at the same time convenient and functional photo gallery on 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.
Two free libraries will be used to create this gallery JQuery: 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. And in everything else this gallery worthy of attention.
SOURCES
HTML markup
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 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.
CSS Styles
I won’t particularly focus on styles, since we are using a ready-made library PrettyPhoto, which is responsible for enlarging the image, and css code enough. 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.
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 .
jQuery
And finally, the most important thing is what the whole lesson is for. This is jQuery code. Let's start by filtering the pictures 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 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 considered 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 all, then we will not place all elements of the list into 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 library jquery 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.
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 library comes into play prettyPhoto, and the image miraculously enlarges. 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.
1. jQuery gallery with page turning effect
A similar solution can be used to display the latest blog articles or to present products.
A unique way to display your photos in a fancy jQuery gallery.
3. jQuery image gallery for a product, “slideJS” plugin
The jQuery plugin is perfect for implementing a product page with multiple images. The transition between images can be done using thumbnails or using navigation arrows.
The image enlarges when you hover your mouse over it.
5. Elegant Lightbox gallery “ppGallery”
6. jQuery Touch-Gallery
7. New jQuery gallery with thumbnails
Professional jQuery gallery 2011.
8. jQuery plugin “Nivo Zoom”
Another high-quality jQuery plugin from the developers of Nivo slider. Enlarge the image by clicking on the thumbnail.
9. jQuery 3d Wall Gallery
New jQuery gallery for 2011. The feed of images spans the entire width of the screen. You can navigate between photos in three ways: using the mouse wheel, scrolling at the top of the gallery, and using the thumbnail block at the bottom. The gallery looks very impressive.
Images in the gallery are randomly enlarged and reduced again creating a bubble effect.
11. Unusual display of images in the jQuery gallery
Using the slider at the top, you can change the distance between images in the stack. When you click on an image, it rotates.
12. jQuery gallery plugin “MB.Gallery”
13. jQuery gallery that stretches to fill the entire screen
Plugin from 2011. A new gallery with descriptions of images, stretching across the entire area of the browser window, regardless of its size. The image thumbnails are interestingly implemented. The transition between photos is carried out using the arrows near the thumbnail and using the mouse wheel.
14. Lightweight jQuery gallery
The plugin automatically scans the folder and creates small copies of images.
16. Stylish gallery using jQuery and Raphael libraries
An interesting effect when hovering the mouse over a thumbnail.
17. New version of jQuery plugin “Supersized” version 3.1
Quite recently I already mentioned this jQuery solution for creating full-screen galleries. Today I want to introduce you latest version this professional plugin. The script has been completely rewritten, now the gallery works even faster, and some interesting settings have been added, for example, navigation using the keyboard, variable speed of changing images, screen size and others.
18. jQuery plugin “Galleria 1.2.2”
New jQuery gallery for your projects.
The gallery pops up on the page when you press a button. Thumbnails appear around the enlarged image. You can control the automatic change of images. Technologies used: jQuery, CSS, PHP.
20. Plugin “Timer Gallery”
jQuery gallery. Implemented automatic changing of slides and scrolling of thumbnails if there are too many of them.
Image gallery plugin using jQuery.
22. javascript gallery for viewing on mobile devices “PhotoSwipe”
Image gallery optimized for viewing on mobile devices(phones or tablets).
23. javascript gallery with 3D effect
24. jQuery morphing gallery
New jQuery slider. Several cool animated effects when changing slides.
25. jQuery plugin “Galleria 1.2.3”
26. jQuery image gallery “Image Wall”
An original gallery in the form of miniatures of various sizes scattered across the screen, stylized as paintings. When you click on the thumbnail, an area with a description of the image appears and when you click again, the original large image pops up.
27. CSS3 gallery
Interesting hover effect.
28. Gallery with miniatures “TN3 Gallery”
jQyery gallery with thumbnails. The ability to view in a compact window and in a full-screen window has been implemented, as well as the ability to disable/enable automatic slide changing.
29. Grid of images “Grid-Gallery”
The image grid is stretched depending on the width of the browser window. An interesting hover effect: the active row and column are highlighted.
30. jQuery Swap Gallery
Lightweight jQuery gallery in a few lines of code.
The demo page presents several options for drop-down mega menus, in different styles. In this menu you can configure: the drop-out effect, the drop-out speed, and also make a choice between a drop-out by clicking or by hovering the mouse over an item.
31. jQuery Image Gallery
jQuery gallery with image captions. Several slide transition effects. Navigation between images is carried out either using arrows or by clicking on the thumbnail.
The image and its miniatures are made in the form of circles.
33. jQuery photographer’s portfolio plugin “Portfolio Image Navigation”
An original javascript solution for designing a photographer's portfolio. Navigation between images is carried out using the Up/Left/Right arrows and using mini-squares (imitation of movement in 2D space). You can group photos from different photo sessions into different vertical rows and navigate through them using navigation elements. Watch the demo.
34. Plugin “jmFullZoom”
Plugin for viewing images that stretch to the entire size of the browser window. Can be used to display works from a portfolio.
35. Photo card
Gallery integrated with Google map. You can expand it to full screen by clicking on the icon in the lower right corner. Perfect for travel websites.
36. Image gallery with thumbnails
jQuery gallery with thumbnails.
37. jQuery gallery “Galleriffic”
Slideshow with thumbnails.
38. jQuery CSS3 plugin “Wave Display Effect”
Wave-like presentation of images and content on a page. When you click on a thumbnail, all images are enlarged and their names appear. When you press it again, a block with a description of the photo opens.
Many display options and settings.
42. Plogger
43. A simple, cute gallery made with CSS, without using scripts
Looks beautiful and works great in all modern browsers
You can control automatic slide show (start/stop), switch slides using keyboard arrows, automatic pagination of slide titles if there are many of them, supports multiple galleries on one page, captions for slides, API support and the ability to create your own slide transition effects
46. Gallery in the form of a stack of photos
This is what the result of the gallery that we will create should look like. You can watch the demo and, if you wish, download the final result of the gallery.
I spent a long time choosing the topic for today’s topic. As a result, I noticed that we have not yet made selections with image galleries. I think it's a great topic because galleries present on many sites. Frankly, they are all not very attractive. Taking into account current development trends jquery, html5 etc. I thought, after all, there must be much more attractive solutions than those that I had encountered before. So. After spending a day, we managed to find a huge number of scripts. From this whole mountain, I decided to select only, because I love, as you already noticed from previous posts.
Image gallery applicable not only in case with photo albums. The script can be used, I think it would be even more correct, as portfolio for photographers, designers etc. Jquery effects
will help attract the attention of visitors and simply add elegance to your site.
So. Collection for your attention 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.
PHOTOBOX
Free, easy, responsive gallery images, in which all effects and transitions are made using css3. Ideal for creating a photographer's portfolio website.
S Gallery
Attractive Jquery image gallery plugin. The animation works using css3.
DIAMONDS.JS
Original plugin for creating an image gallery. The miniatures are shaped like rhombus, what in this 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 generates an adaptive grid of images in the shape of a diamond.
Superbox
Modern image gallery using Jquery, css3 and html5. We are all used to the fact that when you click on a preview, the full image opens in a lightbox (pop-up window). The developers of this plugin decided that the lightbox had already outlived its usefulness. 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 mobile devices with any screen resolution. An excellent solution for creating a web designer portfolio.
THUMBNAIL GRID WITH EXPANDING PREVIEW
The plugin is adaptive image grid. When you click below, a larger photo and description will appear. Good for creating a portfolio.
jGallery
jGallery is 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
Simple, adaptive Pinterest-style grid image gallery.
Gallery
Another 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.js
Excellent free image gallery 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 Gallery
Flexible gallery. Capable of outputting to modal window not only images, but also video. 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).Today we'll look at the jQuery Flipping Gallery plugin, which allows you to create cool image galleries with very original transitions. In the example there are 5 types of transitions using this plugin. The plugin is really very easy to use, so anyone can fully use it.
An example can be seen here:
Download
We'll look in more detail at how to create a menu from Demo 2, with the menu appearing in the top left.
HTML part
First you need to connect the jQuery library, which you can download here, and the Flipping Gallery plugin, between the tags :
| 1 2 3 4 5 6 | <head > ... <"http://code.jquery.com/jquery-1.9.1.js"> <script type = "text/javascript" src = "http://code.jquery.com/jquery.flipping_gallery.js"> ... </head> |
Then we arrange the images. You can add as many images as you wish:
| 1 2 3 4 5 6 7 8 | <div class = "gallery" >
<a href = "#" > |
And to add a description for images (as in demos 4 and 5) you need to use the attribute data-caption:
| 1 2 3 4 5 6 7 8 | <div class = "gallery" >
<a href = "#" data-caption = "Very" > |
JS part
| 1 2 3 4 5 6 7 8 9 | $(".gallery") .flipping_gallery (( direction: "forward" , selector: "> a" , spacing: 10 , showMaximum: 15 , enableScroll: true , flipDirection: "bottom" , autoplay: 500 ) ) ; |
Let's look at what each method means:
- direction— a method responsible for how images will appear. If “forward”, then the image from the beginning will be placed at the end, if “backward” - vice versa. The default value is “forward”.
- selector— a selector by which we select images; it can be changed as desired.
- spacing— sets the distance between images in perspective.
- showMaximum— sets the number of images that are visible to the user. You can use at least 100 images, but only the first 15 will be shown, which is very convenient and does not load the browser.
- enableScroll- You can view images using the mouse wheel.
- flipDirection— determines where the image will slide: “left” - left, “right” - right, “top” - up and “bottom” - down. By default it slides down.
- autoplay— gallery autostart. Specified in milliseconds, i.e. How long will it take for the images to change?
Conclusion
You now have a stunning gallery to use when posting your photos.
In our collection of scripts you can find small but very useful and functional plugins for your website. Turning to the means jQueryGallery, easy to organize gallery digital photos With nice design, with the ability to scroll, zoom, view thumbnails and many others useful functions. There are both strict solutions for professional websites, and bright ones with animation and other special effects for entertainment projects.
By means jQuery images can be viewed without reloading the page and without increasing traffic flow. The presented plugins allow you to optimize the loading of images in real time and present the gallery in a convenient and user-friendly way. Thanks to the ease of settings and many available solutions, your own jQuery photo gallery can now look exactly the way you want. The presented scripts have been tested on different platforms and have excellent compatibility.
Loading...
