Folders and files

Keep all files and folders of bootFolio on your root folder.


root/
├── bfassets/
│ ├── css/
│ │ ├── bootFolio.css
│ │ ├── prettyPhoto.css
│ ├── js/
│ │ ├── jquery.js
│ │ ├── jquery.bootFolio.js
│ │ ├── jquery.prettyPhoto.js
│ ├── prettyPhoto/
├── bfimages/
│ ├── large/

HTML Stracture

1. From our example files (index.html, index-2.html, index-3.html, index-4.html, index-5.html........) copy "bootFolio head" section and paste it to your files (before closeing head {</head>} tag).


<!-- bootFolio head -->
<link href="bfassets/css/bootFolio.css" rel="stylesheet">
<link href="bfassets/css/prettyPhoto.css" rel="stylesheet">
<!-- // bootFolio head-->

2. From our example files (index.html, index-2.html, index-3.html, index-4.html, index-5.html........) copy "bootFolio footer" section and paste it to your files (before closeing body {</body>} tag).


<!-- bootFolio footer-->
<script src="bfassets/js/jquery.js"></script>
<script src="bfassets/js/jquery.bootFolio.js"></script>
<script src="bfassets/js/jquery.prettyPhoto.js"></script>

<script type="text/javascript">
$(document).ready(function(){
$("#*****").bootFolio({
   bfLayout: "bflayhover",
   bfFullWidth:"full-width",
   bfHover: "bfhover162",
   bfAnimation: "scale",
   bfSpace: "nospace",
   bfAniDuration: 500,
   bfCaptioncolor: "#072B4B",
   bfTextcolor:"#ffffff",
   bfTextalign:"center",
   bfNavalign:"center"
});
$("a[rel^='prettyPhoto']").prettyPhoto();
});
</script>

<!-- // bootFolio footer-->
**** selector id for bootFolio (this may any unique word)

3. From our example files (index.html, index-2.html, index-3.html, index-4.html, index-5.html........) copy "bootFolio content" section and paste it to your files (where you want to place it).


<!-- bootFolio content -->
<div id="****" class="bf">





</div>
<!-- // bootFolio content -->
**** selector id for bootFolio (this may any unique word)

4. Set/change your item category from "bootFolio category filter" section.


<!-- bootFolio category filter -->

<ul class="filter">
<li><a data-cat="all" href="#" class="active">All</a></li>
<li><a data-cat="html" href="#">HTML</a></li>
<li><a data-cat="css" href="#">CSS</a></li>
<li><a data-cat="wordpress" href="#">WordPress</a></li>
<li><a data-cat="responsive" href="#">Responsive</a></li>
<li><a data-cat="bootstrap" href="#">Bootstrap</a></li>
...
</ul>

<!-- // bootFolio category filter -->

5. Also Set/change your item category from "single item" line.



    <!-- bootFolio Items --> 
<ul class="items">

<!-- single item -->

<li class="wordpress html">
<div class="bf-single-item">
<img src="bfimages/3.jpg">
<div class="caption">
<div class="cap-in">
<h3>FOCii Website</h3>
<div class="bfcatagory-cap">
<a href="">Logo</a>, <a href="">Web</a>
</div>
<div class="bflink-preview">
<a href="">more info</a> <a href="bfimages/large/3.jpg" rel="prettyPhoto">view large</a>
</div>
</div>
</div>
</div>
</li>
....





</ul>

6. Default Plugin Options and values ( alternative values are included )


        {
bfLayout: "bflayhover", (bflayhover, bflay0, bflay0border, bflay1, bflay1border, bflay2, bflay2border, bflay3, bflay4, bflay5, bflay6, bflay7, bflay8, bflay9, bflay10, bflay11, bflay12, bflay13, bflay14)
bfFullWidth:"full-width", (full-width, box)
bfHover: "bfhover162", (bfhover1, bfhover2, bfhover3, ......... bfhover167)
bfAnimation: "scale", (fade, matrix, translate, translateX, translateY, scale, scaleX, scaleY, rotate, rotateX, rotateY, skew, skewX, skewY)
bfSpace: "nospace", (space nospace)
bfAniDuration: 500, (100, 200, 500, 1000 etc value unit is milisecond)
bfCaptioncolor: "#072B4B", (any hex color value)
bfTextcolor:"#ffffff", (any hex color value)
bfTextalign:"center", (left, center, right)
bfNavalign:"center" (left, center, right)
}

Sources and Credit

I've used the following items.


Once again, thank you so much for purchasing this items. As I said at the beginning, I'd be glad to help you if you have any questions relating to this items. No guarantees, but I'll do my best to assist. If you have a more general question relating to the item on CodeCanyon., you might consider visiting the forums and asking your question in the "Item Discussion" section.