pinbox jquery plugin

Pinbox, Pinterest.com div layout

Weitere Beispiele und Demos:
http://kayschneider.github.com/pinbox/

Pinbox ist ein jquery plugin mit welchem man schnell und einfach das Pinterest.com div layout

nachahmen kann.

Die Verwendung ist recht einfach. Man muss einfach nur die Sources von 

https://github.com/KaySchneider/pinbox

in die eigene Seite einbinden.

Folgendes HTML markup:

<div id="categoryProductContainer" style="position: relative;">
<div class="span2 pcon smaller prodcont actioninside new">
1
            </div>
<div class="span2 pcon prodcont actioninside new">
2
            </div>
<div class="span2 pcon higher prodcont actioninside new">
3
            </div>
<div class="span2 pcon prodcont actioninside new">
4
            </div>
</div>

Erläuterung:

Die id vom äusersten div container ist frei wählbar dann muss nur der Aufruf dementsprechend angepasst werden.
Die CSS Klassen prodcont und new sind nicht ersetzbar und darauf sollten auch keine CSS Styles gelegt werden da diese Klassen als Selektoren vom plugin benutzt werden. Die Klasse new wird vom plugin auch wieder entfernt.

Um nun aus diesen Div Blöcken den Pinterest look and feel zu geben brauchen wir nur das Plugin auf den äußeren div container zu legen:

 
  $('#categoryProductContainer').pinbox();

Dem plugin pinbox kann man noch ein paar Optionen mitgeben:

• newitemindicator : "new",
• subcontainer : ".prodcont",
• rowsize : 5

Hier sind alle möglichen Optionen mit Ihren default Werten dargestellt.
Mit newitemindicator wird die selektor Klasse angegeben welche dem plugin zeigt dass dieser div Block neu ist und noch positioniert werden muss.
Subcontainer ist der Selektor mit welchem die container selektiert werden. Die zu Positionierenden Elementen müssen also alle zwei Klassen besitzen. Also newitemindicator und subcontainer.
Wichtig: Bei subcontainer muss der . explizit mitangegeben werden.
Rowsize ist die Anzahl der Elemente, div Blöcke, welche in einer Zeile angezeigt werden sollen. Im default
Fall sind es 5 und danach werden die Elemente eine Zeile weiter unten angeordnet.

Beispiel Aufruf mit Optionen:

var opts = { newitemindicator : "notset",
        subcontainer : ".div",
        rowsize : 3 };
 $('#categoryProductContainer').pinbox(opts).hide().fadeIn(400);

Im obigen Beispiel wird auch noch gezeigt wie man die pinbox mit weiteren Elementen von jquery verbinden kann. Das oben gezeigte Beispiel erzeugt eine neue pinbox mit einer breite von 3 Elementen. Danach werden alle Elemente ausgeblendet und mittels fadeIn wieder eingefadet. Wobei ein ganz netter Effekt mit wenig Aufwand entsteht.

Demo mit ajax:
http://kayschneider.github.com/pinbox/example/advanced.html

Weitere Beispiele und Demos:
http://kayschneider.github.com/pinbox/