我试图在我的页面上制作简单的图库。当打开网页的图库部分时,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 id="galleria" style="height:500px;">
中用图片包装div,当我打开库部分时,插件会立即启动。
JS部分代码非常基础:
$(function() {
Galleria.loadTheme('galleria/themes/classic/galleria.classic.min.js');
Galleria.run('#galleria');
});
编辑:我找到了一个解决方案。根据PHP条件,首先我将href参数设置为href="?galerie&inGallery&index='.$i.'"
。galerie参数只是指打开同一个页面Im,index是while cycle中的行数(它与Galleria中的索引匹配),inGallery设置PHP条件。使用URL中的inGallery参数,带有图片的块现在被包裹在<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方法。从链接"显示指定为索引的图像。您可以随时调用此方法,图像将被放置在转换队列中。">