Options

Here you can see all the JS options.

Option Type Default Description
loadingEffectName String Nut When loading images it appears with animation. You can find animation list here
scrollEffectName String fadeIn When the user scroll page images appeares with animation. You can find animation list here
imageEffect String normal Some image effects. Options: grayscale , invert , sepia , blur
columns String 4 Columns count
columnsBreak number 300 Min columns width. For example, if you set 400, your images min width will be 400px.
horizontalSpace number 5 The horizontal space between boxes
verticalSpace number 5 The vertical space between boxes
singlePreview array Accept 2 parametr enabled,style . If you want to use single preview,you should set enabled:true. There are 4 different single preview style. Styles: effect-1,effect-2,effect-3,effect-4
thumbnailPreview array Accept 3 parametr enabled,gallery,imageLoadingEffect . If you want to use thumbnail preview, you should set enabled:true. If you set gallery:true, then you can show images thumbnail preview like google engine. imageLoadingEffect parametr accepts options the same with scrollEffectName. You can find animation list here
galleryPreview array Accept 2 parametr enabled,openEffect.If you want to use gallery preview,you should set enabled:true . Also, you can select opening effect of popup. Options: zoomIn;rotate;slide;3d_unfold;zoomOut
filter String fadeIn Accept 4 parametr enabled,container,itemSelector,valueAttr.
sort String fadeIn Accept 4 parametr enabled,container,itemSelector,valueAttr.

Do you want to know how to use it? Please see examples section.

You can pass all the options to JS function like this (these are the default values)

     $('#myGrd').imageTiles({
              loadingEffectName:'Nut',
              scrollEffectName:'fadeIn',
              imageEffect:'normal',
              columns:'4',
              columnsBreak:300,
              horizontalSpace:5,
              verticalSpace:5,
              singlePreview:{
                enabled:false,
                style:'effect-1'
              },
              thumbnailPreview:{
                enabled:false,
                gallery:false,
                imageLoadingEffect:'zoomIn'
              },
              galleryPreview:{
                enabled:false,
                openEffect:'zoomIn'
              },
              filter:{
                enabled:true,
                container:'',
                itemSelector:'',
                valueAttr:'data-filter'
              },sort:{
                enabled:false,
                container:'',
                itemSelector:'',
                valueAttr:'data-sort-by',
                data: {}
              }
              });