Javascript 照片库缩略图大小调整
我有一个照片库,下面有8个不同的部分和8个链接。单击每个链接都会显示一个库,并隐藏使用javascript显示的库。但是,由于我在单击默认图库以外的任何图库时实现了这个隐藏/显示脚本,因此缩略图会被切成两半。你知道为什么会这样吗 以下是指向图库的链接: 谢谢 显示/隐藏代码:Javascript 照片库缩略图大小调整,javascript,jquery,html,css,Javascript,Jquery,Html,Css,我有一个照片库,下面有8个不同的部分和8个链接。单击每个链接都会显示一个库,并隐藏使用javascript显示的库。但是,由于我在单击默认图库以外的任何图库时实现了这个隐藏/显示脚本,因此缩略图会被切成两半。你知道为什么会这样吗 以下是指向图库的链接: 谢谢 显示/隐藏代码: <script> var gal=jQuery; gal.noConflict(); gal(document).ready( function (){
<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>
var-gal=jQuery;
gal.noConflict();
gal(文件)。准备好了吗(
函数(){
gal(“大厅”).PikaChoose({carousel:true});
gal(“公寓内部”).PikaChoose({carousel:true});
gal(“顶层公寓”).PikaChoose({carousel:true});
gal(“屋顶甲板”).PikaChoose({carousel:true});
gal(“健康俱乐部”).PikaChoose({carousel:true});
gal(“车库”).PikaChoose({carousel:true});
gal(“galleria”).PikaChoose({carousel:true});
gal(“视图”).PikaChoose({carousel:true});
});
功能厅()
{
document.getElementById('gallery-lobby')。style.display='block';
document.getElementById('gallery-partment-interiors')。style.display='none';
document.getElementById('gallery-penthouse')。style.display='none';
document.getElementById('gallery-Rootdeck')。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';
}
功能公寓内部()
{
document.getElementById('gallery-lobby')。style.display='none';
document.getElementById('gallery-partment-interiors')。style.display='block';
document.getElementById('gallery-penthouse')。style.display='none';
document.getElementById('gallery-Rootdeck')。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';
}
功能阁楼()
{
document.getElementById('gallery-lobby')。style.display='none';
document.getElementById('gallery-partment-interiors')。style.display='none';
document.getElementById('gallery-penthouse')。style.display='block';
document.getElementById('gallery-Rootdeck')。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';
}
功能天台()
{
document.getElementById('gallery-lobby')。style.display='none';
document.getElementById('gallery-partment-interiors')。style.display='none';
document.getElementById('gallery-penthouse')。style.display='none';
document.getElementById('gallery-Rootdeck')。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';
}
功能健康俱乐部()
{
document.getElementById('gallery-lobby')。style.display='none';
document.getElementById('gallery-partment-interiors')。style.display='none';
document.getElementById('gallery-penthouse')。style.display='none';
document.getElementById('gallery-Rootdeck')。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';
}
功能车库()
{
document.getElementById('gallery-lobby')。style.display='none';
document.getElementById('gallery-partment-interiors')。style.display='none';
document.getElementById('gallery-penthouse')。style.display='none';
document.getElementById('gallery-Rootdeck')。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';
}
功能画廊()
{
document.getElementById('gallery-lobby')。style.display='none';
document.getElementById('gallery-partment-interiors')。style.display='none';
document.getElementById('gallery-penthouse')。style.display='none';
document.getElementById('gallery-Rootdeck')。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';
}
函数theviews()
{
document.getElementById('gallery-lobby')。style.display='none';
document.getElementById('gallery-partment-interiors')。style.display='none';
document.getElementById('gallery-penthouse')。style.display='none';
document.getElementById('gallery-Rootdeck')。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';
}
画廊代码:
<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> <a onClick="apartmentinteriors()" href="#">Apartment Interiors</a> <a onClick="penthouse()" href="#">Penthouse</a> <a onClick="roofdeck()" href="#">Roofdeck</a> <a onClick="healthclub()" href="#">Health Club</a> <a onClick="garage()" href="#">Garage</a> <a onClick="galleria()" href="#">Galleria</a> <a onClick="theviews()" href="#">The Views</a></p>
.clip img{
left: 0px;
}
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';
}