Demos

Default style

With icons

 

Animations

Slide in from top


$(".gallery").infinite({
  animation: "slideInFromTop"
});

Slide in from bottom


$(".gallery").infinite({ 
  animation: "slideInFromBottom" 
});

Fade in & out


$(".gallery").infinite({
  animation: "fadeIn"
});

Pop in & out


$(".gallery").infinite({
  animation: "popIn"
});

Styling

Popup background color


$(".gallery").infinite({
  background:"#999"
});

Popup background pattern


$(".gallery").infinite({
  background: "url(images/demo_pattern2.png)"
});

Button styling


$(".gallery").infinite({
  buttonColor: "#fff",
  buttonBackground: "#555",
  buttonHoverColor: "#fff",
  buttonHoverBackground: "#900",
  buttonBorderColor: "#000",
  buttonBorderHoverColor: "#000"
});

Border radius


$(".gallery").infinite({
  borderRadius:10 //in px
});

Border styling


$(".gallery").infinite({
  buttonBorderWidth: 3,
  buttonBorderType: "dotted",
  buttonBorderColor: "#900",
  buttonBorderHoverColor: "#333"
});

Remove readmore btn


$(".gallery").infinite({
  hideReadmoreLnk: true
});

If you want to hide just the one readmore button for one popup then html code will look like this: 
data-readmore="" //leave empty

Remove download btn


$(".gallery").infinite({
  hideDownloadLnk: true
});

If you want to hide just the one download button for one popup then html code will look like this: 
data-download="" //leave empty

Remove popup image


$(".gallery").infinite({
  hideImage:true
});

If you want to hide just the one popup image for one popup then html code will look like this: 
data-image="" //leave empty

Main btn/tab padding


$(".gallery").infinite({
  tabPadding:"8px 20px"
});

8px (top and bottom)
20px (right and left)
same as 8px(top) 20px(right) 8px(bottom) 20px(left)
can also use 8px (top, bottom, left, right)

Popup btns padding


$(".gallery").infinite({
  popupButtonsPadding:"8px 20px"
});

Change target attribute


$(".gallery").infinite({
  downloadLnkTarget:"_self",
  readmoreLnkTarget:"_self"
});

Default settings each: "_blank"

Iframe option


$(".gallery").infinite({
  showImageOnly:true,
  iframe:true
});

Change "close" button
(Text version)


$(".gallery").infinite({
  close_button:"Close me!"
});

Change "close" button
(Image version)


$(".gallery").infinite({
  close_button:"<img src='images/demo_close_btn.png' />"
});

Youtube clip


$(".gallery").infinite({
  showImageOnly:true,
  iframe:true
});

Gallery option 01


$(".gallery").infinite({
  tabPadding:"0",
  showImageOnly:true,
  galleryType:"default",
  tabImagePadding:12 //in px (default value is 10)
});

Gallery option 02


$(".gallery").infinite({
  showImageOnly:true,
  galleryType:"pseudo"
});

Gallery option 03


$(".gallery").infinite({
  galleryType:"pseudo2"
});