Vegas Laravel Package

Getting Started

Minimal Setup

1. Installation Add the package via npm (if using Laravel Mix/Webpack) or include via CDN:

   npm install jquery-vegas
   

   Or via CDN in a Blade template:

   <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vegas.min.js"></script>
   

2. Basic Initialization Include jQuery/Zepto and Vegas in your layout:

   <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
   <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vegas.min.js"></script>
   

3. First Use Case: Static Background Apply a static background to a DOM element:

   $(document).ready(function() {
       $('#hero-section').vegas({
           slides: [
               { src: '/images/background1.jpg' }
           ]
       });
   });
   

   <div id="hero-section" style="width: 100%; height: 500px;"></div>
   

Implementation Patterns

Common Workflows

1. Slideshow Integration Rotate images with transitions:

   $('#slideshow').vegas({
       slides: [
           { src: '/images/slide1.jpg', fade: 1000 },
           { src: '/images/slide2.jpg', fade: 1000 }
       ],
       delay: 5000
   });
   

2. Dynamic Content Loading Fetch slides via AJAX (e.g., from a Laravel API):

   $.get('/api/slides', function(data) {
       $('#gallery').vegas({
           slides: data.map(slide => ({ src: slide.path }))
       });
   });
   

3. Responsive Design Use CSS to ensure Vegas adapts to viewport changes:

   .vegas-container {
       width: 100%;
       height: 100vh;
   }
   

4. Laravel Blade Integration Pass slides from a controller:

   // routes/web.php
   Route::get('/slideshow', [SlideController::class, 'show']);
   

   // SlideController.php
   public function show() {
       $slides = Slide::all()->map(fn($slide) => ['src' => $slide->path]);
       return view('slideshow', compact('slides'));
   }
   

   <!-- slideshow.blade.php -->
   <script>
       $(document).ready(function() {
           $('#slideshow').vegas({ slides: @json($slides->toArray()) });
       });
   </script>
   

5. Event Handling Trigger actions on slide changes:

   $('#slideshow').vegas({
       slides: [...],
       transition: 'fade',
       onSlide: function() {
           console.log('Slide changed!');
       }
   });
   

Gotchas and Tips

Pitfalls

1. jQuery Dependency Vegas requires jQuery/Zepto. Ensure it’s loaded before Vegas:

   <!-- WRONG: Vegas before jQuery -->
   <script src="vegas.js"></script>
   <script src="jquery.js"></script>
   

2. Image Paths Use absolute paths (e.g., /images/slide.jpg) or Laravel’s asset() helper:

   slides: [{ src: "{{ asset('images/slide.jpg') }}" }]
   

3. Z-Index Conflicts Vegas overlays content. Explicitly set z-index for parent containers:

   .vegas-container {
       position: relative;
       z-index: 1;
   }
   

4. Mobile Performance Large images may lag on mobile. Optimize with srcset or lazy-loading:

   slides: [{ src: '/images/slide.jpg', data: { srcset: '/images/slide-webp.webp 1x' } }]
   

Debugging Tips

• Console Errors: Check for vegas is not a function (missing jQuery).
• Slide Not Loading: Verify image paths with browser dev tools (Network tab).
• Transition Glitches: Use transition: 'crossfade' for smoother effects.

Extension Points

1. Custom Transitions Extend Vegas with custom animations via the transition option:

   $.vegas.transition('myTransition', function($slide, $nextSlide, complete) {
       // Custom animation logic
       complete();
   });
   

2. Laravel Service Provider Register Vegas globally for Blade directives (advanced):

   // AppServiceProvider.php
   View::composer('*', function($view) {
       $view->with('vegasScripts', '<script src="/js/vegas.js"></script>');
   });
   

3. Server-Side Slides Generate slides dynamically in Laravel (e.g., from a database):

   $slides = Slide::where('active', 1)->get()->map(fn($slide) => [
       'src' => $slide->path,
       'data' => ['caption' => $slide->title]
   ]);