Смешайте PHP и Javascript в Laravel

Question

Смешайте PHP и Javascript в Laravel

Я использую PhotoSwipe в своем проекте для отображения фотографий в крутой прогрессивной форме.

Я хочу перебрать отношения между аранжировками и изображениями.
Я могу распечатать с console.log () количество изображений. Оно работает.

1 вопрос:
Я хочу динамически получать количество изображений и отображать их в items: КАК?

2 Вопрос: Как я могу получить размеры фотографии динамически, такие как ширина и высота? Я предполагаю, что может быть какой-то метод, как getOriginalHight() После этого я хочу присвоить значение w: а также 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();
}

1

javascript laravel photoswipe php

Решение

Другие решения

Я решил это после многих попыток

0

Источник

Accepted Answer

Чтобы ответить на вопрос 1:

Используйте JQuery для этого. Предполагая, что у вас есть несколько изображений в вашем документе .php, используйте функцию $ .each () JQuery, чтобы зациклить изображения и построить items массив. Так это будет выглядеть примерно так:

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);
});

Здесь я установил ширину / высоту каждого элемента изображения в JS, используя imageSize вар, но вы можете использовать width="" а также height="" атрибуты изображений, а также, если вы определите их в шаблоне.

Это помогает?

1