Getting Started

We designed Alfred to help web developers build the best portfolios and beautiful galleries. The plugin offers wide range of features and options. First, let's implement the plugin into your project.

Installation

Short guide, how to use Alfred. To get informations what files are where, please check the Overview - What's included.

Start from scratch or use a template, all templates - examples are placed at the examples folder (Don't forget to include theassets/ folder).

Start from scratch

Create a new HTML file and follow instructions below.

  1. Include main files

    The main stylesheet alfred.css and the normalize.css place into <head>.
    The JavaScript core alfred.js place before end of </body> tag.

  2. Create HTML structure

    Insert the code below inside the <body>.

    Tabs
    Layout
  3. AJAX files

    Now copy a folder called ajax placed in alfred/examples/main/ folder to a destination, where you've placed the other files mention above. Check if files paths are correct ("templatePath" - gallery and modal window template, "pathPrefix" - layout and gallery images). If so, you're ready to go.

  4. The file:// protocol

    Please note, that all AJAX calls won't work (such as the Gallery, the Modal window and the Load more feature), due the file:// protocol (like when you open a local HTML file in browser).