1. 首頁
  2. 問答
  3. 照片庫縮略圖調整大小

照片庫縮略圖調整大小

2014-01-23 186 views
0

我有一個照片庫，包含8個不同的部分和8個鏈接。點擊時的每個鏈接都會顯示一個圖庫並隱藏使用JavaScript顯示的任何內容。然而，因爲我點擊任何非默認的圖庫，所以我實現了這個隱藏/顯示腳本，縮略圖被切成兩半。任何想法爲什麼會發生？照片庫縮略圖調整大小

這裏是一個畫廊的鏈接：http://www.searchtransparency.net/stackoverflow/photo-gallery-test.html

感謝。

顯示/隱藏代碼：

<script> 
    var gal=jQuery; 
    gal.noConflict(); 
    gal(document).ready(
     function(){ 
      gal("#lobby").PikaChoose({carousel:true}); 
      gal("#apartment-interiors").PikaChoose({carousel:true}); 
      gal("#penthouse").PikaChoose({carousel:true}); 
      gal("#roofdeck").PikaChoose({carousel:true}); 
      gal("#health-club").PikaChoose({carousel:true}); 
      gal("#garage").PikaChoose({carousel:true}); 
      gal("#galleria").PikaChoose({carousel:true}); 
      gal("#the-views").PikaChoose({carousel:true}); 
     }); 
</script> 
<script> 
function lobby() 
{ 
    document.getElementById('gallery-lobby').style.display = 'block'; 
    document.getElementById('gallery-apartment-interiors').style.display = 'none'; 
    document.getElementById('gallery-penthouse').style.display = 'none'; 
    document.getElementById('gallery-roofdeck').style.display = 'none'; 
    document.getElementById('gallery-health-club').style.display = 'none'; 
    document.getElementById('gallery-garage').style.display = 'none'; 
    document.getElementById('gallery-galleria').style.display = 'none'; 
    document.getElementById('gallery-the-views').style.display = 'none'; 
} 
function apartmentinteriors() 
{ 
    document.getElementById('gallery-lobby').style.display = 'none'; 
    document.getElementById('gallery-apartment-interiors').style.display = 'block'; 
    document.getElementById('gallery-penthouse').style.display = 'none'; 
    document.getElementById('gallery-roofdeck').style.display = 'none'; 
    document.getElementById('gallery-health-club').style.display = 'none'; 
    document.getElementById('gallery-garage').style.display = 'none'; 
    document.getElementById('gallery-galleria').style.display = 'none'; 
    document.getElementById('gallery-the-views').style.display = 'none'; 
} 
function penthouse() 
{ 
    document.getElementById('gallery-lobby').style.display = 'none'; 
    document.getElementById('gallery-apartment-interiors').style.display = 'none'; 
    document.getElementById('gallery-penthouse').style.display = 'block'; 
    document.getElementById('gallery-roofdeck').style.display = 'none'; 
    document.getElementById('gallery-health-club').style.display = 'none'; 
    document.getElementById('gallery-garage').style.display = 'none'; 
    document.getElementById('gallery-galleria').style.display = 'none'; 
    document.getElementById('gallery-the-views').style.display = 'none'; 
} 
function roofdeck() 
{ 
    document.getElementById('gallery-lobby').style.display = 'none'; 
    document.getElementById('gallery-apartment-interiors').style.display = 'none'; 
    document.getElementById('gallery-penthouse').style.display = 'none'; 
    document.getElementById('gallery-roofdeck').style.display = 'block'; 
    document.getElementById('gallery-health-club').style.display = 'none'; 
    document.getElementById('gallery-garage').style.display = 'none'; 
    document.getElementById('gallery-galleria').style.display = 'none'; 
    document.getElementById('gallery-the-views').style.display = 'none'; 
} 
function healthclub() 
{ 
    document.getElementById('gallery-lobby').style.display = 'none'; 
    document.getElementById('gallery-apartment-interiors').style.display = 'none'; 
    document.getElementById('gallery-penthouse').style.display = 'none'; 
    document.getElementById('gallery-roofdeck').style.display = 'none'; 
    document.getElementById('gallery-health-club').style.display = 'block'; 
    document.getElementById('gallery-garage').style.display = 'none'; 
    document.getElementById('gallery-galleria').style.display = 'none'; 
    document.getElementById('gallery-the-views').style.display = 'none'; 
} 
function garage() 
{ 
    document.getElementById('gallery-lobby').style.display = 'none'; 
    document.getElementById('gallery-apartment-interiors').style.display = 'none'; 
    document.getElementById('gallery-penthouse').style.display = 'none'; 
    document.getElementById('gallery-roofdeck').style.display = 'none'; 
    document.getElementById('gallery-health-club').style.display = 'none'; 
    document.getElementById('gallery-garage').style.display = 'block'; 
    document.getElementById('gallery-galleria').style.display = 'none'; 
    document.getElementById('gallery-the-views').style.display = 'none'; 
} 
function galleria() 
{ 
    document.getElementById('gallery-lobby').style.display = 'none'; 
    document.getElementById('gallery-apartment-interiors').style.display = 'none'; 
    document.getElementById('gallery-penthouse').style.display = 'none'; 
    document.getElementById('gallery-roofdeck').style.display = 'none'; 
    document.getElementById('gallery-health-club').style.display = 'none'; 
    document.getElementById('gallery-garage').style.display = 'none'; 
    document.getElementById('gallery-galleria').style.display = 'block'; 
    document.getElementById('gallery-the-views').style.display = 'none'; 
} 
function theviews() 
{ 
    document.getElementById('gallery-lobby').style.display = 'none'; 
    document.getElementById('gallery-apartment-interiors').style.display = 'none'; 
    document.getElementById('gallery-penthouse').style.display = 'none'; 
    document.getElementById('gallery-roofdeck').style.display = 'none'; 
    document.getElementById('gallery-health-club').style.display = 'none'; 
    document.getElementById('gallery-garage').style.display = 'none'; 
    document.getElementById('gallery-galleria').style.display = 'none'; 
    document.getElementById('gallery-the-views').style.display = 'block'; 
} 
</script>

畫廊代碼：

<div id="gallery-lobby"> 
       <ul id="lobby"> 
        <li><a href="#"><img src="images/gallery/lobby/1.jpg" width="1000" height="600" alt="Photo 1"></a></li> 
        <li><a href="#"><img src="images/gallery/lobby/2.jpg" width="1000" height="600" alt="Photo 2"></a></li> 
        <li><a href="#"><img src="images/gallery/lobby/3.jpg" width="1000" height="600" alt="Photo 3"></a></li> 
       </ul> 
      </div> 

      <div id="gallery-apartment-interiors" style="display:none;"> 
       <ul id="apartment-interiors"> 
        <li><a href="#"><img src="images/gallery/apartment-interiors/1.jpg" width="1000" height="600" alt="Photo 1"></a></li> 
        <li><a href="#"><img src="images/gallery/apartment-interiors/2.jpg" width="1000" height="600" alt="Photo 2"></a></li> 
        <li><a href="#"><img src="images/gallery/apartment-interiors/3.jpg" width="1000" height="600" alt="Photo 3"></a></li> 
        <li><a href="#"><img src="images/gallery/apartment-interiors/4.jpg" width="1000" height="600" alt="Photo 4"></a></li> 
        <li><a href="#"><img src="images/gallery/apartment-interiors/5.jpg" width="1000" height="600" alt="Photo 5"></a></li> 
       </ul> 
      </div> 

      <div id="gallery-penthouse" style="display:none;"> 
       <ul id="penthouse"> 
        <li><a href="#"><img src="images/gallery/penthouse/1.jpg" width="1000" height="600" alt="Photo 1"></a></li> 
        <li><a href="#"><img src="images/gallery/penthouse/2.jpg" width="1000" height="600" alt="Photo 2"></a></li> 
        <li><a href="#"><img src="images/gallery/penthouse/3.jpg" width="1000" height="600" alt="Photo 3"></a></li> 
       </ul> 
      </div> 

      <div id="gallery-roofdeck" style="display:none;"> 
       <ul id="roofdeck"> 
        <li><a href="#"><img src="images/gallery/roofdeck/1.jpg" width="1000" height="600" alt="Photo 1"></a></li> 
        <li><a href="#"><img src="images/gallery/roofdeck/2.jpg" width="1000" height="600" alt="Photo 2"></a></li> 
        <li><a href="#"><img src="images/gallery/roofdeck/3.jpg" width="1000" height="600" alt="Photo 3"></a></li> 
        <li><a href="#"><img src="images/gallery/roofdeck/4.jpg" width="1000" height="600" alt="Photo 4"></a></li> 
        <li><a href="#"><img src="images/gallery/roofdeck/5.jpg" width="1000" height="600" alt="Photo 5"></a></li> 
        <li><a href="#"><img src="images/gallery/roofdeck/6.jpg" width="1000" height="600" alt="Photo 6"></a></li> 
        <li><a href="#"><img src="images/gallery/roofdeck/7.jpg" width="1000" height="600" alt="Photo 7"></a></li> 
       </ul> 
      </div> 

      <div id="gallery-health-club" style="display:none;"> 
       <ul id="health-club"> 
        <li><a href="#"><img src="images/gallery/health-club/1.jpg" width="1000" height="600" alt="Photo 1"></a></li> 
        <li><a href="#"><img src="images/gallery/health-club/2.jpg" width="1000" height="600" alt="Photo 2"></a></li> 
       </ul> 
      </div> 

      <div id="gallery-garage" style="display:none;"> 
       <ul id="garage"> 
        <li><a href="#"><img src="images/gallery/garage/1.jpg" width="1000" height="600" alt="Photo 1"></a></li> 
        <li><a href="#"><img src="images/gallery/garage/2.jpg" width="1000" height="600" alt="Photo 2"></a></li> 
        <li><a href="#"><img src="images/gallery/garage/3.jpg" width="1000" height="600" alt="Photo 3"></a></li> 
        <li><a href="#"><img src="images/gallery/garage/4.jpg" width="1000" height="600" alt="Photo 4"></a></li> 
        <li><a href="#"><img src="images/gallery/garage/5.jpg" width="1000" height="600" alt="Photo 5"></a></li> 
       </ul> 
      </div> 

      <div id="gallery-galleria" style="display:none;"> 
       <ul id="galleria"> 
        <li><a href="#"><img src="images/gallery/galleria/1.jpg" width="1000" height="600" alt="Photo 1"></a></li> 
        <li><a href="#"><img src="images/gallery/galleria/2.jpg" width="1000" height="600" alt="Photo 2"></a></li> 
        <li><a href="#"><img src="images/gallery/galleria/3.jpg" width="1000" height="600" alt="Photo 3"></a></li> 
       </ul> 
      </div> 

      <div id="gallery-the-views" style="display:none;"> 
       <ul id="the-views"> 
        <li><a href="#"><img src="images/gallery/the-views/1.jpg" width="1000" height="600" alt="Photo 1"></a></li> 
        <li><a href="#"><img src="images/gallery/the-views/2.jpg" width="1000" height="600" alt="Photo 2"></a></li> 
        <li><a href="#"><img src="images/gallery/the-views/3.jpg" width="1000" height="600" alt="Photo 3"></a></li> 
        <li><a href="#"><img src="images/gallery/the-views/4.jpg" width="1000" height="600" alt="Photo 4"></a></li> 
        <li><a href="#"><img src="images/gallery/the-views/5.jpg" width="1000" height="600" alt="Photo 5"></a></li> 
        <li><a href="#"><img src="images/gallery/the-views/6.jpg" width="1000" height="600" alt="Photo 6"></a></li> 
       </ul> 
      </div> 

      <br> 

      <p align="center"><a onClick="lobby()" href="#">Lobby</a>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<a onClick="apartmentinteriors()" href="#">Apartment Interiors</a>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<a onClick="penthouse()" href="#">Penthouse</a>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<a onClick="roofdeck()" href="#">Roofdeck</a>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<a onClick="healthclub()" href="#">Health Club</a>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<a onClick="garage()" href="#">Garage</a>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<a onClick="galleria()" href="#">Galleria</a>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<a onClick="theviews()" href="#">The Views</a></p>

來源

2014-01-23 Wolf Cat

回答

0

這裏是我的解決方案：

  1. 我改變風格= 「顯示：無;」在每個div上style =「height：0px; overflow：hidden;」
  2. 然後，我改變了JavaScript的

從這：

function lobby() 
{ 
    document.getElementById('gallery-lobby').style.display = 'block'; 
    document.getElementById('gallery-apartment-interiors').style.display = 'none'; 
    document.getElementById('gallery-penthouse').style.display = 'none'; 
    document.getElementById('gallery-roofdeck').style.display = 'none'; 
    document.getElementById('gallery-health-club').style.display = 'none'; 
    document.getElementById('gallery-garage').style.display = 'none'; 
    document.getElementById('gallery-galleria').style.display = 'none'; 
    document.getElementById('gallery-the-views').style.display = 'none'; 
}

要這樣：

function lobby() 
{ 
    document.getElementById('gallery-lobby').style.height = 'auto'; 
    document.getElementById('gallery-apartment-interiors').style.height = '0px'; 
    document.getElementById('gallery-penthouse').style.height = '0px'; 
    document.getElementById('gallery-roofdeck').style.height = '0px'; 
    document.getElementById('gallery-health-club').style.height = '0px'; 
    document.getElementById('gallery-garage').style.height = '0px'; 
    document.getElementById('gallery-galleria').style.height = '0px'; 
    document.getElementById('gallery-the-views').style.height = '0px'; 
}

這解決了縮略圖的問題得到推83px左側。

來源

2014-01-23 21:35:12

0

它看起來像你使用是把一個左側定位你的-83px的 「縮略圖」 任何CSS。嘗試刪除該CSS條目。此外，它看起來像你使用1000×600像素的圖像，我不知道這是否只是暫時的，但可能不是長期最好的想法。

或者試試：

.clip img{ 
    left: 0px; 
}

來源

2014-01-23 00:48:38 badAdviceGuy

+0

試過這個沒有成功。當我刪除style =「display：none;」時在包含div的縮略圖是完美的。爲什麼1000像素×600像素的照片是一個壞主意？ –

+0

@WolfCat你有每個圖像的內聯風格的左：-83px;'嘗試從一些縮略圖中刪除它，它應該解決你的問題。 通常的做法是儘可能優化網站。您的縮略圖是全尺寸的圖像，在您的內聯樣式中被人爲縮小。因此，他們需要更長的時間才能加載和消耗更多的帶寬，而不是較小的優化圖像。 – badAdviceGuy

+0

我甚至沒有看到左側：-83px;寫在代碼中。它似乎是自動生成的。所以我不知道如何改變它 –

相關問題

 相關問題