Constantly updated database of jQuery plugins for photo, video and media galleries Tools for creating beautiful images using CSS filters. Image gallery on jQuery with an interesting effect Image gallery html css
Hi all! Today we will talk about perhaps the best free photo gallery, video and photo slider, let's talk about “photo frame”. Despite the fact that the script has not been supported for 2 years and the author switched to a project on a similar topic, it works great and continues to please the eye.
Main advantages (+)
Minuses (-)
This connection option is the simplest, but not the best; it should be used only if you need to display the gallery on most pages of the site. The advantage of this option is the use of CDN.
To make searching easier, use Ctrl + F . If the coveted line is not there, then you will have to connect jQuery. On WordPress, this can be done by pasting the code below into the theme's functions file (functions.php). In fact, this script is used when there are conflicts between different versions of jQuery and it operates according to the following scheme: it deletes the previously registered jQuery, registers a new one, and displays the script. Current versions of the jQuery library can be found here.
You can simply insert this line between and :
In this connection option, script files will be displayed only on the necessary pages via [shortcode]. And if you use the Autoptimize plugin, then the script code will also be integrated into the theme files. These simple manipulations should increase the site loading speed.
The gallery is displayed in HTML code using container c class="fotorama", the container contains the image output code or link to image . When writing an article using the WordPress engine, switch the editor to text mode and enter the container c class="fotorama" .
It looks like this:
Or like this (numbering of links is optional):
1 3 4
Examples of Fotorama settings Container dimensionsThe size of the photo frame block is the size of the first image, other images are scaled in proportion to the first. To correct this situation, you can specify the dimensions manually.
There are other settings:
Data-width="98%" //relative width data-ratio="800/600" //aspect ratio data-minwidth="420" // min. width data-maxwidth="900" // max. width data-minheight="320" // min. height data-maxheight="100% // relative max height data-height="100% // relative height
MiniaturesData-nav="thumbs" is responsible for thumbnails
But this method is not very effective, since the script has to load all the photos at once to generate thumbnails, so it would be more rational to prepare small copies of the pictures in advance. WordPress automatically creates thumbnails, which is what we will use. To get a link to the thumbnail, add -70x70 to the file name (https://site/wp-content/uploads/2017/11/27ltl9eRXk.jpg → https://site/wp-content/uploads/2017/11/27ltl9eRXk- 70x70.jpg).
By default, the thumbnail is 64 × 64. You can adjust this parameter using data-thumbwidth (width) and data-thumbheight (height). If you need the thumbnail to have its own size, then set the width and height parameters for the thumbnail file:
Photoframe perfectly processes HTML and CSS, which significantly expands the functionality of the script. Work with links, blocks, tables, paragraphs, write CSS and much more. Below are some examples of the gallery's work. If the visual part is not displayed, then click the "Result" button.
Show/Hide Examples
See the Pen ooppwb by Ivanov Klim (@DreamerKlim) on CodePen.
See the Pen aVEEVb by Ivanov Klim (@DreamerKlim) on CodePen.
Full screen mode data-allowfullscreen="true" //in the browser window data-allowfullscreen="native" //on the entire monitorIt is possible to add a separate large image for full screen mode via data-full:
Hello everyone!
Developers of all stripes, when creating their next web project, are often interested in the question of how to present their users with various types of images, be they photographs or sets of pictures. For this, the inquisitive minds of the online space, for the most part of course this is a “bourgeois” space, are looking for more and more new solutions to create spectacular, colorful, and most importantly functional slide shows and photo galleries. For the most part, they are customized by developers to fit the design of the template of the web project being created, or in the form of plugins and modules for a specific site management engine. It’s worth looking at modern templates for, not a single theme, with rare exceptions, can do without some kind of plug-in slider or simple image rotator. So it’s understandable that many web developers want to have something like this in their arsenal and surprise their readers to the fullest by effectively presenting images on their sites.
Continuing the ongoing series of reviews of emerging new solutions when creating, I decided to put together a more complete collection of the most interesting and effective slideshows and photo galleries I have ever encountered, created using the magic of jQuery.
I would like to warn you right away that the resources discussed in the review are mainly in English, but I think whoever needs it will figure it out intuitively or with the help of translators, of whom there are a dime a dozen. And if you search hard enough, you can find descriptions of the technique for creating some galleries and sliders in Russian, since many of our web developers translate while working on a particular project, first for themselves, and then post detailed descriptions of all their manipulations for free access .
For example, this is what I did, when I was working on the mechanism for creating , I first found a gallery option that was suitable for me in the burzhunet, translated it for a better understanding of what I was doing, and in the future this turned out, I dare to hope, not a bad article about using the Highslide script, with examples of work in various variations of application.
And so, enough of the unnecessary lyrics, let's move on directly to the review, watch, read brief explanations and choose from a huge number of new jQuery plugins and scripts for implementing interesting image sliders, photo galleries, slide shows on your sites: with automatic and manual change sliders, background image sliders, with and without thumbnails, etc. and so on...
Of.Site | Demo
A complete, customizable jQuery image gallery with slideshow elements, transition effects, and multiple album options. Compatible with all modern desktop and mobile browsers.
A tutorial on how to create a full screen gallery using jQuery. The idea is for a thumbnail of the featured full-screen image to appear to the side, with a reflection as you move through the images using the arrows or mouse click. Large images move up or down in a slideshow style depending on the transition you choose. The ability to scale the image, which makes the image in the background viewable in full screen mode or adjusted to the page size.
Parallax Slider
Parallax Slider is an interesting solution for organizing the display of images in the form of a slide show with manual control elements. The original placement of thumbnail pictures attracts attention. The official website has a complete breakdown of how to integrate and configure the slider.
Minimalistic Slideshow Gallery with jQuery is an excellent image gallery with elements for automatically changing pictures, as well as the ability to manually control display and select images from a drop-down block with a grid of thumbnails. One of the disadvantages is the lack of viewing full-size images, but this is the minimalism of this gallery.
This is a full-screen slideshow with automatically changing images, no mind-blowing effects, everything is simple and tasteful.
Minimit Gallery is a highly customizable jQuery plugin with a large selection of image transitions. Using the Minimit gallery, you can organize a display of images in the form of a carousel, slide show, a simple rotator, and a regular picture scroller.
is a tiny (2kb) jQuery plugin that provides a simple, no-nonsense way to display images as a slideshow.
is a nice looking javascript gallery, with intuitive controls and seamless compatibility on all computers, iPhones and mobile devices. Very easy to install and configure
Unlike many Javascript and jQuery image sliders, Slider.js is a hybrid solution, powered by CSS3 transitions and animations.
This is a one-page template for creating various presentations in HTML5 and CSS3.
Diapo slideshow is an open source project. If you want, you can suggest changes or improvements. You can download and use it for free, and nothing and no one is stopping you from using this slider in your projects. The slider is easy to customize, there are interesting transitions between the presented content, and you can place anything in the slider, it works quite quickly, without any jambs.
is nothing more than another tool for creating slideshows on websites and other web projects. Supports all modern browsers, horizontal and vertical animations, support for custom transitions, callback API and much more. You can use any HTML elements in your slides, it is understandable and accessible for beginners, and is distributed completely free of charge.
JavaScript Slideshow for Agile Development
Implement your slideshows with this awesome jQuery plugin. Highly customizable tool so you can build your content presentation according to your requirements. To provide easier integration with external data or data from your CMS, the data format is used. This is a new version and written from scratch. The developers tried to describe the entire process of working with their brainchild very clearly and intelligibly.
is a jQuery plugin that allows you to transform unordered lists into slideshows with attractive animation effects. In a slide show, you can display a list of slides, either using numbers or thumbnails, or using the Previous and Next buttons. The slider has many original animation types, including cube (with various sub-types), pipe, block and more.
A complete set of tools for organizing all kinds of presentations of various content on your web projects. The bourgeois guys did their best, including almost all types of various sliders and galleries using the magic of jQuery. Photo slider, photo gallery, dynamic slide show, carousel, content slider, tabs menu and much more, in general there is room for our irrepressible imagination to run wild.
This is a jQuery slideshow plugin that is built with simplicity in mind. Only the most useful set of functions is packed, both for beginners and advanced developers, providing the opportunity to create simple, but at the same time very effective slideshows that are user-friendly.
— a simple slider built on jQuery, simple in all respects, not requiring special skills, I think many will find it useful for implementing slide shows on their websites. The plugin was tested in all modern browsers, including the slow IE browser.
jbgallery is a kind of user interface widget written in javascript of the jQuery library. Its function is to show one large image as the background of the site in full-screen mode, several images in the form of a slider. All viewing modes have viewing controls. It’s an interesting solution in its own way, and in some cases it’s not even standard.
It is an easy-to-use jQuery plugin for displaying your photos as a slideshow with transition effects between images (you've seen more interesting ones). jqFancyTransitions is compatible and extensively tested with Safari 2+, Internet Explorer 6+, Firefox 2+, Google Chrome 3+, Opera 9+.
is a freely distributed jQuery plugin for viewing images and other information in the Lightbox form. Popup window with controls, shaded background and all that, simple and tasteful.
Another jQuery plugin from the Lightbox series, although it weighs outrageously little (9 KB), but has a ton of functionality. There is a decently designed interface that you can always improve or customize using CSS.
Already from the name it becomes clear that there is nothing fancy, we have a very simple automatic image scroller, with completely missing controls. Who knows, maybe this slider will attract your attention precisely with its minimalism.
Image rotator with different types of transitions. It works both automatically and by clicking, and is quite easy to set up.
— a full-fledged image gallery rather than just a slider. Preview of thumbnails and the ability to select transition effects, full support for all browsers, detailed description of integration into a web project and free distribution.
This is an implementation of ready-to-use slideshows using scriptaculous/prototype or jQuery. Horinaja is somewhat of an innovative solution because it allows you to use a wheel to scroll through the content placed in the slider. When the mouse pointer is outside the slideshow area, scrolling occurs automatically; when the pointer is placed over the slideshow, scrolling stops.
This is a feature from a series of simple image scrollers, albeit with viewing controls, and therefore works in both automatic and manual modes.
s3Slider is a jQuery plugin that creates a slideshow from an unordered list of images and can be easily implemented on any web platform.
This is a jQuery plugin that is optimized for processing large volumes of photos while saving bandwidth.
Vegas Background
Vegas Background jQuery plugin allows you to add beautiful full-screen background images to web pages, all with slideshow elements. If you carefully study the intricacies of working with the plugin, you can find many interesting solutions, of course, only if you need it.
— a slider as a slider, no more, no less, with captions for images or announcements of articles and simple controls, at random.
is a lightweight (about 5 KB) javascript for organizing image viewing. Automatic resizing and scaling of large images allows you to view the picture in full size within the browser window
Version 4 of PikaChoose jQuery Image Gallery is available! Pikachoose is a lightweight jQuery slideshow with great features! Integration with Fancybox, excellent themes (though not free) and much more are offered to your attention by the plugin developers.
Checks the number of images in your listing and dynamically creates a set of photo links as digital navigation. In addition, clicking on each image will move forward or backward, and you can also scroll through the images depending on the area you click on the picture (for example: clicking on the left side of the picture will move the slides back and forth, respectively, for the right side of the image).
Another jQuery slider that will fit perfectly into any WordPress template.
Another development of “Nivo”, like everything the guys from this studio do, the plugin is made with high quality, contains 16 unique transition effects, keyboard navigation and much more. This version includes a dedicated plugin directly for WordPress. So for all fans of this blogging engine, Nivo Slider will be just right for you.
jQuery plugin that allows you to quickly create a simple, effective and beautiful slider for images of any size.
Pirobox is a lightweight jQuery “lightbox” script, viewing is carried out in a pop-up block that automatically adjusts to the image size, with all controls.
The creators of this gallery offer a rather original presentation of the pictures. The images are displayed in miniatures in the form of a wave, when you click on the thumbnail, we will see a medium-sized version of the image, click a second time and you will see a large image. You can consider this an experiment, but you must admit that something new and unusual is always interesting.
Fullscreen slideshow with HTML5 and jQuery
To create slideshows and display pictures in full screen mode, the developers used the already familiar Vegas jQuery plugin, which contains many ideas and techniques previously described in detail in the group’s articles. The presence of HTML5 audio elements and the style of transitions between images are attractive.
Another development from the Codrops team, a full-fledged and functional image gallery, but there’s no point in describing it, you have to see it.
Image slideshow, pictures disappear right before your eyes, the effect is simply wonderful.
Is a JavaScript image gallery framework built on top of the jQuery library. The goal is to simplify the process of developing a professional image gallery for web and mobile devices. You can view it in a pop-up window or in full screen mode.
We are quietly starting to get used to it and wait for new works from the Codrops team. Please get an excellent image slider with a magnificent 3D transition effect to view images in full screen mode.
Another WordPress plugin from the slideshow organizer series. Easily integrates into almost any design and offers many customization options for experienced users and non-experienced ones too.
Another plugin written for WordPress, it will make it much easier to organize a slideshow of pictures or any other content on your blogs.
A good slideshow plugin for integration into WordPress. Xili-floom-slideshow is installed automatically, and personal settings are also allowed.
Slimbox2 is a well-established WordPress plugin for displaying images with a Lightbox effect. Supports automatic slideshow and resizing of images in the browser window. And in general, this plugin has many advantages over other plugins in this series.
This plugin/widget allows you to create dynamic, controlled slideshows and presentations for your website or blog running on the WordPress engine.
This WordPress plugin transforms embedded gallery images into a simple and flexible slideshow. The plugin uses FlexSlider jQuery image slider and user personal settings.
is a WordPress plugin for organizing slideshows of photos, pictures from SmugMug, Flickr, MobileMe, Picasa or Photobucket RSS feed, works and displays using pure Javascript.
A simple slider for WordPress and more. Nothing superfluous or cumbersome, the work is done in a minimalist style, the emphasis is on stability and speed, it connects perfectly to the blog management engine.
In my opinion, Skitter is one of the best sliders that supports working with WordPress. I am attracted by the stability and speed of operation, not too prominent controls, transition effects and a fairly simple connection to the theme.
is a plugin for WordPress with which you can easily and quickly organize an image gallery on your website with the ability to view it in slide show mode. The display can be either automatic or fully controlled with demonstration of thumbnails and captions for images.
Of.Site | Demo
Shows all pictures for a post/page as a slideshow. Easy installation. This plugin requires Adobe Flash for the version with transition animations, if Flash is not found the slider works as usual.
Another simple slider for WordPress, it shows images for posts and short announcements of articles. I use just such a plugin on this blog from time to time.
Meteor Slides is a jQuery WordPress slider with over twenty transition styles to choose from. The author called the plugin a “meteor”, probably implying the speed of operation; perhaps I didn’t notice anything meteoric.
oQey Gallery is a full-fledged image gallery with slideshow elements for WordPress, with built-in video and music capabilities.
It is a slideshow with flash animation elements for viewing images and videos on websites and blogs. You can place this slider on any website, in any size and with any content you like.
Flash Gallery plugin turns your regular galleries into stunning image walls, with support for multiple albums per post, full screen viewing and slideshow mode.
WOW Slider is a jQuery image slider for WordPress with amazing visual effects (Explosion, Fly, Blinds, Squares, Fragments, Basic, Fade, Stack, Vertical Stack and Linear) and professionally designed templates.
Promotion Slider is a jQuery plugin that makes it easy to create a simple slideshow, or implement multiple zones of rotating ads on a page, because it is a highly customizable tool, you will have full control over what you show in the slider and over how the module works generally.
| Demo
New in version 2.4: support for drag-n-drop photo sorting directly through the WordPress editor, as well as the ability to add photo links to main images. (IE8 may have some bugs, works fine in all major browsers. The authors promise full support for IE8 in the future.)
| Demo
The final chord of this review will be this plugin for WordPress, another slider with interesting visual effects for selecting and changing images.
I look at everything described above and am amazed, what a flight of fancy these people have, but this is not all that various web developers have come up with lately on the topic of organizing images on web projects. It's great that it is now possible to implement such wonderful solutions for creating galleries and slide shows.
I dare to quietly hope that in this collection you will find something interesting for yourself, create your own unique gallery or slider, to the delight of your users and, of course, your beloved self, and where would we be without this...
by Dmitry Semenov
is a jQuery image gallery and content slider plugin. It’s completely responsive, touch-friendly and has modular architecture that allows you to include only features that you need to optimize file size and performance.
by Andy – The Coffeescripter
A highly customizable gallery/showcase plugin for jQuery.
by Trent
Galleriffic is a jQuery plugin that provides a rich, post-back free experience optimized to handle high volumes of photos while conserving bandwidth.
by Aino
Galleria is a JavaScript image gallery framework built on top of the jQuery library. The aim is to simplify the process of creating professional image galleries for the web and mobile devices.
by CatchMyFame
The other day I went looking for a simple way using jQuery to fade between a set of images on a page. So, being a coder, I set out to create my own plugin.
by Thomas Kahn
Smooth Div Scroll is a jQuery plugin that scrolls content horizontally left or right. Apart from many of the other scrolling plugins that have been written for jQuery, Smooth Div Scroll does not limit the scrolling to distinct steps.
by Victor Zambrano – frwrd.net
Minishowcase is a small and simple php/javascript online photo gallery, powered by AJAX that allows you to easily show your images online, without complex databases or coding, allowing to have an up-and-running gallery in a few minutes.
by Caspar David Friedrich
EOGallery is a web animated slideshow gallery made with jQuery. It only uses basic jQuery functions and Cody Lindley’s Thickbox to display larger pictures.
by Arnault Pachot
A multi-format carousel for jQuery, Non obstrusive and accessible portfolio supporting multiple media: photos, video (flv), audio (mp3). This plugin for jQuery will automatically detect the extension of each media and apply the adapted player.
by Stefan Petre
Another image gallery plugin with space effect, very light and simple plugin.
by Moreno Di Domenico
jmFullWall is a jQuery plugin for the creation of an impressive portfolio.
by Fabrizio Calderan
Mosaiqy is a jQuery plugin for viewing and zooming photo working on Opera 9+, Firefox 3.6+, Safari 3.2+, Chrome and IE7+. Photos are retrieved from a JSON/JSONP data structure and randomly moved inside the grid. All expensive animations are taken over by your GPU on recent browsers using CSS3 transitions, minimizing the CPU overhead.
by Cody
The following jQuery plugin transforms a set of images into a tiny gallery with several options. The Micro Image Gallery allows to switch between a grid view which shows a preview of the images as thumbnails and a single view showing one image only.
by Malihu
A simple, yet elegant fullscreen image gallery created with the jQuery framework and some simple CSS.
Competently composed and visually designed, in our case, this is a separate page, is an important element of the personal website or blog of any specialist who has achieved a certain level of skill in his professional activity.
A portfolio page is a kind of report, or visual summary, with the help of which you can clearly demonstrate to readers and visitors of your website/blog a set of the most successful completed works, be it photographs, articles, publications, design elements, etc.
I don’t have such a page and, on my part, this is an annoying omission that needs to be corrected as soon as possible, which is what I’m actually working on at the moment.
In the vast expanses of the global network, you can find a huge number of ready-made page templates for organizing a portfolio, and the variety of such pages is truly impressive. So, those who don’t care 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 lack knowledge in website building, I propose to look at an example of adaptive layout, a simple portfolio page, with filtering of completed works by category, made in , diluted with an attractive transition effect, with animation elements.
The page layout, executable javascript and some design elements were created by the wonderful web designer and developer Kevin Liew (queness.com). When choosing the optimal solution, it was important for me that it was easy to implement, 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 heavy plugins.
The basic layout consists of two main UI elements that we need to build, tab navigation for filtering categories of submitted work, and the thumbnail grid itself with a hover effect for the caption to pop out.
To begin with, for everything to work in the end, you will need jQuery version 1.7.0 or higher. If you do not have it connected yet, then add the following line before the tag:
Launch the MixItUp plugin, insert 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 ) , "easeOutQuad" ) ; $(this) . stop() . ) , 500 , "easeOutQuad" ) ; ) , function () ( $(this) . find(".label" ) . stop() . animate(( bottom: - 40 ) , 200 , "easeInQuad" ) ; $( this) . find("img" ) . animate(( top: 0 ) , "easeOutQuad" ) ) ; |
$(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());
There is no point in considering all the plugin options separately; the default option is quite optimal. Well, if anyone wants to experiment with parameters, please do everything within your power.
To form the page layout and appearance of the elements, connect a couple of files to the document. , one for basic styles, let's call it for example: layout.css and another small CSS file normalize.css, to ensure better browser consistency in the standard design of elements:
| < link rel= "stylesheet" href= "css/normalize.css" > < link rel= "stylesheet" href= "css/layout.css" > |
Now let’s look at 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 associate 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 the values of data-filter with data-cat , the 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 form the appearance of this entire structure in CSS, let’s assign 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" >Beget hosting. Ru< span class = "text-category" >Logo< div class = "label-bg" > ......... |
Hosting Beget.Ru Logo.........
Please note that you can add links to the picture or directly to the signature so that the user can fully see all your work.
Now, quietly, 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 images and connected fonts; all this, for those who need it, can be seen in the demo, or found in the archive with the source code.
| .container ( position : relative ; width : 960px ; margin : 0 auto ; /* You will be able to see the chain of transitions when resizing the browser window */ -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 ; /* change the background of the category 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; ) .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;) display: block; font-size: 9px) |
Container ( position: relative; width: 960px; margin: 0 auto; /* You will be able to see the chain of transitions when resizing the browser window */ -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 a little 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 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; margin:1%; float:left; .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; )
In the second part, right in the same style sheet, using several media queries, we will create alternative CSS sections. To ensure that our page layout is displayed correctly on the screens of various mobile devices, we will also add alternative CSS rules for different screens to these sections. Thus, we can easily override any rules previously set in our CSS table for regular browsers and achieve that much-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, all that remains is to fill it with your equally wonderful and outstanding works and put it on display for the whole world to see. You can still be quietly, modestly, proud of yourself. The main thing is not to overdo it in this matter.
Look at 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 following material was used: . The original, pristine, fresh from the author’s pen, portfolio page is located there.
Good luck to everyone and enjoy the rest of the short summer!
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, 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.
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.
S Gallery An attractive Jquery image gallery plugin. The animation works using css3. 
DIAMONDS.JSOriginal plugin for creating an image gallery. Miniatures are diamond shaped, which is very popular at the moment. This form is made using css3. The only drawback of this gallery is the lack of a lightbox 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 A 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 perfectly on both desktop computers and mobile devices with any screen resolution. An excellent solution for creating 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.jsGreat free image gallery using JQUERY, 5 and CSS3. It 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 displaying not only images, but also videos in a modal window. 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).
