Alfred is an incredibly feature rich portfolio plugin.
Here, you can find an list of everything the Alfred plugin can do.
Touch gestures To make it accessible for touch devices, the gallery offers touch gestures such as swipe left and right to browse the gallery. Swipe down or zooming out (pinching) to close it.
Images preloader It knows which direction you go, where you're now and much more to load images in the shortest time possible. It's very smart part of the gallery.
Keyboard control Use arrows left and righ to browse the gallery, press escape button to close it. Or set your own key for these actions.
Idle IU If a user doesn't use his mouse for while, the UI (counter, caption, nav) will disappear. And then it'll show it back, if user makes an interaction. For touch devices, tap once to disable UI, then again to show it back.
Open / Close animations Choose from 4 pre-designed CSS animations or create your own. All properties are changable of course, such as duration and easing. It's just CSS.
Template design Each gallery instance has its own HTML template. This file is loaded with AJAX once on beginning, then the plugin injects content there and keeps it updated.
Infinite browsing This feature allows you to go through the gallery in one direction forever. When you reach the last slide, next one is the first one and.
Customizable UI Gallery UI offers counter, image caption and navigation icons. All these parts are optionable.
Variable selectors Every HTML element's selector can be changed as you need. Data attribute as well.
Image path prefix Set images source only once, then just write the image name.
Animations You can turn off or on all gallery animations by one click.
Lazyload It gives the plugin power to manage loading of images in smart way and deliver the right content to user faster.
Content preloading It loads images for the active tab first, then for all others. If the tab is changed, the loading queue is updated to show users active content as fast as possible.
Synchronous loading By default images are loaded async, images are immediately displayed as they are loaded. Otherwise it loads all images for the active category, then shows them at the same time.
Improving sort quality There is built-in algorithm which can sort items (images) of different size in the best esthetic way..
Sort by size The largest items are on top of the layout and the smallest ones are at the bottom.
Precalculate It'll pre-calculate and pre-sort layouts for all tabs (category).
Fill container width It'll take container (layout) width and increase item height and width (by same ration) to fill the container width.
Autoheight Animation from previous layout height to current layout height. You can disable the animation by setting duration to 0.
Fallback message If there aren't any items for that category, the fallback message will be shown.
Variable selectors Every HTML element's selector can be changed as you need. Data attribute as well.
Load more Load more items into layout from external file by clicking on button or you can use API to fire that.
Dimensions Set width and height once, then set ratio size for each item. For example width is 200px, height is 150px, then for item 1 you set its size in ratio width 1, height 2. So A width is 200px and height is 300px.
Hover effects You can choose from 10 various hover effects. It also works very well on touch devices.
Variable selectors Every HTML element's selector can be changed as you need. Data attribute as well.
Init animation Choose from 6 pre-designed CSS animations or create your own.
Image path prefix Set images source only once, then just write the image name.
Template design Each modal window instance has its own HTML template. The file is loaded with AJAX once on beginning, then the plugin injects content there and keeps it updated.
Infinite browsing This feature allows you to go through pages in one direction forever. When you reach the last page, next one is the first one.
Keyboard control Use arrows left and righ to browse through the pages, press escape button to close it. Or set your own key for these actions.
Customizable UI Modal window UI offers counter and navigation icons. All these parts are optionable.
Variable selectors Every HTML element's selector can be changed as you need. Data attribute as well.
Animations You can turn off or on all modal window animations by one click.
Image path prefix Set images source only once, then just write the page name.
Arrows navigation Extra arrows (left, right) navigation for switching between tabs. They are enabled automatically, If width of tabs is bigger than container width.
Draggable If width of tabs is bigger than container width, draggable mode is switched on. Perfect solution especially for touch devices. A user can swipe left, right throught tabs slider.
Stick to active The active tab will be, if it's possible, move to center. It's clear for user, where is and will be the active tab. Very useful especially for small screens.
Minimalist style It'll turn off all features that manipulate with DOM, so if you want full control on how the tabs should look like, use this.
Variable selectors Every HTML element's selector can be changed as you need. Data attribute as well.
Fill container width This feature will set same width for each tab to fill full container width.
Animated line Bottom slight line which follows active tab. It's adjust its own width based on tab width. It's good UX feature.
Counter Each tab can display how many items are in that category.
Modules activity You can turn off each modules, if you don't need it. For example, I want to create gallery, but I don't need Modal window module.
Mutiple instances Thanks to index attribute, you can create multiple separate versions of Alfred on the same page.
Update on resize Update whole plugin, when it's needed, on window resize.