Problem with show/hide
Problem with show/hide
Hi.
I'm kinda new to jquery, just playing with some pre-made scripts.
I want to make a gallery with an jquery function to change foto + content under the foto.
Here's the code (i mixed 2 different show/hide scripts and it's pretty messy right now:(
[code]<script src="jquery-latest.js" type="text/javascript"></script>
<script src="slicker.js" type="text/javascript"></script>
<style type="text/css">
body {
font: Arial, Helvetica, sans-serif normal 10px;
margin: 0; padding: 0;
}
* {margin: 0; padding: 0;}
img {border: none;}
.container {
height: 360px;
width: 910px;
margin: -180px 0 0 -450px;
top: 50%; left: 50%;
position: absolute;
}
ul.thumb {
float: left;
list-style: none;
margin: 0; padding: 10px;
width: 360px;
}
ul.thumb li {
margin: 0; padding: 5px;
float: left;
position: relative;
width: 165px;
height: 165px;
}
ul.thumb li img {
width: 150px; height: 150px;
border: 1px solid #ddd;
padding: 10px;
background: #f0f0f0;
position: absolute;
left: 0; top: 0;
-ms-interpolation-mode: bicubic;
}
ul.thumb li img.hover {
background:url(thumb_bg.png) no-repeat center center;
border: none;
}
#main_view {
float: left;
padding: 9px 0;
margin-left: -10px;
}
#wiecej {
float: right;
padding: 9px 0;
margin-right: 20px;
}
.demo-show {
width: 350px;
margin: 1em .5em;
}
.demo-show h3 {
margin: 0;
padding: .25em;
background: #bfcd93;
border-top: 1px solid #386785;
border-bottom: 1px solid #386785;
}
.demo-show div {
padding: .5em .25em;
}
</style>
<script type="text/javascript" src="index_pliki/jquery-latest.js"></script>
<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 });
// $("#main_view a").attr({ href: mainImage + '.htm' });
// $("#slickbox td").attr({ id: mainImage });
return false;
});
});
</script>
<script type="text/javascript">
jQuery(function(){
$('a.slick-toggle').click(function(){
$($(this).attr('href')).toggle(400);
});
});
</script>
</head><body>
<div class="container">
<ul class="thumb">
<li><a href="./index_pliki/max1.jpg" id="slick-show"><img src="./index_pliki/min1.jpg" alt="" /></a></li>
<li><a href="./index_pliki/max2.jpg"><img src="./index_pliki/min2.jpg" alt="" /></a></li>
<li><a href="./index_pliki/max3.jpg"><img src="./index_pliki/min3.jpg" alt="" /></a></li>
<li><a href="./index_pliki/max4.jpg"><img src="./index_pliki/min4.jpg" alt="" /></a></li>
</ul>
<div id="main_view">
<img src="index_pliki/max1.jpg" alt=""/>
<small style="float: right; color: rgb(153, 153, 153);">
</small>
</div>
<div id="wiecej">
<a href="#" id="slick-show"><img src="./more.jpg" alt="Zobacz wiecej" /></a>
<a href="#" id="slick-hide"><img src="./online.jpg" alt="Zobacz wiecej" /></a>
</div>
<div id="slickbox">
<a class="slick-toggle" href="#slickbox1">Show slickbox 1</a>
<div class="slick-box" id="slickbox1">
Hidden content 1
<a class="slick-toggle" href="#slickbox2">Show slickbox 2</a>
<div class="slick-box" id="slickbox2">
Hidden content 2
</div>
<a class="slick-toggle" href="#slickbox3">Show slickbox 3</a>
<div class="slick-box" id="slickbox3">
Hidden content 3
</div>
</div>
</div>
</div>
</div>
</body></html>[/code]
Basically my problem is that the show/hide function needs to be called here:
[code]<ul class="thumb">
<li><a href="./index_pliki/max1.jpg" id="slick-show"><img src="./index_pliki/min1.jpg" alt="" /></a></li>
<li><a href="./index_pliki/max2.jpg"><img src="./index_pliki/min2.jpg" alt="" /></a></li>
<li><a href="./index_pliki/max3.jpg"><img src="./index_pliki/min3.jpg" alt="" /></a></li>
<li><a href="./index_pliki/max4.jpg"><img src="./index_pliki/min4.jpg" alt="" /></a></li>
</ul>[/code]
and the second script uses href attribute which i can't change in here.
please give me some good solution for this problem.
thanks in advance
http://www.rareclips.ayz.pl/test/
here's an online version of how it looks now