Mix PHP and Javascript in Laravel

You will probably also need something like http://php.net/manual/en/imagick.getimageorientation.php to properly rotate the image. There are packages that help with this also.

I have the library from http://image.intervention.io/ Thanks for the hint :)

Ajax is your answer. Use axios cause its better. And use vue instead of jquery.

there is a $app variable in your project that references vue.

you can either monkey with that or create a component.

like: Vue.component('photo-thing', require('./components/PhotoThing.vue'));

either way. in the create method just copy and paste all that code. but for items, use a method that gets them from the server via ajax. Try a dummy controller first that just returns the array of items and there height width etc. count them up when you get the response.

Note: items and count should be properties in your data object: data: { items: [], count: 0 }

if you are lost I'll code something up for you.

I am many steps further. I created the component and everything is okay so far.

I can't seem to import the source code from photoswipe.js. I got the package through npm it is already with the other packages within node_modules How can I import it?

I used to import them in the view like: <link href="{{ asset('css/photoswipe/default-skin/default-skin.css') }}" rel="stylesheet">

I would really appreciate it if you would code up something for me because I am not familiar with axios that much.

Thanks

<template>
    <div>
    <div class="pswp">whatever goes here</div>
    </div>
</template>
<script>

 export default {
     import PhotoSwipe from 'photoswipe'; //if that doesn't work we need to inspect node_modules. 
     created() {
     this.fetchImages();
     },
     data () {
     return {
         items: [],
         gallery: null
     };
     },
     methods: {
     fetchImages() {
         /**
        your controller could return somethnig like [image, image, image] where each image is an associative array with src, height, width
          */
         
         axios.get('/pathtocontroller')
          .then((response) => {
              response.data.forEach((image) => {
              let item = {src: image.src, height: image.height, width: image.width};
              this.items.push(item);
              this.gallery = new PhotoSwipe( pswpElement, PhotoSwipeUI_Default, items, options);
              this.gallery.init();
              })
          })
          .catch((error) {console.log(error.response.data)}
     },
     computed: {
         count () {
         return items.length;
         }
     }
              
     }
              
 };
</script>

or you could call axios directly in your function. by pass view.

 axios.get('/pathtocontroller')
          .then((response) => {
              response.data.forEach((image) => {
let items = [];
              let item = {src: image.src, height: image.height, width: image.width};
             items.push(item);
              gallery = new PhotoSwipe( pswpElement, PhotoSwipeUI_Default, items, options);
              gallery.init();
              })
          })
          .catch((error) {console.log(error.response.data)}