照片库缩略图调整大小答案

【问题标题】：Photo Gallery Thumbnails Resizing照片库缩略图调整大小
【发布时间】：2014-02-13 08:14:11
【问题描述】：

我有一个图片库，其中包含 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>

【问题讨论】：

标签： javascript jquery html css

【解决方案1】：

看起来您使用的任何 CSS 都在 -83 像素的“缩略图”上放置了左侧定位。尝试删除该 CSS 条目。此外，您似乎正在使用 1000 x 600 像素的图像，我不知道这是否只是暂时的，但从长远来看可能不是最好的主意。

或者试试：

.clip img{
  left: 0px;
}

【讨论】：

试过这个没有成功。当我删除 style="display:none;"在包含的 div 上，缩略图是完美的。为什么 1000 x 600 像素的照片是个坏主意？
@WolfCat 你的每张图片都具有left: -83px; 的内联样式，尝试从一些缩略图中删除它，它应该可以解决你的问题。通常的做法是尽可能优化网站。您的缩略图是全尺寸图像，在您的内联样式中被人为缩小。因此，与较小的优化图像相比，它们需要更长的时间来加载和消耗更多的带宽。
我什至看不到左边的位置：-83px;是写在代码里的。它似乎是自动生成的。所以我不知道如何改变它

【解决方案2】：

这是我的解决方案：

我改变了 style="display:none;"在每个 div 上设置 style="height:0px;overflow:hidden;"
然后我更改了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 的问题。

【讨论】：