0
# Media Components
1

2
Components for handling images, videos, and media content including lightbox functionality, carousels, sliders, and responsive media display with Material Design styling.
3

4
## Capabilities
5

6
### Materialbox (Lightbox)
7

8
Image lightbox component with zoom functionality and smooth animations.
9

10
```javascript { .api }
11
/**
12
 * Materialbox lightbox component
13
 * @param el - Image element to be lightboxed
14
 * @param options - Configuration options
15
 */
16
class Materialbox {
17
  constructor(el: Element, options?: MaterialboxOptions);
18
  
19
  static init(els: Element | NodeList, options?: MaterialboxOptions): Materialbox | Materialbox[];
20
  static getInstance(el: Element): Materialbox;
21
  static get defaults(): MaterialboxOptions;
22
  
23
  /** Open lightbox */
24
  open(): void;
25
  
26
  /** Close lightbox */
27
  close(): void;
28
  
29
  destroy(): void;
30
}
31

32
interface MaterialboxOptions {
33
  /** Enter animation duration */
34
  inDuration?: number; // default: 275
35
  
36
  /** Exit animation duration */
37
  outDuration?: number; // default: 200
38
  
39
  /** Callback before lightbox opens */
40
  onOpenStart?: () => void;
41
  
42
  /** Callback after lightbox opens */
43
  onOpenEnd?: () => void;
44
  
45
  /** Callback before lightbox closes */
46
  onCloseStart?: () => void;
47
  
48
  /** Callback after lightbox closes */
49
  onCloseEnd?: () => void;
50
}
51
```
52

53
**Usage Examples:**
54

55
```html
56
<!-- Basic materialbox -->
57
<img class="materialboxed" width="650" src="images/sample-1.jpg">
58

59
<!-- Materialbox with caption -->
60
<img class="materialboxed" data-caption="A picture of some deer and tons of trees" width="250" src="images/sample-1.jpg">
61

62
<!-- Responsive materialbox -->
63
<img class="materialboxed responsive-img" src="images/sample-1.jpg">
64
```
65

66
```javascript
67
// Initialize materialbox
68
const elems = document.querySelectorAll('.materialboxed');
69
const instances = M.Materialbox.init(elems, {
70
  inDuration: 400,
71
  onOpenStart: () => console.log('Lightbox opening'),
72
  onCloseEnd: () => console.log('Lightbox closed')
73
});
74

75
// Programmatic control
76
const instance = M.Materialbox.getInstance(document.querySelector('.materialboxed'));
77
instance.open();
78
```
79

80
### Carousel
81

82
Responsive carousel component for images and content with touch support.
83

84
```javascript { .api }
85
/**
86
 * Carousel component
87
 * @param el - Carousel container element
88
 * @param options - Configuration options
89
 */
90
class Carousel {
91
  constructor(el: Element, options?: CarouselOptions);
92
  
93
  static init(els: Element | NodeList, options?: CarouselOptions): Carousel | Carousel[];
94
  static getInstance(el: Element): Carousel;
95
  static get defaults(): CarouselOptions;
96
  
97
  /** Move to next item(s) */
98
  next(n?: number): void;
99
  
100
  /** Move to previous item(s) */
101
  prev(n?: number): void;
102
  
103
  /** Move to specific item */
104
  set(n: number, callback?: () => void): void;
105
  
106
  destroy(): void;
107
}
108

109
interface CarouselOptions {
110
  /** Animation duration in milliseconds */
111
  duration?: number; // default: 200
112
  
113
  /** Zoom scale for non-active items */
114
  dist?: number; // default: -100
115
  
116
  /** Spacing for center image */
117
  shift?: number; // default: 0
118
  
119
  /** Padding between non-center items */
120
  padding?: number; // default: 0
121
  
122
  /** Number of visible items */
123
  numVisible?: number; // default: 5
124
  
125
  /** Full width slider */
126
  fullWidth?: boolean; // default: false
127
  
128
  /** Show indicator dots */
129
  indicators?: boolean; // default: false
130
  
131
  /** Don't wrap around items */
132
  noWrap?: boolean; // default: false
133
  
134
  /** Callback when cycle to new item */
135
  onCycleTo?: (item: Element, dragged: boolean) => void;
136
}
137
```
138

139
**Usage Examples:**
140

141
```html
142
<!-- Basic carousel -->
143
<div class="carousel">
144
  <a class="carousel-item" href="#one!"><img src="images/sample-1.jpg"></a>
145
  <a class="carousel-item" href="#two!"><img src="images/sample-2.jpg"></a>
146
  <a class="carousel-item" href="#three!"><img src="images/sample-3.jpg"></a>
147
  <a class="carousel-item" href="#four!"><img src="images/sample-4.jpg"></a>
148
  <a class="carousel-item" href="#five!"><img src="images/sample-5.jpg"></a>
149
</div>
150

151
<!-- Full width carousel -->
152
<div class="carousel carousel-slider center">
153
  <div class="carousel-fixed-item center">
154
    <a class="btn waves-effect white grey-text darken-text-2">button</a>
155
  </div>
156
  <div class="carousel-item red white-text" href="#one!">
157
    <h2>First Panel</h2>
158
    <p class="white-text">This is your first panel</p>
159
  </div>
160
  <div class="carousel-item amber white-text" href="#two!">
161
    <h2>Second Panel</h2>
162
    <p class="white-text">This is your second panel</p>
163
  </div>
164
</div>
165
```
166

167
```javascript
168
// Initialize carousel
169
const elems = document.querySelectorAll('.carousel');
170
const instances = M.Carousel.init(elems, {
171
  fullWidth: false,
172
  indicators: true,
173
  duration: 300,
174
  onCycleTo: (item) => console.log('Cycled to:', item)
175
});
176

177
// Carousel navigation
178
const instance = M.Carousel.getInstance(document.querySelector('.carousel'));
179
instance.next(); // Go to next item
180
instance.prev(); // Go to previous item
181
instance.set(2); // Go to third item (0-indexed)
182
```
183

184
### Slider
185

186
Full-width image slider with indicators and automatic transitions.
187

188
```javascript { .api }
189
/**
190
 * Slider component
191
 * @param el - Slider container element
192
 * @param options - Configuration options
193
 */
194
class Slider {
195
  constructor(el: Element, options?: SliderOptions);
196
  
197
  static init(els: Element | NodeList, options?: SliderOptions): Slider | Slider[];
198
  static getInstance(el: Element): Slider;
199
  static get defaults(): SliderOptions;
200
  
201
  /** Go to next slide */
202
  next(): void;
203
  
204
  /** Go to previous slide */
205
  prev(): void;
206
  
207
  /** Pause automatic transitions */
208
  pause(): void;
209
  
210
  /** Start automatic transitions */
211
  start(): void;
212
  
213
  destroy(): void;
214
}
215

216
interface SliderOptions {
217
  /** Show indicator dots */
218
  indicators?: boolean; // default: true
219
  
220
  /** Slider height in pixels */
221
  height?: number; // default: 400
222
  
223
  /** Transition duration */
224
  duration?: number; // default: 500
225
  
226
  /** Interval between automatic transitions */
227
  interval?: number; // default: 6000
228
}
229
```
230

231
**Usage Examples:**
232

233
```html
234
<!-- Basic slider -->
235
<div class="slider">
236
  <ul class="slides">
237
    <li>
238
      <img src="images/slider1.jpg">
239
      <div class="caption center-align">
240
        <h3>This is our big Tagline!</h3>
241
        <h5 class="light grey-text text-lighten-3">Here's our small slogan.</h5>
242
      </div>
243
    </li>
244
    <li>
245
      <img src="images/slider2.jpg">
246
      <div class="caption left-align">
247
        <h3>Left Aligned Caption</h3>
248
        <h5 class="light grey-text text-lighten-3">Here's our small slogan.</h5>
249
      </div>
250
    </li>
251
  </ul>
252
</div>
253
```
254

255
```javascript
256
// Initialize slider
257
const elems = document.querySelectorAll('.slider');
258
const instances = M.Slider.init(elems, {
259
  indicators: true,
260
  height: 500,
261
  duration: 600,
262
  interval: 4000
263
});
264

265
// Slider control
266
const instance = M.Slider.getInstance(document.querySelector('.slider'));
267
instance.pause(); // Pause auto-slide
268
instance.start(); // Resume auto-slide
269
```
270

271
### Parallax
272

273
Parallax scrolling effect for background images.
274

275
```javascript { .api }
276
/**
277
 * Parallax component
278
 * @param el - Parallax container element
279
 * @param options - Configuration options
280
 */
281
class Parallax {
282
  constructor(el: Element, options?: ParallaxOptions);
283
  
284
  static init(els: Element | NodeList, options?: ParallaxOptions): Parallax | Parallax[];
285
  static getInstance(el: Element): Parallax;
286
  static get defaults(): ParallaxOptions;
287
  
288
  destroy(): void;
289
}
290

291
interface ParallaxOptions {
292
  /** Responsive threshold in pixels */
293
  responsiveThreshold?: number; // default: 0
294
}
295
```
296

297
**Usage Examples:**
298

299
```html
300
<!-- Parallax container -->
301
<div class="parallax-container">
302
  <div class="parallax"><img src="images/parallax1.jpg"></div>
303
</div>
304

305
<!-- Content section -->
306
<div class="section white">
307
  <div class="row container">
308
    <h2 class="header">Parallax</h2>
309
    <p class="grey-text text-darken-3 lighten-3">
310
      Parallax is an effect where the background content is moved at a different speed than the foreground content.
311
    </p>
312
  </div>
313
</div>
314

315
<!-- Another parallax -->
316
<div class="parallax-container">
317
  <div class="parallax"><img src="images/parallax2.jpg"></div>
318
</div>
319
```
320

321
```javascript
322
// Initialize parallax
323
const elems = document.querySelectorAll('.parallax');
324
const instances = M.Parallax.init(elems);
325
```
326

327
**CSS Classes:**
328

329
```css { .api }
330
/* Parallax classes */
331
.parallax-container {
332
  /* Parallax container */
333
  position: relative;
334
  overflow: hidden;
335
  height: 500px;
336
}
337

338
.parallax {
339
  /* Parallax image container */
340
  position: absolute;
341
  top: 0;
342
  left: 0;
343
  right: 0;
344
  bottom: 0;
345
}
346

347
.parallax img {
348
  /* Parallax image */
349
  display: block;
350
  position: absolute;
351
  left: 50%;
352
  bottom: 0;
353
  min-width: 100%;
354
  min-height: 100%;
355
  transform: translate3d(-50%, 0, 0);
356
  transform-style: preserve-3d;
357
  backface-visibility: hidden;
358
}
359
```
360

361
### Responsive Images
362

363
CSS utilities for responsive image handling.
364

365
```css { .api }
366
/* Responsive image classes */
367
.responsive-img {
368
  /* Responsive image */
369
  max-width: 100%;
370
  height: auto;
371
}
372

373
.responsive-video {
374
  /* Responsive video container */
375
  position: relative;
376
  padding-bottom: 56.25%; /* 16:9 aspect ratio */
377
  padding-top: 30px;
378
  height: 0;
379
  overflow: hidden;
380
}
381

382
.responsive-video iframe,
383
.responsive-video object,
384
.responsive-video embed {
385
  /* Responsive video content */
386
  position: absolute;
387
  top: 0;
388
  left: 0;
389
  width: 100%;
390
  height: 100%;
391
}
392

393
.video-container {
394
  /* Video wrapper */
395
  position: relative;
396
  padding-bottom: 56.25%;
397
  height: 0;
398
  overflow: hidden;
399
}
400

401
.video-container iframe,
402
.video-container object,
403
.video-container embed {
404
  /* Video content */
405
  position: absolute;
406
  top: 0;
407
  left: 0;
408
  width: 100%;
409
  height: 100%;
410
}
411
```
412

413
**Usage Examples:**
414

415
```html
416
<!-- Responsive image -->
417
<img class="responsive-img" src="images/sample-1.jpg">
418

419
<!-- Responsive video -->
420
<div class="video-container">
421
  <iframe width="853" height="480" src="//www.youtube.com/embed/Q8TXgCzxEnw?rel=0" frameborder="0" allowfullscreen></iframe>
422
</div>
423

424
<!-- Responsive embedded content -->
425
<div class="responsive-video">
426
  <iframe src="https://player.vimeo.com/video/22439234" frameborder="0"></iframe>
427
</div>
428
```
429

430
### Media Queries and Breakpoints
431

432
```css { .api }
433
/* Media query mixins for responsive design */
434
@media only screen and (max-width: 600px) {
435
  /* Small screens */
436
  .hide-on-small-only { display: none !important; }
437
}
438

439
@media only screen and (max-width: 992px) {
440
  /* Medium and small screens */
441
  .hide-on-med-and-down { display: none !important; }
442
}
443

444
@media only screen and (min-width: 601px) {
445
  /* Medium and large screens */
446
  .hide-on-med-and-up { display: none !important; }
447
}
448

449
@media only screen and (min-width: 600px) and (max-width: 992px) {
450
  /* Medium screens only */
451
  .hide-on-med-only { display: none !important; }
452
}
453

454
@media only screen and (min-width: 993px) {
455
  /* Large screens only */
456
  .hide-on-large-only { display: none !important; }
457
}
458
```
459

460
## Advanced Media Patterns
461

462
### Image Gallery with Lightbox
463

464
```html
465
<!-- Gallery grid -->
466
<div class="row">
467
  <div class="col s12 m6 l4">
468
    <img class="materialboxed responsive-img" 
469
         data-caption="Gallery Image 1" 
470
         src="images/gallery1.jpg">
471
  </div>
472
  <div class="col s12 m6 l4">
473
    <img class="materialboxed responsive-img" 
474
         data-caption="Gallery Image 2" 
475
         src="images/gallery2.jpg">
476
  </div>
477
  <div class="col s12 m6 l4">
478
    <img class="materialboxed responsive-img" 
479
         data-caption="Gallery Image 3" 
480
         src="images/gallery3.jpg">
481
  </div>
482
</div>
483
```
484

485
### Hero Section with Parallax
486

487
```html
488
<!-- Hero parallax section -->
489
<div id="index-banner" class="parallax-container">
490
  <div class="section no-pad-bot">
491
    <div class="container">
492
      <br><br>
493
      <h1 class="header center teal-text text-lighten-2">Materialize</h1>
494
      <div class="row center">
495
        <h5 class="header col s12 light">A modern responsive front-end framework</h5>
496
      </div>
497
      <div class="row center">
498
        <a href="#" class="btn-large waves-effect waves-light teal lighten-1">Get Started</a>
499
      </div>
500
      <br><br>
501
    </div>
502
  </div>
503
  <div class="parallax"><img src="images/background1.jpg" alt="Unsplashed background img 1"></div>
504
</div>
505
```
506

507
### Carousel with Custom Navigation
508

509
```html
510
<!-- Carousel with external controls -->
511
<div class="carousel-wrapper">
512
  <div class="carousel" id="custom-carousel">
513
    <a class="carousel-item" href="#!"><img src="images/sample-1.jpg"></a>
514
    <a class="carousel-item" href="#!"><img src="images/sample-2.jpg"></a>
515
    <a class="carousel-item" href="#!"><img src="images/sample-3.jpg"></a>
516
  </div>
517
  
518
  <!-- Custom navigation -->
519
  <div class="carousel-nav center">
520
    <a class="btn-floating btn-small waves-effect waves-light" onclick="prevCarousel()">
521
      <i class="material-icons">keyboard_arrow_left</i>
522
    </a>
523
    <a class="btn-floating btn-small waves-effect waves-light" onclick="nextCarousel()">
524
      <i class="material-icons">keyboard_arrow_right</i>
525
    </a>
526
  </div>
527
</div>
528
```
529

530
```javascript
531
// Custom carousel navigation
532
function nextCarousel() {
533
  const instance = M.Carousel.getInstance(document.getElementById('custom-carousel'));
534
  instance.next();
535
}
536

537
function prevCarousel() {
538
  const instance = M.Carousel.getInstance(document.getElementById('custom-carousel'));
539
  instance.prev();
540
}
541
```
542

543
### Lazy Loading Images
544

545
```javascript
546
// Lazy loading implementation
547
function lazyLoadImages() {
548
  const images = document.querySelectorAll('img[data-src]');
549
  const imageObserver = new IntersectionObserver((entries, observer) => {
550
    entries.forEach(entry => {
551
      if (entry.isIntersecting) {
552
        const img = entry.target;
553
        img.src = img.dataset.src;
554
        img.classList.remove('lazy');
555
        imageObserver.unobserve(img);
556
      }
557
    });
558
  });
559

560
  images.forEach(img => imageObserver.observe(img));
561
}
562

563
// Initialize lazy loading
564
document.addEventListener('DOMContentLoaded', lazyLoadImages);
565
```
566

567
```html
568
<!-- Lazy loaded images -->
569
<img class="responsive-img lazy" data-src="images/sample-1.jpg" alt="Sample Image">
570
<img class="responsive-img lazy" data-src="images/sample-2.jpg" alt="Sample Image">
571
```
572

573
## Common Media Component Patterns
574

575
### Initialization
576

577
```javascript
578
// Initialize all media components
579
document.addEventListener('DOMContentLoaded', function() {
580
  // Initialize materialbox
581
  M.Materialbox.init(document.querySelectorAll('.materialboxed'));
582
  
583
  // Initialize carousels
584
  M.Carousel.init(document.querySelectorAll('.carousel'), {
585
    fullWidth: true,
586
    indicators: true
587
  });
588
  
589
  // Initialize sliders
590
  M.Slider.init(document.querySelectorAll('.slider'));
591
  
592
  // Initialize parallax
593
  M.Parallax.init(document.querySelectorAll('.parallax'));
594
});
595
```
596

597
### Responsive Behavior
598

599
```javascript
600
// Handle responsive changes
601
window.addEventListener('resize', function() {
602
  // Reinitialize components that need recalculation
603
  const carousels = document.querySelectorAll('.carousel');
604
  carousels.forEach(carousel => {
605
    const instance = M.Carousel.getInstance(carousel);
606
    if (instance) {
607
      instance.destroy();
608
      M.Carousel.init(carousel);
609
    }
610
  });
611
});
612
```
613

614
### Dynamic Content
615

616
```javascript
617
// Add new media content dynamically
618
function addCarouselItem(imageSrc, caption) {
619
  const carousel = document.querySelector('.carousel');
620
  const newItem = document.createElement('a');
621
  newItem.className = 'carousel-item';
622
  newItem.href = '#!';
623
  
624
  const img = document.createElement('img');
625
  img.src = imageSrc;
626
  img.alt = caption;
627
  
628
  newItem.appendChild(img);
629
  carousel.appendChild(newItem);
630
  
631
  // Reinitialize carousel
632
  const instance = M.Carousel.getInstance(carousel);
633
  instance.destroy();
634
  M.Carousel.init(carousel);
635
}
636
```