Question

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

文档为我们提供了此选项 http://brutaldesign.github.io/swipebox/#advanced

但我不希望refs图像在脚本中，因为它们需要在CMS等中无限制/可编辑

有什么想法吗？

干杯 .ben。

Answer 1

不确定它是否有帮助，因为它不是完美的解决方案：创建包含第一个缩略图或图像的div。在第一张图片下方列出属于图库的所有图片。通过css属性为此div分配隐藏溢出：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

Answer 2

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

我使用一个名为“hide”的类，并将其应用于我不想看到的所有缩略图。（利用Bootstrap 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用于标题图库，链接和图像，同时使用rel属性将所有图像保存到同一个图库。

正如您所看到的，我是正确格式化的坚持者。

你也可以成为一个完整的HTML恶魔，只放置一个锚点，而不是一个缩略图。 JSFiddle

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

你可以在第一个锚点之间粘贴任何东西，只要它正确贯穿，它就会打开画廊。 JSFiddle

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

UPDATE ：这就是改变后的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指向“各种”并且类坚持“swipebox”就会加载该画廊。虽然第一张图片只不过是加载gif，因为href是“＃”。

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

从单个链接加载SwipeBox库

2 个答案: