0
我正在某種畫廊工作。發現很酷的現成解決方案,但我想做一些修改,我卡住了。隱藏問題/顯示在jquery
http://www.rareclips.ayz.pl/test/
如何,我想這個工作: 當你點擊和形象應該改變右邊的圖像,使隱藏div的可見之一。
問題是,我必須隱藏頁面加載的所有div,並且只顯示圖像點擊此隱藏div內的特定div。
<script type="text/javascript">
$(document).ready(function(){
//Larger thumbnail preview
$("ul.thumb li").hover(function() {
$(this).css({'z-index' : '10'});
$(this).find('img').addClass("hover").stop()
.animate({
marginTop: '-110px',
marginLeft: '-110px',
top: '50%',
left: '50%',
width: '200px',
height: '200px',
padding: '5px'
}, 200);
} , function() {
$(this).css({'z-index' : '0'});
$(this).find('img').removeClass("hover").stop()
.animate({
marginTop: '0',
marginLeft: '0',
top: '0',
left: '0',
width: '150px',
height: '150px',
padding: '10px'
}, 400);
});
//Swap Image on Click
$("ul.thumb li a").click(function() {
var mainImage = $(this).attr("href"); //Find Image Name
$("#main_view img").attr({ src: mainImage });
return false;
});
});
</script>
<script type="text/javascript">
$(document).ready(function() {
// $('#slickbox').hide();
$('a.slick-toggle').click(function() {
var dataID = $(this).attr("data-id");
$('#slickbox').hide();
$("#slickbox.div[data-id=" + dataID + "].slickbox").show('slow');
return false;
});
});
</script>
</head><body>
<div class="container">
<ul class="thumb">
<li><a class="slick-toggle" href="./index_pliki/max1.jpg" data-id="1"><img src="./index_pliki/min1.jpg" alt="" /></a></li>
<li><a class="slick-toggle" href="./index_pliki/max2.jpg" data-id="2"><img src="./index_pliki/min2.jpg" alt="" /></a></li>
<li><a href="./index_pliki/max3.jpg" data-id="3"><img src="./index_pliki/min3.jpg" alt="" /></a></li>
<li><a href="./index_pliki/max4.jpg" data-id="4"><img src="./index_pliki/min4.jpg" alt="" /></a></li>
</ul>
<div id="main_view">
<a href="index.htm" id="slick-up"><img src="index_pliki/max1.jpg" alt=""/></a>
<small style="float: right; color: rgb(153, 153, 153);">
</small>
</div>
<div id="wiecej">
<div id="slickbox">
<a id="someID" class="slick-toggle" data-id="1" href="#">Show/Hide</a>
<div id="someOtherID" class="slickbox" data-id="1" style="display: none;">
1
</div>
<a id="someID" class="slick-toggle" data-id="2" href="#">Show/Hide</a>
<div id="someOtherID" class="slickbox" data-id="2" style="display: none;">
2
</div>
</div>
歡迎之間SO,請訪問http://stackoverflow.com/faq – Reigel 2010-06-11 08:56:15