prtfl
v1.0.0
Published
create a simple portfolio gallery with onclick overlay out of a json file
Downloads
5
Readme
PRTFL.js - Awesome Project Presentation
PRTFL.js creates a simple, clickable item grid with a clickable details overlay out of a json description.
PRTFL is built to easily integrate into any web project - no endless dependencies, just plain javascript and css.
Have a look a the demonstration.
How To
Just add the .js and the .css-file to your resources. Then, choose a root element (give the id "PRTFL"). Ready.
A small example:
<html>
<head>
<link rel="stylesheet" href="PRTFL.min.css">
</head>
<body>
<div id="PRTFL"></div>
<script type="text/javascript" src="PRTFL.min.js"></script>
</body>
</html>Now you can add items to the grid, have a look at the .json file in /demo.
{
"items":
[
{
"preview":
{
"title": "Project A",
"description": "a fancy project description",
"thumbnail": "thumbnail_1.png"
},
"details":
{
"title": "Project A",
"content":
[
{
"type": "PICTURE",
"value": ["a_picture.jpg"]
},
{
"type": "TEXT",
"value": "a single picture and a paragraph"
}
]
},
"tags": ["A","B"],
"date": "ISODATE"
}
]
}A few notes on content types
- PICTURE: for simplicity all used images are expected to be in ./img (you can change this in the cfg object)
- YOUTUBE: use just the embed code as value, not the whole embed url
- HTML: You can use complex html structures with this type
- TEXT: Faster than html