Time does not stand still and with it progress. This also affected the Internet. You can already notice how the appearance of sites is changing, it is especially popular adaptive design. And as a result, many new responsive jquery sliders, galleries, carousels or similar plugins.
1. Responsive Horizontal Posts Slider

Responsive horizontal carousel with detailed instruction by installation. It is made in a simple style, but you can style it for yourself.

2. Slider on Glide.js

This slider is suitable for any website. This uses Glide.js with open source. Slider colors can be easily changed.

3. Tilted Content Slideshow

Responsive content slider. The highlight of this slider is the 3d effect of images, as well as various random appearance animations.

4. Slider using HTML5 canvas

Very beautiful and impressive slider with interactive particles. Made with HTML5 canvas

5. Image Morphing Slider

Slider with morphing effect (Smooth transformation from one object to another). AT this example the slider is well suited for the portfolio of a web developer or a web studio in the form of a portfolio.

6. Circular Slider

Slider in the form of a circle with the effect of flipping the image.

7. Blurred background slider

Responsive slider with switching and background blur.

8. Responsive fashion slider

Simple, lightweight and responsive website slider.

9. Slicebox - jQuery 3D image slider(UPDATED)

Updated version of Slicebox slider with fixes and new features.

10.Free Animated Responsive Image Grid

A jQuery plugin for creating a flexible image grid that will switch shots using different animations and timings. This can look good as a background or decorative element on the site, as we can set the selective appearance of new images and their transitions. The plugin is made in several versions.

11.Flex slider

Universal free plugin for your website. This plugin comes in multiple slider and carousel options.

12. Photo frame

Fotorama is a universal plugin. It has many settings, everything works quickly and easily, it is possible to view slides in full screen. The slider can be used both in fixed size and adaptive, with and without thumbnails, with and without circular scrolling and much more.

P.S.I put the slider several times and I think that it is one of the best

13. Free and Responsive 3D Thumbnail Gallery Slider.

Experimental slider gallery 3DPanelLayout with grid and interesting animation effects.

14. Slider on css3

Responsive slider made using css3 with smooth appearance of content and light animation.

15. WOW Slider

WOW Slider is an image slider with amazing visual effects.

17.Elastic

Elastic slider with full responsiveness and slide thumbnails.

18. Slit

This is a fullscreen responsive slider using css3 animation. The slider is made in two versions. The animation is done quite unusually and beautifully.

19. Responsive photo gallery plus

Simple free slider-gallery with uploading images.

20. Responsive slider for WordPress

Responsive free slider for WP.

21. Parallax Content Slider

Slider with parallax effect and control of each element with CSS3.

22. Slider with music binding

Slider using open source JPlayer. This slider resembles a presentation with music.

23. Slider with jmpress.js

The responsive slider is based on jmpress.js and will therefore allow some interesting 3D effects to be applied to the slides.

24. Fast Hover Slideshow

slide show with fast switching slides. Slides switch on hover.

25. Image Accordion with CSS3

Image accordion with css3.

26. A Touch Optimized Gallery Plugin

This is a responsive gallery that is optimized for touch devices.

27. 3D Gallery

3D Wall Gallery- created for the Safari browser, where the 3D effect will be visible. When viewed on a different browser, the functionality will be fine, but the 3D effect will not be visible.

28. Slider with pagination

Responsive pagination slider with jQuery UI slider. the idea is to use a simple navigation concept. It is possible to rewind all images or switch between slides.

29.Image Montage with jQuery

Automatic arrangement of images depending on the width of the screen. A very useful thing when developing a portfolio site.

30. 3D Gallery

A simple 3D circular slider in css3 and jQuery.

31. Full screen mode with 3D effect on css3 and jQuery

Slider with the ability to view full-screen images with a beautiful transition.

Competently composed and visually designed, in our case, this is a separate page, it is an important element of a personal website or blog, of any specialist who has reached a certain level of skill in his professional activity.
A portfolio page is a kind of report, or a visual summary, with the help of which you can clearly demonstrate to readers and visitors to the site / blog, a set of the most successful completed works, whether it be photos, articles, publications, design elements, etc.
I don’t have such a page and, on my part, this is an unfortunate omission that needs to be corrected as soon as possible, over what actually in this moment and I work.
In the vast expanses of the global network, you can find a huge number ready-made templates pages for portfolio organization, and the variety of such pages is truly impressive. So, whoever cares about all the intricacies of web design and development will always be able to find a suitable option for themselves. Well, for those who suffer from knowledge in website building, I propose to analyze an example of an adaptive layout, a simple portfolio page, with filtering of work performed by category, made on, diluted with an attractive transition effect, with animation elements.

The layout of the page, executable javascript and some design elements, gave out "to the mountain", a wonderful web designer and developer Kevin Liew (queness.com). When choosing the optimal solution, it was important for me that it was ease of execution, the functionality of the jQuery plugin, correct operation in all modern browsers, and given the ever-increasing popularity of using various mobile devices for Internet surfing, the adaptability of the design of the future page. No pretentious, designer bells and whistles and heavy plug-ins.

The basic layout consists of two main elements user interface The ones we need to build are tabbed navigations for filtering the categories of submitted work, and the thumbnail grid itself with a pop-up caption effect on hover.
For starters, in order for everything to eventually work, jQuery will be required at least version 1.7.0. If you have not yet connected it, then add the following 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() ; ) ) ;

It makes no sense to consider all the plugin options separately, the default is quite the best option. Well, if anyone is put into experiments 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 layout.css and another small CSS file normalize.css , for better browser consistency in standard design elements:

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

Now we will analyze everything 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" >All < 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

  • All
  • Applications
  • business cards
  • Icons
  • Logo
  • Web design

On the navigation panel, we place the entire list of works, divided into categories. We need to connect each portfolio category through the data-cat attribute with one or another navigation bar item in accordance with the value in the data-filter attribute. By matching data-filter values ​​with data-cat , portfolio items will be filtered by category.
In addition, to the thumbnail, hidden for the time being, we will add a small panel with the name of the work and the category title, which pops up only when you hover over the image. And to make it easier to form the appearance of this entire 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 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 see all your work in full.

css

Now, quietly glanders, let's move on to the most interesting part, 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 pictures and connected fonts, all this, who needs it, can be seen in the demo, or found in the source archive.

.container ( position : relative ; width : 960px ; margin : 0 auto ; /* You will be able to see the navigation chain 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 to the text */ text-shadow : 1px 1px #FFFFFF ; cursor : pointer ; ) /* change category background 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 ; ) /* captions are hidden by default */.portfolio .label ( position : absolute ; width : 100% ; height : 40px ; bottom : -40px ; ) % ; position : absolute ; top : 0 ; left : 0 ; ) .portfolio .label-text ( color : #fff ; position : relative ; z-index : 500 ; padding : 5px 8px ; ) display : block ; font-size : 9px ; )

Container ( position: relative; width: 960px; margin: 0 auto; /* You will be able to see the transition chain 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 to the text */ text-shadow: 1px 1px #FFFFFF; cursor: pointer; ) /* change category background 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; ) .po rtfolio-wrapper ( overflow:hidden; position: relative !important; background: #666; cursor:pointer; ) .portfolio img ( max-width:100%; position: relative; ) /* labels 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, with the help of several media queries, we will create alternative CSS sections. In order for the layout of our page to be displayed correctly on the screens of various mobile devices, we will add alternative CSS rules for different screens to these sections. Thus, we easily override any rules previously set in our CSS table for regular 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: Designed 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 name "Portfolio" is ready, it remains only to fill it with your no less wonderful and outstanding works, and put it on display for the whole world. You can still quietly, modestly, be proud of yourself. The main thing is not to overdo it in this matter.
See the example again 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 material used was: . The original, pristine, just from the author's pen, portfolio page, is located there.

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

Currently, a carousel slider is a functionality that is simply necessary to have on a business website, portfolio website, or any other resource. Along with full-screen image sliders, horizontal carousel sliders fit well into any web design.

Sometimes the slider needs to take up one third of the site page. Here the carousel slider is used with transition effects and with responsive layouts. E-commerce sites use a carousel slider to showcase multiple photos in separate posts or pages. The slider code is free to use and change according to your needs.

Using jQuery in conjunction with HTML5 and CSS3, you can make your pages more interesting with unique effects and draw visitors' attention to a specific area of ​​the site.

Slick - modern carousel slider plugin

Slick is a free jQuery plugin whose developers claim that their solution will satisfy all your slider requirements. Responsive slider - the carousel can work in "tile" mode for mobile devices, and in "drag and drop" mode for the desktop version.

It contains a fade transition effect, an interesting "mode in the center" feature, lazy loading of images with auto-scrolling. Updated functionality includes adding slides and a slide filter. Everything for you to customize the plugin according to your requirements.

Demo mode | Download

Owl Carousel 2.0 - jQuery plugin for touch devices

This plugin has a large set of features, suitable for both beginners and experienced developers. This is an updated version of the carousel slider. His predecessor had the same name.

The slider has some built-in plugins to improve the overall functionality. Animation, video playback, slider autoplay, lazy loading, automatic height adjustment - the main features of Owl Carousel 2.0.

Drag and drop support is included for more convenient use of the plugin on mobile devices.
The plugin is perfect for displaying large images even on small screens of mobile devices.

Examples | Download

jQuery Silver Track Plugin

A rather small but rich jquery plugin that allows you to place a carousel slider on the page, which has a small core and does not consume a lot of site resources. The plugin can be used to display vertical and horizontal sliders, with animation and create sets of images from the gallery.

Examples | Download

AnoSlide - Ultra compact responsive jQuery slider

The ultra compact jQuery slider is a carousel that has a lot more functionality than a regular slider. It include preview single image, displaying multiple images in a carousel and slider based on titles.

Examples | Download

Owl Carousel - jquery slider - carousel

Owl carousel is a slider with support for touch screens and drag technology and drop , easily embedded in HTML code. The plugin is one of the best sliders that allow you to create beautiful carousels without any specially prepared markup.

Examples | Download

3D gallery - carousel

Uses 3D transitions based on CSS styles and some Javascript code.

Examples | Download

3D carousel using TweenMax.js and jQuery

Gorgeous 3D carousel. It looks like it's still a beta version, because I found a couple of problems with it just now. If you are interested in testing and creating your own sliders, this carousel will be of great help.

Examples | Download

Carousel using bootstrap

Responsive carousel slider using bootstrap technology just right for your new website.

Examples | Download

Bootstrap based slider - Moving Box carousel

Most sought after on portfolio and business websites. A similar type of slider - carousel is often found on sites of any type.

Examples | Download

Tiny Circleslider

This tiny size slider is ready to work on devices with any screen resolution. The slider can work both in circular and carousel mode. Tiny circle is presented as an alternative to other sliders of this type. Has built-in support operating systems IOS and Android.

In circular mode, the slider looks quite interesting. Support for the drag and drop method and the automatic slide scrolling system are well implemented.

Examples | Download

Thumbelina content slider

Powerful, adaptive, carousel-type slider is perfect for a modern site. Works correctly on any device. Has horizontal and vertical modes. Its size is minimized to just 1 KB. The ultra compact plug-in has excellent smooth transitions.

Examples | Download

wow slider carousel

Contains over 50 effects that can help you create an original slider for your website.

Examples | Download

Responsive jQuery content slider bxSlider

Resize the browser window to see how the slider adapts. Bxslider comes with over 50 customization options and showcases its features with various transition effects.

Examples | Download

jCarousel

jCarousel is a jQuery plugin that will help organize your image views. You will be able to easily create custom image carousels from the framework shown in the example. The slider is responsive and optimized for mobile platforms.

Examples | Download

ScrollBox - jQuery Plugin

Scrollbox is a compact plugin for creating a slider - carousel or text running line. Key features include a vertical and horizontal scrolling effect with a pause on mouse hover.

Examples | Download

dbpasCarousel

A simple carousel slider. If you need a fast plugin, this one is 100% suitable. Comes with only the basic features needed to make the slider work.

Examples | Download

Flexisel: Responsive JQuery Carousel Slider Plugin

The creators of Flexisel took inspiration from the old-school jCarousel plugin, making a copy of it that is focused on the correct operation of the slider on mobile and tablet devices.

Flexisel's responsive layout, when running on mobile devices, differs from the browser window size-oriented layout. Flexisel is perfectly adapted to work on screens, both low and high resolution.

Examples | Download

Elastislide - Responsive Carousel Slider

Elastislide adapts perfectly to the screen size of the device. You can set the minimum number of images to display at a certain resolution. Works well as a carousel slider with image galleries using a fixed wrapper along with a vertical scrolling effect.

Example | Download

Flex Slider 2

Freeware slider from Woothemes. It is rightfully considered one of the best responsive sliders. The plugin contains several templates and will be useful for both novice users and experts.

Example | Download

Amazing Carousel

Amazing Carousel is a responsive jQuery image slider. Supports many content management systems such as WordPress, Drupal and Joomla. It also supports Android and IOS and desktop versions of operating systems without any compatibility issues. Built-in amazing carousel templates allow you to use the slider in vertical, horizontal and circular modes.

Examples | Download

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

HTML

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

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

index.html

Timeline Portfolio | Tutorialzine Demo

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

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

Johnny B Goode

Designer & developer

March 2009

My first experiment in time-lapse photography

Nature at its finest in this video.

March 2010
Logo Design for a pet shop
June 2009
Another time-lapse experiment

Since we will be making some CSS styling changes, the code above gives a better idea of ​​how the portfolio is structured. Note that we will not change the plugin's default styles, we will only overwrite some attributes in our own css file. This gives us an advantage in future portfolio design changes.

We will discuss writing CSS in detail, but a little later. The only thing is that we will have to rewrite all the instructions on top of the existing ones, but we will deal with this later.

jQuery

To initialize the plugin, we need to call the VMM.Timeline() method:

$(function()( var timeline = new VMM.Timeline(); timeline.init("data.json"); ));

The init method takes a simple argument, a data resource. It can be a json file, like in the code above, or a Google spreadsheet.

To learn more about how it worksdata.json, download the lesson sources. There is nothing complicated here, there is no need to describe the structure of this file.

css

With the Firebug HTML Inspector, you can define selectors for an HTML element, which are defined in timeline.css. After that, using the same selectors, you can assign your styles in the styles.css file. In some cases, I have used ! important to prioritize your own styles.

All changes that you will see below are added manually using CSS styles. The rest of the style elements are set by the plugin by default.

First of all, after styling the page in general, we will change the background of the portfolio:

#timeline( background:none; ) /* The individual events in the slider */ .slider .slider-container-mask .slider-container( background:none; ) /* Setting a custom background image */ #timeline div.navigation ( background: url("../img/timeline_bg.jpg") repeat; border-top:none; )

To create a 3D effect, navigation block, we will have to use . The :after element is the dark top part and uses a linear gradient to give it a 3D effect.

#timeline div.navigation:before( position:absolute; content:""; height:40px; width:100%; left:0; top:-40px; background: url("../img/timeline_bg.jpg") repeat; ) #timeline div.navigation:after( position:absolute; content:""; height:10px; width:100%; left:0; top:-40px; background:repeat-x; background-image: linear- gradient(bottom, #434446 0%, #363839 100%); background-image: -o-linear-gradient(bottom, #434446 0%, #363839 100%); background-image: -moz-linear-gradient( bottom, #434446 0%, #363839 100%); background-image: -webkit-linear-gradient(bottom, #434446 0%, #363839 100%); background-image: -ms-linear-gradient(bottom, #434446 0%, #363839 100%); )

#timeline div.timenav-background( background-color:rgba(0,0,0,0.4) !important; ) #timeline .navigation .timenav-background .timenav-interval-background( background:none; ) #timeline .top -highlight( background-color:transparent !important; )

Styling the zoom-in and zoom-out buttons on the toolbar:

#timeline .toolbar( border:none !important; background-color: #202222 !important; ) #timeline .toolbar div( border:none !important; )

Scale style at the bottom:

#timeline .navigation .timenav .time .time-interval-minor .minor( margin-left:-1px; ) #timeline .navigation .timenav .time .time-interval div( color: #CCCCCC; )

Arrows for the previous and next event:

Slider .nav-previous .icon ( background: url("timeline.png") no-repeat scroll 0 -293px transparent; ) .slider .nav-previous,.slider .nav-next( font-family:"Segoe UI" ,sans-serif; ) .slider .nav-next .icon ( background: url("timeline.png") no-repeat scroll 72px -221px transparent; width: 70px !important; ) .slider .nav-next:hover . icon( position:relative; right:-5px; ) .slider .nav-previous:hover, .slider .nav-next:hover ( color: #666; cursor: pointer; ) #timeline .thumbnail ( border: medium none; )

Load background:

#timeline .feedback ( background-color: #222222; box-shadow: 0 0 30px rgba(0, 0, 0, 0.2) inset; border:none; ) #timeline .feedback div( color: #AAAAAA; font-size : 14px !important; font-weight: normal; )

#timeline .slider-item h2, #timeline .slider-item h3( font-family:"Antic Slab","Segoe UI",sans-serif; ) #timeline .slider-item h2( color:#fff; ) # timeline .slider-item p( font-family:"Segoe UI",sans-serif; ) #timeline .slider-item img, #timeline .slider-item iframe( border:none; )

At the end, we will change the cover. I used nth-child(1) to only link to the first slide (the cover) which contains the title and description of the portfolio. This data is stored in a JSON file.

/* Customizing the first slide - the cover */ #timeline .slider-item:nth-child(1) h2( font:normal 70px/1 "Antic Slab","Segoe UI",sans-serif; background:rgba( 0,0,0,0.3); white-space: nowrap; padding:10px 5px 5px 20px; position:relative; right:-60px; z-index:10; ) #timeline .slider-item:nth-child(1 ) p i( font:normal normal 40px "Dancing Script","Segoe UI",sans-serif; background:rgba(0,0,0,0.3); white-space: nowrap; padding:5px 20px; position:relative; right:-60px; z-index:10; ) #timeline .slider-item:nth-child(1) p .c1( color:#1bdff0; ) #timeline .slider-item:nth-child(1) p . c2( color:#c92fe6; ) #timeline .slider-item:nth-child(1) .media-container ( left: -30px; position: relative; z-index: 1; ) #timeline .slider-item:nth -child(1).credit( text-align: center; )

It remains only to open the timeline.psd, which is attached in the plugin file, and change the color of some icons. I added all the necessary files to the sources for this tutorial. This completes the creation of a jQuery portfolio with CSS3 styling!

What to do with it?

You can use this portfolio not only to display the latest projects, but also interesting and important points your career. It's like a mini diary of your life! I hope you enjoyed this tutorial. Share your thoughts in the comments below.

Long chose 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, none of them are very attractive. Considering the current development trends jquery, html5 etc. I thought, because there should already be much more attractive solutions than those that I met before. So. After spending a day, managed to find huge amount scripts. From all this mountain, I decided to select only, because I love, as you have already noticed from previous posts.
Image Gallery applies not only to with photo albums. The script can be used, I think that it will be even more correct, as portfolio for photographers, designers etc. jquery effects will help to attract the attention of visitors and simply add elegance to your site.
So. Collection for your attention 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.

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

S Gallery
Attractive jquery image gallery plugin. The animation works with css3.

DIAMONDS.JS
Original image gallery plugin. The miniatures are shaped rhombus which is very popular at the moment. This form is made with css3. The only negative of this gallery is the lack of a lightbox that would open the photo in full size. That is, you need to fasten the lightbox plugin with crayfish. This script generates an adaptive diamond-shaped image grid.

Superbox
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 has already outlived its usefulness. The images in this gallery open below the preview. Check out the demo and see how this solution looks much more modern.
|
Smooth Diagonal Fade Gallery
Modern gallery of images in which previews are distributed over 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. 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 itself.

Gamma Gallery
Stylish, lightweight, responsive image gallery with a Pinterest-style grid that is now very popular. The script works fine as stationary computers, so on mobile devices with any screen resolution. A great solution for creating a web designer portfolio.

THUMBNAIL GRID WITH EXPANDING PREVIEW
The plugin is adaptive image grid. Clicking below will display a larger photo and description. Good for portfolio building.

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

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 image gallery with Pinterest style grid.

Gallery
Another stylish Pinterest style grid gallery with category filter. Works in browsers: Chrome, Safari, Firefox, Opera, IE7+, Android browser, Chrome mobile, Firefox mobile.

least.js
Excellent free gallery images With using JQUERY, 5 and CSS3. It 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 outputting modal window not only pictures but also video. Works great on touch devices. Easily customizable and it is possible to expand the functionality with additional plugins (See next plugin).