Я пытаюсь сделать простую галерею на своей странице. Когда открывается раздел галереи в Интернете, есть просто некоторые изображения, отображаемые тэгами src и href:
echo '<div style="float:left; margin:5px;">
<a href="'.$link.'"><img src="'.$mini.'" title="clickclack.cz" alt="clickclack.cz" style="height:171px; border:2px solid black;" /></a>
</div>';
Теперь - когда я нажимаю на некоторые из этих изображений, я просто не хочу показывать полноразмерное изображение на белом фоне. Я хочу открыть его в плагине Galleria и иметь возможность прокрутки к другим изображениям на этой странице. Я не могу понять, как это сделать. Если я завержу div с картинками в <div id="galleria" style="height:500px;">
, плагин начнется сразу же после открытия раздела галереи.
JS часть кода очень проста:
$(function() {
Galleria.loadTheme('galleria/themes/classic/galleria.classic.min.js');
Galleria.run('#galleria');
});
EDIT: Я нашел решение. По условиям PHP сначала устанавливаю параметр href в href="?galerie&inGallery&index='.$i.'"
. Параметр galerie просто означает открыть ту же страницу Im on, index - это номер строки в цикле (он соответствует индексу в Galleria), а inGallery устанавливает условие PHP. С параметром inGallery в URL-адресе блок с картинками теперь завернут в <div id="galleria">
а параметр href является фактической ссылкой на изображение. Итак, теперь галерея галереи открывается в Galleria. Чтобы открыть Galleria на клике, я добавил функцию JS. Моя часть JS (которая также завернута в условие if(isset($_GET['inGallery']))
) теперь выглядит так (плюс я добавил ссылку с id = "fullscreen" для переключения полноэкранного режима):
function GetURLParameter(sParam){
var sPageURL = window.location.search.substring(1);
var sURLVariables = sPageURL.split('&');
for (var i = 0; i < sURLVariables.length; i++){
var sParameterName = sURLVariables[i].split('=');
if (sParameterName[0] == sParam){
return sParameterName[1];
}
}
}
$(function() {
var index = GetURLParameter('index');
Galleria.loadTheme('galleria/themes/classic/galleria.classic.min.js');
Galleria.run('#galleria', { show: index });
$('#fullscreen').click(function() {
$('#galleria').data('galleria').toggleFullscreen(); // toggles the fullscreen
});
});
Вам нужно использовать метод show. Из ссылки "Показывает изображение, указанное как индекс. Вы можете вызвать этот метод в любое время, и изображение будет помещено в очередь перехода".
$(function() { Galleria.loadTheme('galleria/themes/classic/galleria.classic.min.js'); Galleria.run('#galleria'); });