Multimedia System
Overview
The Phenix Multimedia System provides a powerful and flexible way to handle various media types in your web applications. It allows you to create responsive media elements with aspect-ratio support, including backgrounds, images, embedded media, gradients, mixed backgrounds, and 3D objects.
The system is designed to be flexible, easy to use, and performance-optimized with features like lazy loading.
Key Features
- Responsive Media Elements: Create media with proper aspect ratios that adapt to any screen size
- Multiple Media Types: Support for backgrounds, images, videos, iframes, gradients, and more
- Lazy Loading: Performance optimization by loading media only when needed
- Gradient Support: Create beautiful gradient backgrounds with multiple modes
- Mixed Backgrounds: Combine images with gradient overlays for stunning visual effects
- 3D Object Rendering: Display 3D models using Three.js integration
- Component Integration: Seamless integration with Splide sliders and Marquee elements
Media Types Documentation
The Multimedia System is organized into specialized modules for different media types:
- Background & Images: Static media elements including CSS backgrounds and image tags
- Embed Media: Videos, iframes, YouTube, Vimeo, and other embedded content
- Gradient & Mixed Backgrounds: Gradient backgrounds and image-gradient combinations
- 3D Objects: Integration with Three.js for 3D model rendering
Basic Usage
The most basic implementation requires an element with the .px-media
class and appropriate data attributes:
<!-- Basic Multimedia Element -->
<div class="px-media"
data-src="path/to/media"
data-type="background">
</div>
// Initialize multimedia elements
Phenix('.px-media').multimedia();
See the specific documentation pages for detailed examples of each media type.
Media Types
The Phenix Multimedia System supports several media types that can be specified using the data-type
attribute or the type
option:
Media Type | Description | Documentation |
---|---|---|
background | CSS background images | Background & Images |
image | Image elements (better for SEO) | Background & Images |
embed | Videos, iframes, YouTube, etc. | Embed Media |
gradient | CSS gradient backgrounds | Gradient & Mixed Backgrounds |
mixed-bg | Image with gradient overlay | Gradient & Mixed Backgrounds |
3d-viewer | 3D model rendering | 3D Objects |
Common Features
Aspect Ratio
All multimedia elements support various aspect ratios that can be specified using the data-size
attribute or CSS classes:
<!-- Square (1:1) -->
<div class="px-media ratio-1x1" data-src="path/to/image.jpg"></div>
<!-- Classic (4:3) -->
<div class="px-media" data-src="path/to/image.jpg" data-size="4x3"></div>
<!-- HD (16:9) -->
<div class="px-media ratio-16x9" data-src="path/to/image.jpg"></div>
<!-- Widescreen (21:9) -->
<div class="px-media" data-src="path/to/image.jpg" data-size="21x9"></div>
<!-- Custom percentage -->
<div class="px-media" data-src="path/to/image.jpg" data-size="75%"></div>
<!-- No aspect ratio -->
<div class="px-media ratio-x" data-src="path/to/image.jpg"></div>
Lazy Loading
Enable lazy loading to load media only when it comes into view:
<div class="px-media"
data-src="path/to/image.jpg"
data-type="background"
data-lazyloading="true">
</div>
Phenix('.px-media').multimedia({
lazyloading: true
});
JavaScript API
The Multimedia System can be initialized and configured using JavaScript:
Phenix('.px-media').multimedia({
// Media type
type: 'background', // background, image, embed, gradient, mixed-bg, 3d-viewer
// Media source
src: 'path/to/media',
// Aspect ratio
size: '16x9', // 1x1, 4x3, 16x9, 16x10, 21x9, percentage (e.g., '75%')
// Lazy loading
lazyloading: false,
// Additional settings (see specific documentation pages for details)
// ...
});
See the specific documentation pages for detailed configuration options for each media type.
Integration with Other Components
The Multimedia System automatically integrates with other Phenix components:
- Slider Integration: Automatically handles media in Splide sliders
- Marquee Integration: Properly loads media in marquee elements
- Modal Integration: Works with popup modals for lightbox functionality
Common Configuration Options
Option | Type | Default | Description |
---|---|---|---|
type | String | 'background' | Media type: 'background', 'image', 'embed', 'gradient', 'mixed-bg', '3d-viewer' |
src | String | null | Source URL for the media |
size | String | null | Aspect ratio: '1x1', '4x3', '16x9', '16x10', '21x9', or percentage |
lazyloading | Boolean | false | Enable lazy loading |
See the specific documentation pages for detailed configuration options for each media type.
CSS Classes
Class | Description |
---|---|
.px-media | Main multimedia container |
.ratio-1x1 | Square aspect ratio (1:1) |
.ratio-4x3 | Classic aspect ratio (4:3) |
.ratio-16x9 | HD aspect ratio (16:9) |
.ratio-16x10 | Widescreen aspect ratio (16:10) |
.ratio-21x9 | Ultra-wide aspect ratio (21:9) |
.ratio-x | No aspect ratio |
.px-is-loading | Applied during lazy loading |
Browser Compatibility
The Phenix Multimedia System is compatible with all modern browsers. For 3D object rendering, WebGL support is required.