How to use this plugin

This plugin is made to be easy customisable. With all the options available you are able to change the styling without having to touch the stylesheet.

This plugin uses a free-source font called FontAwesome for icons.

HTML

<ul class=”gallery”>  // Class name can be anything
   <li data-title=”Heading goes here” //Gallery item
          // image in popup box - leave empty if you don’t want an image
          data-image=”images/demo_thumb.jpg” 
          // Description and/or information goes here 
          data-description=”Description goes here”
          // Read more link - leave empty if you don’t want a read more link 
          data-readmore=”http://www.starlett.co.za” 
          // Download link - leave empty if you don’t want a download link
          data-download=”http://www.starlett.co.za”>
          //Always include height and width of image(NB)
          //Can use text instead of image
          <a class=”cf_tab”><img src=”thumb.jpg” width=”150” height="150" /></a>
   </li>
</ul>

THEMES

There are no themes for this plugin. With the jquery options provided you can easily customise items to look the way you want them to look to make them suitable for your website.

Responsive

This plugin is made to be responsive and will fit all screens perfectly.


Jquery OPTION 1

$(document).ready(function() {
     //assign gallery (ul class) to Fancy Gallery plugin
     $(”.gallery”).infinite(); 
});

JQUERY OPTION 2

$(document).ready(function() {
     $(”.gallery”).infinite({ 
        ...options go here... 
     }); 
});

Options

$(”.gallery”).infinite({
    speed:500, //Animation speed (milliseconds)
    animation:"slideInFromTop", //Animation type
    close_button:"CLOSE", //Text/image in popup "close" button
    background:"#ddd", //Popup background color or image
    txtColor:"#333", //Text color
    buttonColor:"#121212", //Button text color
    buttonBackground:"#eee", //Button background color
    buttonHoverColor:"#660000", //Button text hover color
    buttonHoverBackground:"#DFDFD0", //Button background hover color
    buttonBorderColor:"#9B9B8C", //Button border color
    buttonBorderHoverColor:"#bbb", //Button border hover color
    buttonBorderWidth:1, //Button border width (px)
    buttonBorderType:"solid", //Button border type
    boxShadow:false, //If set to "true", boxshadow effect will be applied to popup elements and buttons
    closeBtnClass:"", //Use only if you want to remove the background color in the case of you wanting to use an image instead. Use “no_bg” in this case. This applies only to the "Close" button.
    hideDownloadLnk:false, //If set to TRUE then all download buttons will be hidden
    hideReadmoreLnk:false, //If set to TRUE then all readmore buttons will be hidden
    hideImage:false, //If value is true then the popup image won’t be visible and the text block will stretch out to fill its place
    tabPadding:"4px 8px", //Padding main links - can be like this as well: “8px 2px 4px 5px” and “5px 12px” etc.
    popupButtonsPadding:"4px 8px", //Padding popup links - can be like this as well: “8px 2px 4px 5px” and “5px 12px” etc.
    largeImagePadding:2, //Popup image padding (in %)
    borderRadius:0, //For round corners if needed (in px)
    downloadLnkTarget:"_blank", //Download link target attribute
    readmoreLnkTarget:"_blank", //Readmore link target attribute
    tabImagePadding:10, //Padding for tab in gallery option (tabs with images instead of text)
    showImageOnly:false, //If set to true then layout changes to gallery view
    iframe:false, //If set to true then iframe option activated
    galleryType:"none", //
    pseudoW:170, //Only used when "galleryType" value is set to "pseudo" or "pseudo2". Value will be for width of gallery item.
    pseudoH:170 //Only used when "galleryType" value is set to "pseudo" or "pseudo2". Value will be for height of gallery item.
});

WHAT TO INCLUDE IN YOUR PAGE

<link type=”text/css” rel=”stylesheet” href=”css/cfGallery.css” />
<script src=”js/jquery.min.js”></script>
<script src=”js/infinite.min.js”></script>
<script>
$(document).ready(function() {
   $(”.gallery”).infinite();	
});
</script>