Photocols - Feature Showcase

Data Format

Each photo item requires a title, subtitle, URL, and image source.

var data = [
  {
    title: 'Mountain View',      // Title shown on hover
    subtitle: 'Nature Photography', // Subtitle shown on hover
    url: 'https://example.com',   // Link when clicked
    img: 'https://picsum.photos/640/480' // Image URL
  },
  {
    title: 'City Lights',
    subtitle: 'Urban Landscape',
    url: 'https://example.com',
    img: 'https://picsum.photos/640/480'
  },
  // ... more items
];
            

Basic Usage (Default - Scroll Up)

The default behavior with columns scrolling upward.

$('#gallery').photocols({
  height: 400,
  colswidth: 200,
  data: data
});
            

Scroll Directions

Support for all four scroll directions: up, down, left, and right.

Direction: Up (Default)

Direction: Down

Direction: Left

Direction: Right

// Horizontal scrolling (left to right)
$('#gallery').photocols({
  direction: 'right',  // 'up' | 'down' | 'left' | 'right'
  height: 300,
  data: data
});
            

Variable Speed (Parallax Effect)

Each column/row moves at a different speed, creating a parallax effect.

$('#gallery').photocols({
  variableSpeed: true,
  speedVariation: 0.6,  // 40% to 160% of base speed
  animationSpeed: 0.7,  // Slower for smooth parallax
  data: data
});
            

Pause All on Hover

Hover anywhere on the gallery to pause the entire animation (not just the active column).

$('#gallery').photocols({
  pauseAllOnHover: true,
  data: data
});
            

Lazy Loading

Images are loaded only when they're about to enter the viewport. Ideal for large galleries.

$('#gallery').photocols({
  lazyLoad: true,
  lazyLoadThreshold: 150,  // Start loading 150px before visible
  placeholderColor: '#2d2d44',
  data: data
});
            

Combined Features

All features combined: horizontal scrolling, variable speed, pause all on hover, and lazy loading.

$('#gallery').photocols({
  direction: 'left',
  variableSpeed: true,
  speedVariation: 0.5,
  pauseAllOnHover: true,
  lazyLoad: true,
  lazyLoadThreshold: 100,
  height: 450,
  animationSpeed: 0.6,
  data: data
});
            

Custom Styling

Customize colors, overlay, and typography.

$('#gallery').photocols({
  bgcolor: '#0a192f',
  overlayColor: '#0a192f',
  opacity: 0.5,
  titleSize: 18,
  subtitleSize: 14,
  gap: 4,
  data: data
});
            