Tiles Grid - Theme Options

Basic tile grid theme include: <head> ... <!-- Include Unite Gallery core files --> <script src='unitegallery/js/unitegallery.min.js' type='text/javascript' ></script> <link href='unitegallery/css/unite-gallery.css' rel='stylesheet' type='text/css' /> <!-- include Unite Gallery Theme Files --> <script src='unitegallery/themes/tilesgrid/ug-theme-tilesgrid.js' type='text/javascript'></script> ... </head> <body> <div id="gallery"> ... </div> <script type="text/javascript"> jQuery(document).ready(function(){ jQuery("#gallery").unitegallery({ gallery_theme: "tilesgrid" }); }); </script> </body> All tiles grid theme related options: jQuery(document).ready(function(){ jQuery("#gallery").unitegallery({ //main options: tile_width: 180, //tile width tile_height: 150, //tile height theme_gallery_padding: 0, //padding from sides of the gallery grid_padding:10, //set padding to the grid grid_space_between_cols: 20, //space between columns grid_space_between_rows: 20, //space between rows theme_auto_open:null, //auto open lightbox at start - if some number gived, like 0 //gallery options: gallery_theme: "tilesgrid" //choose gallery theme (if more then one themes includes) gallery_width:"100%", //gallery width gallery_min_width: 150, //gallery minimal width when resizing gallery_background_color: "", //set custom background color. If not set it will be taken from css. //navigation options grid_num_rows:3, //maximum number of grid rows. If set to big value, the navigation will not appear. theme_navigation_type: "bullets", //bullets, arrows theme_bullets_margin_top: 40, //the space to bullets theme_bullets_color: "gray" //gray, blue, brown, green, red - color of the bullets bullets_space_between: 12, //space between bullets theme_arrows_margin_top: 20, //the space between arrows and grid theme_space_between_arrows: 5, //horizontal space between arrows theme_navigation_align: "center", //center, left, right - horizontal align of the navigation theme_navigation_offset_hor: 0, //horizontal offset of the navigation, according the align //tile design options: tile_enable_border:true, //enable border of the tile tile_border_width:3, //tile border width tile_border_color:"#F0F0F0", //tile border color tile_border_radius:2, //tile border radius (applied to border only, not to outline) tile_enable_outline: false, //enable outline of the tile (works only together with the border) tile_outline_color: "#8B8B8B", //tile outline color tile_enable_shadow:true, //enable shadow of the tile tile_shadow_h:1, //position of horizontal shadow tile_shadow_v:1, //position of vertical shadow tile_shadow_blur:3, //shadow blur tile_shadow_spread:2, //shadow spread tile_shadow_color:"#8B8B8B", //shadow color tile_enable_action: true, //enable tile action on click like lightbox tile_as_link: false, //act the tile as link, no lightbox will appear tile_link_newpage: true, //open the tile link in new page tile_enable_overlay: true, //enable tile color overlay (on mouseover) tile_overlay_opacity: 0.4, //tile overlay opacity tile_overlay_color: "#000000", //tile overlay color tile_enable_icons: true, //enable icons in mouseover mode tile_show_link_icon: false, //show link icon (if the tile has a link). In case of tile_as_link this option not enabled tile_space_between_icons: 26, //initial space between icons, (on small tiles it may change) tile_enable_image_effect:false, //enable tile image effect tile_image_effect_type: "bw", //bw, blur, sepia - tile effect type tile_image_effect_reverse: false, //reverce the image, set only on mouseover state //tile text panel options: tile_enable_textpanel: false, //enable textpanel tile_textpanel_source: "title", //title,desc,desc_title. source of the textpanel. desc_title - if description empty, put title tile_textpanel_always_on: false, //textpanel always visible tile_textpanel_appear_type: "slide", //slide, fade - appear type of the textpanel on mouseover tile_textpanel_position:"inside_bottom", //inside_bottom, inside_top, inside_center, top, bottom the position of the textpanel tile_textpanel_offset:0, //vertical offset of the textpanel tile_textpanel_padding_top:8, //textpanel padding top tile_textpanel_padding_bottom:8, //textpanel padding bottom tile_textpanel_padding_right: 11, //cut some space for text from right tile_textpanel_padding_left: 11, //cut some space for text from left tile_textpanel_bg_opacity: 0.4, //textpanel background opacity tile_textpanel_bg_color:"#000000", //textpanel background color tile_textpanel_bg_css:{}, //textpanel background css tile_textpanel_title_color:null, //textpanel title color. if null - take from css tile_textpanel_title_font_family:null, //textpanel title font family. if null - take from css tile_textpanel_title_text_align:null, //textpanel title text align. if null - take from css tile_textpanel_title_font_size:null, //textpanel title font size. if null - take from css tile_textpanel_title_bold:null, //textpanel title bold. if null - take from css tile_textpanel_css_title:{}, //textpanel additional css of the title tile_textpanel_desc_color:null, //textpanel description font family. if null - take from css tile_textpanel_desc_font_family:null, //textpanel description font family. if null - take from css tile_textpanel_desc_text_align:null, //textpanel description text align. if null - take from css tile_textpanel_desc_font_size:null, //textpanel description font size. if null - take from css tile_textpanel_desc_bold:null, //textpanel description bold. if null - take from css tile_textpanel_css_description:{}, //textpanel additional css of the description //lightbox options: lightbox_type: "wide", //compact / wide - lightbox type lightbox_hide_arrows_onvideoplay: true, //hide the arrows when video start playing and show when stop lightbox_arrows_position: "sides", //sides, inside: position of the arrows, used on compact type lightbox_arrows_offset: 10, //The horizontal offset of the arrows lightbox_arrows_inside_offset: 10, //The offset from the image border if the arrows placed inside lightbox_arrows_inside_alwayson: false, //Show the arrows on mouseover, or always on. lightbox_overlay_color:null, //the color of the overlay. if null - will take from css lightbox_overlay_opacity:1, //the opacity of the overlay. for compact type - 0.6 lightbox_top_panel_opacity: null, //the opacity of the top panel lightbox_close_on_emptyspace:true, //close the lightbox on empty space lightbox_show_numbers: true, //show numbers on the right side lightbox_numbers_size: null, //the size of the numbers string lightbox_numbers_color: null, //the color of the numbers lightbox_numbers_padding_top:null, //the top padding of the numbers (used in compact mode) lightbox_numbers_padding_right:null, //the right padding of the numbers (used in compact mode) lightbox_slider_image_border: true, //enable border around the image (for compact type only) lightbox_slider_image_border_width: 10, //image border width lightbox_slider_image_border_color: "#ffffff", //image border color lightbox_slider_image_border_radius: 0, //image border radius lightbox_slider_image_shadow: true, //enable border shadow the image lightbox_slider_control_swipe:true, //true,false - enable swiping control lightbox_slider_control_zoom:true, //true, false - enable zooming control //lightbox text panel: lightbox_show_textpanel: true, //show the text panel lightbox_textpanel_width: 550, //the width of the text panel. wide type only lightbox_textpanel_enable_title: true, //enable the title text lightbox_textpanel_enable_description: false, //enable the description text lightbox_textpanel_padding_top:5, //textpanel padding top lightbox_textpanel_padding_bottom:5, //textpanel padding bottom lightbox_textpanel_padding_right: 11, //cut some space for text from right lightbox_textpanel_padding_left: 11, //cut some space for text from left lightbox_textpanel_title_color:null, //textpanel title color. if null - take from css lightbox_textpanel_title_font_family:null, //textpanel title font family. if null - take from css lightbox_textpanel_title_text_align:null, //textpanel title text align. if null - take from css lightbox_textpanel_title_font_size:null, //textpanel title font size. if null - take from css lightbox_textpanel_title_bold:null, //textpanel title bold. if null - take from css lightbox_textpanel_css_title:{}, //textpanel additional css of the title lightbox_textpanel_desc_color:null, //textpanel description font family. if null - take from css lightbox_textpanel_desc_font_family:null, //textpanel description font family. if null - take from css lightbox_textpanel_desc_text_align:null, //textpanel description text align. if null - take from css lightbox_textpanel_desc_font_size:null, //textpanel description font size. if null - take from css lightbox_textpanel_desc_bold:null, //textpanel description bold. if null - take from css lightbox_textpanel_css_description:{}, //textpanel additional css of the description }); });