Mix PHP and Javascript in Laravel

Question

I am using the PhotoSwipe in my project to display Photos in a cool progressive way.

I want to iterate through a relationship between and arrangements and images. I can print out with console.log() the number of images. It works.

1 Question: I want to dynamically fetch the count of images and display them in items: HOW?

2 Question: How can I retrieve the dimensions of a photo dynamically, like the width and hight? I assume there might be some method like getOriginalHight() After that I want to assign the value to w: and h:

function showImages() {
    let pswpElement = document.querySelectorAll('.pswp')[0];

    // build items array
    for (i = 0; i < "{{count($arrangement->images)}}"; i++) {
        console.log(i);
    }
    let items = [
        {
            src: '/storage/arrangement_images/{{$arrangement->images[1]->file_name}}',
            w: 500,
            h: 281
        },
        {
            src: 'https://placekitten.com/1200/900',
            w: 1200,
            h: 900
        }
    ];

    // define options (if needed)
    let options = {
        // optionName: 'option value'
        // for example:
        index: 0 // start at first slide
    };

    // Initializes and opens PhotoSwipe
    let gallery = new PhotoSwipe( pswpElement, PhotoSwipeUI_Default, items, options);
    gallery.init();
}

I would make an ajax get request to get the `arrangement->images` in a javascript array for question 1. For question 2 from what I can see from the documentation you might need `size = linkEl.getAttribute('data-size').split('x');` — Lars Mertens, Oct 26 '17 at 15:39
Thanks for your answer. I will give it a try, though I am not sure whether I can make it or not. :) — Mike, Oct 26 '17 at 15:46
Of course you can but it might take some time though if you never worked with this kind of concepts before. — Lars Mertens, Oct 26 '17 at 15:50
Do not group questions like this, try making separate questions. — Camilo, Oct 26 '17 at 15:52

score 1 · Answer 1 · answered Oct 26 '17 at 16:21

1

To answer question 1:

Use JQuery to do this. Assuming you have multiple images in your .php document, use JQuery's $.each() function to loop over the images and build the items array. So it would look something like this:

var items = [],
    $img = $('.pswp');

$img.each(function() {
  var $this = $(this),
      imageSize = [1280, 980],
      obj = {
        src: $this.attr('src'),
        w: imageSize[0],
        h: imageSize[1]
      };

  items.push(obj);
});

Here I've set the width/height of each image item in JS using imageSize var but you can use the width="" and height="" attributes of the images as well if you define them in the template.

Does that help?

answered Oct 26 '17 at 16:21

Seb

121
6

Thanks, @Seb, unfortunately, it didn't work. I can't fetch the src of the obj from the database. – Mike Oct 26 '17 at 19:32
@Mike, Sorry, I assumed you were using php to get images from DB. Can I ask why you're wanting to do this dynamically? – Seb Oct 27 '17 at 10:05
I stored the width and height into the database. Now when I fetch the objects within Ajax request, I don't get them for a reason. – Mike Oct 27 '17 at 13:48
That is how I fetch them in the controller `$view = View::make('arrangements.show', compact('arrangement'))->render(); return response()->json(array($arrangement->images()->get()->all(), 200, $view));` – Mike Oct 27 '17 at 13:48
Can you show me an example of the html you are working with? Unless there's a particular reason why you want to create the slideshow dynamically, I'd suggest using php to fetch all the image file paths and store them inside a data attribute on an image element. Then construct the slides using the code I suggested above along with photoswipes lazyloading option? – Seb Nov 01 '17 at 09:57

Mix PHP and Javascript in Laravel

1 Answers1