1

我正在使用 Swipebox，它适用于从拇指加载图库或从单个链接加载视频 - 但我如何从单个链接加载图库。

文档给了我们这个选项 http://brutaldesign.github.io/swipebox/#advanced

但我不希望图像的引用出现在脚本中，因为它们需要在 CMS 等中不受限制/可编辑

有任何想法吗？

干杯.ben。

4

2 回答 2

0

我所做的是使用 CSS 隐藏除一个缩略图之外的所有缩略图，当然，在图库中的所有图像中保持数据属性“rel”相同。

我使用了一个名为“hide”的类并将其应用于所有我不想被看到的缩略图。（使用引导程序 3.3.2）

.hide {
  display: none !important;
}

但是我不知道您首先是如何发布图像的。这对我来说更简单，因为我使用 PHP 从文件夹中提取图像并以特定顺序和容器自动放置它们。

让你了解我的意思；

function gal($dir,$alt){
    echo "\t\t\t\t\t",'<div class="col-md-3 col-sm-6 col-xs-9">',PHP_EOL,
         "\t\t\t\t\t\t",'<div class="well well-sm text-center">',PHP_EOL,
         "\t\t\t\t\t\t\t", '<h4>'.$alt.'</h4>',PHP_EOL;
    $images = glob($dir."*.{jpg,JPG}", GLOB_BRACE);
    $f1 = 0; $f2 = 1;
    foreach ($images as $img){
        echo "\t\t\t\t\t\t\t",'<a rel="'.$alt.'" class="swipebox'.($f2?' preload':'').($f1?' hide':'').'" href="'.$img.'" title="'.$alt.'">', PHP_EOL,
             "\t\t\t\t\t\t\t\t",'<img src="thumbs.php?src='.$img.'&w=192&h=128&a=t"'.($f2?' class="img-responsive img-thumb center-block"':'').' alt="'.$alt.'"></a>',PHP_EOL;
        $f1 = 1; $f2 = 0;
    }
    echo "\t\t\t\t\t\t",'</div>',PHP_EOL,"\t\t\t\t\t",'</div>',PHP_EOL;
}

Glob 用于循环浏览使用 $dir 设置的文件夹中的图像，而 $f1 标志用于将 .hide 类应用于除第一个图像之外的所有图像，$f2 是将 .preload 类设置为仅的标志第一个图像。

$alt 用于为图库、链接和图像 alt 命名，同时使用 rel 属性将所有图像保存在同一个图库中。

如您所见，我是正确格式的坚持者。

你也可以是一个彻头彻尾的 HTML 恶魔，只放一个锚点，只放一个缩略图。JSFiddle

编辑：从技术上讲，你甚至不需要缩略图，我知道我有点晚了，但它在我开车的时候突然出现在我的脑海里。

您几乎可以在第一个锚点之间粘贴任何东西，只要它正确执行，它就会打开画廊。JSFiddle

事实上，我将更改我网站上的 PHP 以反映这种精神上的突破。

更新：这是更改后的 PHP 的样子：

function galOne($dir,$alt){
    $galOne =   "\t\t\t\t\t".'<div class="col-md-3 col-sm-6 col-xs-9">'.PHP_EOL.
                "\t\t\t\t\t\t".'<div class="well well-sm text-center">'.PHP_EOL.
                "\t\t\t\t\t\t\t".'<h4>'.$alt.'</h4>'.PHP_EOL;
    $images = glob($dir."*.{jpg,JPG}", GLOB_BRACE);
    $flag1 = 0; $flag2 = 1;
    foreach ($images as $img){
        $galOne .=  "\t\t\t\t\t\t\t".'<a rel="'.$alt.'" class="swipebox'.($flag2? ' preload':'').'" href="'.$img.'" title="'.$alt.'">'.($flag1? '</a>':'').PHP_EOL.
                    ($flag2? "\t\t\t\t\t\t\t\t".'<img src="thumbs.php?src='.$img.'&w=192&h=128&a=t" class="img-responsive img-thumb center-block" alt="'.$alt.'">'.'</a>'.PHP_EOL.'':'');
                    $flag1 = 1; $flag2 = 0;
    }
    $galOne .=  "\t\t\t\t\t\t".'</div>'.PHP_EOL."\t\t\t\t\t".'</div>'.PHP_EOL;

    return ($galOne);
    unset ($galOne, $images, $img, $flag1, $flag2);
}

当输入“img/Gallery/various/”和“Various”时，这将像这样输出：

<div class="col-md-3 col-sm-6 col-xs-9">
    <div class="well well-sm text-center">
        <h4>Various</h4>
        <a rel="Various" class="swipebox preload" href="img/Gallery/various/DSC04675.JPG" title="Various">
            <img src="thumbs.php?src=img/Gallery/various/DSC04675.JPG&w=192&h=128&a=t" class="img-responsive img-thumb center-block" alt="Various"></a>
        <a rel="Various" class="swipebox" href="img/Gallery/various/DSC04712.JPG" title="Various"></a>
        <a rel="Various" class="swipebox" href="img/Gallery/various/IMG_0380.JPG" title="Various"></a>
        <a rel="Various" class="swipebox" href="img/Gallery/various/IMG_0382.JPG" title="Various"></a>
    </div>
</div>

事实上，我可以用 href 仅是“#”来锚定标题，只要 rel 指向“Various”并且类坚持“swipebox”，它就会加载那个画廊。虽然第一张图片只不过是加载 gif，因为 href 是“#”。

不要问我为什么要“取消”一切。这只是我从别人教我如何编码那里学到的一个怪癖。关于内存泄漏的事情，我什至不记得为什么。

于 2015-01-21T08:02:44.857 回答
0

不确定它是否有帮助，因为它不是完美的解决方案：创建包含第一个缩略图或图像的 div。在第一张图片下方列出了属于图库的所有图片。通过隐藏溢出的此 div 的 css 属性分配：div 大小与您的第一个图像高度和宽度匹配。正如我所说，这不是一个好的解决方案，但至少它有效。

html

<div class="hiddenoveflow">
<a rel="gallery-1" href="big/image1.jpg" class="swipebox">
    <img src="small/image1.jpg" alt="image">
</a>
<a rel="gallery-1" href="big/image2.jpg" class="swipebox">
    <img src="small/image2.jpg" alt="image">
</a>
</div>

css

.hiddenoverflow{height:100px;width:100px;overflow:hidden}/// match dimensions of your first small image
于 2013-12-04T10:54:33.103 回答