jquery portfolio gallery. Plugin for creating a portfolio. Implementation of the “Suggest a project” page

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.

Tonic Gallery - jQuery XML Portfolio Gallery | $6

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.

The Wall – Media Gallery – jQuery powered | $5

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.

VION – jQuery Image Gallery Plugin | $7

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 ) , 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() ; ) ) ;

$(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.

CSS

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 a little 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; ) .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 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 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; ) .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!

1. Implementing a portfolio using jQuery gallery

Project thumbnails scroll when you move the mouse cursor in the left column. The content area displays a larger image with the project name, description, and list of technologies used. As you move between thumbnails, project information changes to each other with a stunning animated effect. When you click on an image on the description page, it enlarges using jQuery animation. I would also like to note the stunning elegant appearance of the entire portfolio page. Watch the demo.

2. Super implementation of a portfolio site using CSS and jQuery

Excellent implementation of a photographer’s portfolio website. When you click on a menu item, an area with content of a fixed height and width is assembled from squares scattered across the screen. In order to fit more information into a fixed area, the content can be scrolled. The implementation of displaying works from the portfolio is unusual: when you click on the thumbnail, the photo is displayed as a background image, which is automatically scaled when the browser window size is changed.

3. Portfolio wall with jQuery

An original solution for creating an online portfolio. Project blocks (thumbnails and a short description with a link) are displayed several in a row; when you change the browser window, the blocks are redistributed evenly on the page with an animated effect. Each project can have several thumbnail images, the transition between which is carried out using arrows. Clicking on the link opens a page with a full description, on which the text is placed on a semi-transparent block of a fixed height with scrolling. A scalable image of the project is used as the page background. Looks cool - watch the demo.

4. Smooth jQuery page scrolling

Implementation of vertical and horizontal scrolling.

5. jQuery plugin “Draggable Image Boxes Grid”

A draggable grid consisting of content blocks and images. The grid can be dragged using the mouse (press any mouse button and drag in the desired direction). When you click on the thumbnail, the main image expands to the full width of the screen. When you click on a dark block with text, an area with a more detailed description opens.

6. One-page portfolio website

One-page website with animated content changes. On the demo page, navigate through the menu tabs to see the effect.

7. Switching the block display type to jQuery

Using this jQuery “Switch Display Options” plugin, you can implement a switch on the page, with which the visitor will switch from a tabular display of information to a full view with a description of the blocks. Perfect for portfolio implementation.

8. Template for a restaurant website with jQuery gallery and Google map

An original jQuery solution created for a cafe website. The template implements an interesting jQuery gallery for displaying dishes from the menu. Images in the gallery are scaled depending on the size of the browser window. First, the gallery displays thumbnail images with the name and brief description of the dishes, while the full-size photo appears darkened in the background. Navigate between available photos using arrows or the mouse wheel. Clicking the mouse in gallery mode will remove the thumbnails with descriptions and allow you to view the original large images stretched across the entire width of the window. To return to the site menu from the gallery, click on the link in the upper right corner. In addition to the chic jQuery gallery, a map from Google is very effectively integrated into the template.

9. Plasm The Wall plugin

To create unique “walls” from photographs or HTML blocks that can be dragged across the screen within a fixed area using the mouse.

10. Plugin for displaying elements in a circle

Displays various elements on the page along a circle of a given diameter.

11. Placeholder page “Site under development”

The page has the ability to send an e-mail address, which is recorded in the database and to which a notification about the opening of the site can be sent. The page is also decorated with a small slideshow based on the jQuery plugin Nivo Slider v. 2.3.

12. QuickFlip 2 plugin

With its help, you can create an interesting effect of a business card rotating when you click on a link.

13. JQuery click map

The idea is to track user clicks. To see the plugin in action on the demo page, click the mouse and then click the “Analyze” button. And the points where you clicked with the mouse will be displayed on a translucent background.

Implementation of a nice on-screen keyboard. You never know, it will come in handy for something.

15. jQuery Sticky Notes

Implementation of sheets of notes. The text can be edited, and the notes themselves can be deleted or moved around the screen. To see an example, go to the “Demo” tab on the demo page.

16. jQuery rating 17. HoverAttribute

Interesting link design: when you hover over a link, its anchor changes. Looks cool.

18. jQuery Fancy captcha for registration form

Implementation of captcha for the registration form. The plugin is a set of numbers that need to be set in ascending order by dragging them. Quite an interesting way to confirm that the registration is being carried out by a real person and not a robot.

There are buttons at the bottom of the screen that you can use to smoothly scroll the page up or down.

20. Translator. jQuery plugin "jTextTranslate"

The plugin uses the Google Language API and can translate text into any languages ​​provided by Google. To translate, you need to click on the icon next to the paragraph and select the language into which you want to translate from the drop-down list.

21. jQuery plugin for page navigation

Excellent implementation of scrolling links for page navigation. Implemented using jQuery.

22. jQuery plugin “Notes”

This jQuery plugin will allow you to implement “paper” notes on your website.

23. jQuery plugin “Catch404” 24. jQuery plugin jBreadCrumb

Plugin for creating animated breadcrumb navigation chain

25. “Reel” plugin 26. jQuery “Dance Floor” plugin

jQuery plugin for implementing a product page. When you click on a product image, its description appears.

27. jQuery plugin “3D label cloud” 28. Volumetric CSS buttons 29. Animated horizontal page scrolling

jQuery effect of vertical page scrolling. Perfect for implementing one-page websites and portfolio websites. To view the effect, click on the menu item on the demo page.

30. jQuery plugin “Rating System”

jQuery effect for implementing evaluation of something. The color of the circles and the text underneath them changes depending on which of them the mouse cursor is hovering over.

31. jQuery Panel Magic

A plugin that implements site navigation. In this case, your site is presented as a grid of documents, between which a transition is made with an interesting jQuery effect.

You can easily use this plugin to create small websites and web applications. It will also look good on portfolio websites.

32. Loading indicator on Mootools, “MoogressBar” plugin

Effective loading indicator.

33. Mootools plugin “CwComplete”

When filling out a field, the plugin will suggest possible options for filling using Ajax, while it will filter and show only those options that satisfy the text already entered in the field.

34. Great ajax chat using jQuery and CSS3

Before starting a conversation, the visitor must enter his nickname and e-mail. The right column shows how many people are logged in to the chat. Technologies used: PHP, MySQL, jQuery, CSS.

35. Implementation of the “Suggest a project” page

Visitors can add a new proposal or vote for an existing one. An excellent solution for those who want to find out what their audience thinks about the site. You can also use this page to accumulate new ideas for the further development of your project. Technologies used: PHP, MySQL, jQuery, CSS

36. Implementation of voting/poll using PHP and jQuery 37. Voting using Ajax “TinyEditor”

Accurate implementation of surveys on the site. Technologies used: JQuery, Ajax, PHP and MySQL.

A very interesting solution for implementing voting on a website. By dragging blocks up and down and grabbing the images with the mouse, you can arrange them on the page in any order. The higher you leave the block, the better you rated it and, accordingly, if the block is placed at the very bottom, it means you liked it the least. After you place the blocks in the desired sequence, you must click on the “Submit poll” button for the vote to be taken into account. The results page displays the voting results and the number of visitors who voted. Technologies used: CSS, PHP, MySQL, jQuery.

A simple Ajax commenting system with verification of the correctness of information entered. Comments are stored in a database. Implemented using: PHP, MySQL, CSS, jQuery.

40. Counter of the number of file downloads 41. Notes on the page using PHP

Technologies used: PHP, jQuery, CSS.

When you navigate through menu items, the content is loaded without reloading the page. Technologies used: PHP, jQuery, CSS.

43. jQuery site search using technology from Google

Implementation of site search using Google AJAX Search API. You can provide the visitor with the opportunity to search both on your site and on the Internet. In this case, the search can be carried out not only by site pages, but also by images and multimedia files.

44. jQuery effect of overlaying a description on an image

A very interesting effect that can be used in the implementation of a portfolio. When you click on an image, it darkens with a translucent background and a caption appears describing what you should pay attention to.

45. Implementing a Question and Answer Page Using jQuery

jQuery implementation of the FAQ page on the site. A list of questions is displayed at the top of the page. When you click on a question, the page smoothly scrolls to the one you selected, and the active question with its answer is highlighted in a different color. A link to return to the list of questions also appears in the active answer field.

46. ​​Website on Ajax. Content loads without reloading the page 47. Changing background and text colors using jQuery

The color changes when you hover the mouse over it. You can make the color change randomly.

48. Site Guide Using jQuery

Using this interesting plugin, you can introduce the visitor to the main functions of your site if he is visiting it for the first time. When the page loads, a block appears in the upper right corner asking you to take a tour of the site. If a visitor is visiting your site for the first time, he can use a short guide to familiarize himself with the main functions. In this case, the page is darkened and the necessary blocks at each step are marked. If the visitor has already been to your site before, he can simply close the window offering a tour of the site.

49. Virtual tour of the Joyride Kit website

Using this plugin, you can introduce the visitor to the main functionality of the page. This is done in the form of a sequential pop-up description of the elements. The visitor can see all the tips by clicking on the Next button, or close the online tour (if this is not the first time he has come to this page) using the cross.