Question

我试图在我的页面上制作简单的图库。当网页的图库部分打开时，只有一些图片由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循环中的行号（它与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
        });

    });

Answer 1

您需要使用show method。从链接“显示指定为索引的图像。您可以随时调用此方法，图像将被放置在转换队列中。”

将jquery Galleria插件设置为在特定图像上打开

1 个答案: