Как генерировать автоматические перьвю исходя из кода?

Question

[Павел Воронюк]

Пробую в использовании Framework7.

Есть задача, сделать галерею. В самом фреймворке есть такая штука как PhotoBrowser.
www.idangero.us/framework7/docs/photo-browser.html

Но фото открываются при нажатии на кнопку, и потом листаются.

Я хочу сделать, чтоб при переходе в соответствующее окно, были видны сразу перьвюшки, при нажатии на которые открывалось popup окно, и в зависимости от выбраной первю, фото листались назад или вперед.

<div class="content-block">
<a href="#" class="button ks-pb-popup"><img src="img/photo-1.jpg" alt="img"/></a>
</div>

var photoBrowserPhotos = [
	{
		url: 'img/photo-1.jpg',
		caption: 'Forest'
	},
	{
		url: 'img/photo-2.jpg',
		caption: 'DarkForest'
	},
	{
		url: 'img/photo-3.jpg',
		caption: 'Smooth'
	},
	{
		url: 'img/photo-4.jpg',
		caption: 'sun'
	},
	{
		url: 'img/photo-5.jpg',
		caption: 'road'
	}

];

var photoBrowserPopup = myApp.photoBrowser({
    photos: photoBrowserPhotos,
    type: 'popup'
});
myApp.onPageInit('photos', function (page) {
    $$('.ks-pb-popup').on('click', function () {
        photoBrowserPopup.open();
    });
});

Думал сделать что то типа этого

<div class="content-block">
				<a href="#" class="u_img ks-pb-popup"><img src="img/photo-1.jpg" alt="img"/></a>
				<a href="#" class="u_img ks-pb-popup"><img src="img/photo-2.jpg" alt="img"/></a>
				<a href="#" class="u_img ks-pb-popup"><img src="img/photo-3.jpg" alt="img"/></a>
			</div>
		</div>

Но при нажатии на любую перьвю, открывается первое фото и потом листается дальше.

Подскажите как сделать чтоб при нажатии например на 3 фото, окрывалось 3 фото, и листалось (влево 2, вправо 4) и т.д.

Answer 1

[Алексей Зуев]

myPhotoBrowser.open(index);
Open Photo Browser on photo with index number equal to "index" parameter. If "index" parameter is not specified, it will be opened on last closed photo.

Там же всё просто, вам нужно передать индекс кликнутой фотки

myApp.onPageInit('photos', function (page) {
    var $$thumbs = $$('.ks-pb-popup');
    $$thumbs.on('click', function () {
        var index = $$thumbs.indexOf(this);
        photoBrowserPopup.open(index);
    });
});

Для динамической генерации превью

myApp.onPageInit('photos', function (page) {
    var $$wrapper = $$(page.container).find('.content-block');
    
    photoBrowserPhotos.forEach(function(photo) {
        $$wrapper.append(
            '<a href="#" class="u_img ks-pb-popup">' +
                '<img src="' + photo.url + '" alt="img"/>' +
            '</a>');
    })

    var $$thumbs = $$('.ks-pb-popup');
    $$thumbs.on('click', function () {
        var index = $$thumbs.indexOf(this);
        photoBrowserPopup.open(index);
    });
});

А на странице photos пустой <div class="content-block"></div>

Comments

[Павел Воронюк]

Спасибо работает. А как сделать чтоб первю автоматически создавались? Потому что сейчас я сам прописываю их в html.

[Павел Воронюк]

шикарно! Огромное спасибо)

[Павел Воронюк]

Алексей Зуев: Посмотрите пожалуйста вашу почту) я там написал еще один вопрос) спасибо