從單個鏈接加載SwipeBox庫

我使用的是Swipebox，它可以很好地從大拇指加載庫或從單個鏈接加載視頻，但是如何從單個鏈接加載庫。從單個鏈接加載SwipeBox庫

的文件給我們這個選項 http://brutaldesign.github.io/swipebox/#advanced

，但我不希望裁判到的圖像是在腳本中，因爲他們需要是無限/編輯在CMS等

任何想法？

Cheers .ben。

2013-10-16 topiman

不確定它是否有幫助，因爲它不是完美的解決方案：創建保存第一個縮略圖或圖像的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

來源

2013-12-04 10:54:33 user2024679

我做的是我隱藏所有，但一個縮略圖使用CSS，當然還有保持數據的屬性「相對」橫跨在所有圖像相同畫廊。

我使用了一個名爲「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; 
}

水珠通過在文件夾中設定的圖像使用$ DIR用於循環，而$ F1標誌被用於將.hide類適用於所有但第一圖像，和$ f2是一個標誌，該標誌將.preload類設置爲僅第一個圖像。

$ alt被用來標記圖庫，鏈接和圖像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 /畫廊/各種/」和「不同」：

<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-21 08:02:44 SeRosiS

從單個鏈接加載SwipeBox庫

回答

相關問題