Tuesday, 4 December 2012

The Pin View 1.0 - inspired by Pinterest

This module
- creates a Pinterest like Pin Board view on your website.
- users can attach pins on the pin board.
- has only client side view and uses jQuery with Masonry plugin.

Download Pack     Live Demo    

How to use:

The download pack contains the complete source with the war file used in the demo
The code lies in index.jsp and pin.view.js files. Back end code with servlets will be added in the next post.

Javascript (Input Variables)

In the config section of the Javascript, initialize the values of input variables as shown.

The variable pinDatabase is an array of javascript objects. Each object has three variables - title of your pin (required), an image URL, a URL linking the pin to a web page. These are the pins already existing in your application. You may simulate this as a database in your servlet OR wait for my next post.
Users may add pins using the add button provided.

Config variables explanation

If you increase the pin_board_width or decrease the pin_width, then the number of columns in the board will increase. Similarly, if you decrease the pin_board_width or increase the pin_width, then the number of columns will decrease in the view.

Let me know if you face any issues.


  1. It look very nice and I need something like this in your next version, I'll try to plug a database on it. Please let me know when it's finished!

    1. you may suggest some features, that you're interested in .. for the next version..

  2. Hi, I love your post! I'd like to add. If you click on the box that shows the number of repins a page will appear that shows all of the boards that pin has been pinned to. Below is an image of what you’ll see when you click on and enlarge one of your repins. Good day! ~ Jessica Malcolm