Jquery portfolio gallery. Gallery as portfolio

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 great theme, because 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 the 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 simply add elegance to your website.
So. For your attention collection jquery plugin of image galleries for the site.
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.

PHOTOBOX

Free, lightweight, responsive image gallery, in which all the effects, transitions are made using css3. Ideal for creating a photography website.

S Gallery

Attractive Jquery image gallery plugin... The animation works with css3.

DIAMONDS.JS

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

Superbox

Modern image gallery using Jquery, css3 and html5... We are all used to the fact that when you click on the preview, the full image opens in a lightbox (pop-up window). The developers of this plugin decided that the lightbox was already outdated. Images in this gallery open below the preview. Check out the demo and see that this solution looks a lot more modern.
|

Smooth Diagonal Fade Gallery

A modern image gallery in which previews are distributed over the entire screen space... The script can scan a folder with a photo on the server, that is, you do not need to insert each image separately. It is enough to upload pictures to a folder on the server and specify the path to the directory in the settings. Then the script will do everything by itself.

Gamma gallery

A stylish, lightweight, responsive image gallery with a Pinterest-style grid that's now very popular. The script works fine for both stationary computers and on mobile devices Oh with any screen resolution. A great solution for creating a web designer portfolio.

THUMBNAIL GRID WITH EXPANDING PREVIEW

The plugin is responsive image grid... When you click below, a larger photo and a description are displayed. Good for creating a portfolio.

jGallery

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

Glisse.js

Simple yet 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, responsive gallery of images with a grid in the style of Pinterest.

Galereya

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 gallery images using JQUERY, 5 and CSS3. She has a very attractive appearance and will surely grab the attention of your visitors.

flipLightBox

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

blueimp gallery

Flexible gallery. Capable of displaying in 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 with additional plugins (See next plugin).

Competently compiled and visually designed, in our case, it is separate page, is an important element of a personal website or blog, any specialist who has reached a certain level of skill in their professional activities.
A portfolio page is a kind of a report, or a visual summary, with the help of which you can clearly demonstrate to readers and visitors of the site / blog a set of the most successful completed works, be it photos, articles, publications, design elements, etc.
I do not have such a page and, on my part, this is an annoying omission that needs to be corrected as soon as possible, which I am actually working on at the moment.
In the vast expanses global network, can be found great amount ready-made templates pages to organize your portfolio, and the variety of such pages is really impressive. So, those who are in scrap to delve into all the intricacies of web design and development will always be able to find a suitable option for themselves. Well, for those who are suffering knowledge in site building, I propose to analyze an example adaptive layout, a simple portfolio page, with filtering of completed work by category, done on, diluted with an attractive transition effect, with animation elements.

The layout of the page, executable javascript and some design elements, were given by the wonderful web designer and developer Kevin Liew (queness.com). When choosing the optimal solution, it was important for me that the simplicity of execution, the functionality of the jQuery plugin, correct operation in all modern browsers, and given the growing popularity of using various mobile devices for Internet surfing, the adaptability of the design of the future page. No fancy, designer bells and whistles or heavyweight plugins.

The basic layout has two main elements user interface that we have to build is the navigation through the tabs for filtering the categories of the presented works, and the grid of thumbnails itself with the effect of a pop-up caption on hover.
For starters, for everything to work in the end, you will need jQuery at least version 1.7.0. If you have not yet connected it, then add next line before the tag :

Run the MixItUp plugin, paste this code after the above files:

< script type= "text/javascript" >$ (function () (var filterList = (init: function () ($ ("# portfoliolist"). mixitup ((targetSelector: ".portfolio", filterSelector: ".filter", effects: ["fade"], easing : "snap", // call the hover effect onMixEnd: filterList. hoverEffect ()));), hoverEffect: function () ($ ("# portfoliolist .portfolio"). hover (function () ($ (this). find (". label"). stop (). animate ((bottom: 0), 200, "easeOutQuad"); $ (this). find ("img"). stop (). animate ((top: - 30 ), 500, "easeOutQuad");), function () ($ (this). Find (". Label"). Stop (). Animate ((bottom: - 40), 200, "easeInQuad"); $ ( this). find ("img"). stop (). animate ((top: 0), 300, "easeOutQuad");));)); filterList. init ();));

Separately consider all the plugin options, it makes no sense, the default is pretty the best option... Well, if you really insert someone into experimenting with parameters, please, everything is in your power.

To form the page layout and the appearance of the elements, connect a couple of files to the document . , one for the base styles, let's call it for example: layout.css and another small CSS file normalize.css, to ensure better consistency between browsers in the standard styling of elements:

< link rel= "stylesheet" href= "css/normalize.css" > < link rel= "stylesheet" href= "css/layout.css" >

Now let's sort everything out in order, if possible without unnecessary water, in an accessible and understandable way, in our native, long-suffering language.

< ul id= "filters" class = "clearfix" > < li>< span class = "filter active" data- filter= "app card icon logo web" >Everything < li>< span class = "filter" data- filter= "app" >Applications < li>< span class = "filter" data- filter= "card" >Business cards < li>< span class = "filter" data- filter= "icon" >Icons < li>< span class = "filter" data- filter= "logo" >Logo < li>< span class = "filter" data- filter= "web" >Web design

• Everything
• Applications
• Business cards
• Icons
• Logo
• Web design

On the navigation panel, we place the entire list of works, divided into categories. We need to associate each portfolio category through the data-cat attribute with one or another item in the navigation bar in accordance with the value in the data-filter attribute. By matching the values ​​of data-filter to data-cat, portfolio items will be filtered by category.
In addition, we will add to the thumbnail, hidden for the time being, a small panel with the name of the work and the title of the category, which pops up only when you hover over the picture. And to make it easier to shape the appearance of this whole structure in CSS, we will write the corresponding classes to the elements:

< div id= "portfoliolist" > < div class = "portfolio logo" data- cat= "logo" > < div class = "portfolio-wrapper" > < img src= "img/portfolios/logo/5.jpg" alt= "" /> < div class = "label" > < div class = "label-text" > < a class = "text-title" >Hosting by Beget. Ru < span class = "text-category" >Logo < div class = "label-bg" > .........

Please note that you can add links to the picture or directly to the signature so that the user can fully contemplate all your works.

CSS

Now, quietly, let's move on to the most interesting thing, to the formation in CSS of the general styles of the user interface of our portfolio page and its adaptive version. In the article I will indicate only the basic (default) values, that is, without any background images and connected fonts, all this, who needs it, can be seen in the demo, or found in the archive with the sources.

.container (position: relative; width: 960px; margin: 0 auto; / * You will be able to see the chain of transitions when the browser window is resized * /-webkit-transition: all 1s ease; -moz-transition: all 1s ease; -o-transition: all 1s ease; transition: all 1s ease; ) #filters (margin: 1%; padding: 0; list-style: none;) #filters li (float: left;) #filters li span (display: block; padding: 5px 20px; text-decoration: none; color : # 666; / * add some shadow for the text * / text-shadow: 1px 1px #FFFFFF; cursor: pointer; ) / * change the background of the category on hover * /#filters li span: hover (background: # 34B7CD; text-shadow: 0 0 2px # 004B7D; color: #fff;) / * background of active category item * /#filters li span.active (background: rgb (62, 151, 221); text-shadow: 0 0 2px # 004B7D; color: #fff;) #portfoliolist .portfolio (-webkit-box-sizing: border-box; -moz-box-sizing: border-box; -o-box-sizing: border-box; width: 23%; margin: 1%; display: none; float: left; overflow: hidden;) .portfolio-wrapper ( overflow: hidden; position: relative! important; background: # 666; cursor: pointer;) .portfolio img (max-width: 100%; position: relative;) / * signatures are hidden by default * /.portfolio .label (position: absolute; width: 100%; height: 40px; bottom: -40px;) .portfolio .label-bg (background: rgb (62, 151, 221); width: 100%; height: 100 %; position: absolute; top: 0; left: 0;) .portfolio .label-text (color: #fff; position: relative; z-index: 500; padding: 5px 8px;) .portfolio .text-category ( display: block; font-size: 9px;)

Container (position: relative; width: 960px; margin: 0 auto; / * You will be able to see the chain of transitions when the browser window is resized * / -webkit-transition: all 1s ease; -moz-transition: all 1s ease; -o- transition: all 1s ease; transition: all 1s ease;) #filters (margin: 1%; padding: 0; list-style: none;) #filters li (float: left;) #filters li span (display: block; padding: 5px 20px; text-decoration: none; color: # 666; / * add some shadow for the text * / text-shadow: 1px 1px #FFFFFF; cursor: pointer;) / * change the category background on hover * / #filters li span: hover (background: # 34B7CD; text-shadow: 0 0 2px # 004B7D; color: #fff;) / * background of the active category item * / #filters li span.active (background: rgb (62, 151, 221 ); text-shadow: 0 0 2px # 004B7D; color: #fff;) #portfoliolist .portfolio (-webkit-box-sizing: border-box; -moz-box-sizing: border-box; -o-box- sizing: border-box; width: 23%; margin: 1%; display: none; float: left; overflow: hidden;) .po rtfolio-wrapper (overflow: hidden; position: relative! important; background: # 666; cursor: pointer; ) .portfolio img (max-width: 100%; position: relative;) / * captions are hidden by default * / .portfolio .label (position: absolute; width: 100%; height: 40px; bottom: -40px;). portfolio .label-bg (background: rgb (62, 151, 221); width: 100%; height: 100%; position: absolute; top: 0; left: 0;) .portfolio .label-text (color: # fff; position: relative; z-index: 500; padding: 5px 8px;) .portfolio .text-category (display: block; font-size: 9px;)

In the second part, right in the same style sheet, using a few media queries, we will create the alternate CSS sections. To make the layout of our page display correctly on the screens of various mobile devices, let's add alternative CSS rules for different screens in these sections. Thus, we can easily override any rules set earlier in our CSS table for ordinary browsers and achieve the very desired adaptability.

/ * Tablet * / @media only screen and (min-width: 768px) and (max-width: 959px) (.container (width: 768px;)) / * Mobile - Note: Design for 320px width * /@media only screen and (max-width: 767px) (.container (width: 95%;) #portfoliolist .portfolio (width: 48%; margin: 1%;)) / * Mobile - Note: Design for 480px width * /@media only screen and (min-width: 480px) and (max-width: 767px) (.container (width: 70%;))

/ * Tablet * / @media only screen and (min-width: 768px) and (max-width: 959px) (.container (width: 768px;)) / * Mobile - Note: Design for 320px width * / @media only screen and (max-width: 767px) (.container (width: 95%;) #portfoliolist .portfolio (width: 48%; margin: 1%;)) / * Mobile - Note: Design for 480px width * / @media only screen and (min-width: 480px) and (max-width: 767px) (.container (width: 70%;))

That's all. Our wonderful page under the capacious title "Portfolio" is ready, it remains only to fill it with our no less wonderful and outstanding works, and put it on display to the whole world. You can still be proud of yourself in a quiet, modest way. The main thing is not to overdo it in this matter.
Look again at the example and, if necessary, take the source code, at your leisure, in a quiet home environment, you can bring this work to perfection.

When creating the lesson, the following material was used:. The original, pristine clean, fresh from the author's pen, the portfolio page is in the same place.

Good luck to everyone and with benefits for the body, to spend the rest of the short summer!

In this tutorial we will write a beautiful portfolio, with using jQuery, CSS3 and the Timeline plugin. Timeline is a jquery plugin that specializes in displaying the timeline of events. In this portfolio, you can insert different types media data: tweets, videos, maps, pictures, records, and then arrange them in accordance with the date. If you work on the design, you get a beautiful portfolio that will reflect your interests and work.

Html

By default, the Timeline plugin contains a light color scheme. It is very convenient and necessary in most cases. Although, for our portfolio, dark designs are more elegant. Therefore, we will optimize it the way we like it.

First, let's take a look at the basic html markup of the page:

index.html

In the head section, we have the plugin styles - timeline.css and styles.css, which will contain our design decisions. At the end of the page, we include the jQuery library, the timeline plugin, and scripts.js, which will initialize the plugin.

When we call the plugin, it finds a DIV block with ID = timeline. It mounts html markup inside the block, after which the page becomes the following: