I still fight with some jquery scripts:)
With my first problem Jens Fahnenbruck helped me here:
http://stackoverflow.com/questions/3021476/problem-with-hide-show-in-jquery
thanks:)
Now i added another fancy thing - jquery tabs
Made a few modifications and it works like this:
When you click on tab and it loads different main image for every tab.
The problem is that i used $(document).ready(function() to handle those image changes.
When i click any of 2x2 box images (on any tab) it will permanently change the image on the right and when i click on tabs it won't work like it did at the beginning.
online example:
http://rarelips.ayz.pl/testy/2/
code:
<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: 500px;
width: 1000px;
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;
}
#main_view2 {
float: left;
padding: 9px 0;
margin-left: -10px;
}
#main_view3 {
float: left;
padding: 9px 0;
margin-left: -10px;
}
#main_view4 {
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;
}
/* styl do tabek */
ul.tabs {
margin: 0;
padding: 0;
float: left;
list-style: none;
height: 32px; /*--Set height of tabs--*/
border-bottom: 1px solid #999;
border-left: 1px solid #999;
width: 100%;
}
ul.tabs li {
float: left;
margin: 0;
padding: 0;
height: 31px; /*--Subtract 1px from the height of the unordered list--*/
line-height: 31px; /*--Vertically aligns the text within the tab--*/
border: 1px solid #999;
border-left: none;
margin-bottom: -1px; /*--Pull the list item down 1px--*/
overflow: hidden;
position: relative;
background: #e0e0e0;
}
ul.tabs li a {
text-decoration: none;
color: #000;
display: block;
font-size: 1.2em;
padding: 0 20px;
border: 1px solid #fff; /*--Gives the bevel look with a 1px white border inside the list item--*/
outline: none;
}
ul.tabs li a:hover {
background: #ccc;
}
html ul.tabs li.active, html ul.tabs li.active a:hover { /*--Makes sure that the active tab does not listen to the hover properties--*/
background: #fff;
border-bottom: 1px solid #fff; /*--Makes the active tab look like it's connected with its content--*/
}
.tab_container {
border: 1px solid #999;
border-top: none;
overflow: hidden;
clear: both;
float: left; width: 100%;
background: #fff;
}
.tab_content {
padding: 20px;
font-size: 1.2em;
}
</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_view2 img").attr({ src: mainImage });
$("#main_view3 img").attr({ src: mainImage });
$("#main_view4 img").attr({ src: mainImage });
return false;
});
});
</script>
<script type="text/javascript">
$(document).ready(function() {
$("#main_view img").attr({ src: './index_pliki/max1.jpg' });
$("#slickbox div[data-id=" + '01' + "].slickbox").show('slow');
$('a.slick-toggle').click(function() {
var dataID = $(this).attr("data-id");
$('#slickbox div.slickbox').hide();
$("#slickbox div[data-id=" + dataID + "].slickbox").show('slow');
return false;
});
});
</script>
<script type="text/javascript">
$(document).ready(function() {
$("#main_view2 img").attr({ src: './index_pliki/max2.jpg' });
$("#slickbox2 div[data-id=" + '11' + "].slickbox2").show('slow');
$('a.slick-toggle').click(function() {
var dataID = $(this).attr("data-id");
$('#slickbox2 div.slickbox2').hide();
$("#slickbox2 div[data-id=" + dataID + "].slickbox2").show('slow');
return false;
});
});
</script>
<script type="text/javascript">
$(document).ready(function() {
$("#main_view3 img").attr({ src: './index_pliki/max3.jpg' });
$("#slickbox3 div[data-id=" + '21' + "].slickbox3").show('slow');
$('a.slick-toggle').click(function() {
var dataID = $(this).attr("data-id");
$('#slickbox3 div.slickbox3').hide();
$("#slickbox3 div[data-id=" + dataID + "].slickbox3").show('slow');
return false;
});
});
</script>
<script type="text/javascript">
$(document).ready(function() {
$("#main_view4 img").attr({ src: './index_pliki/max4.jpg' });
$("#slickbox4 div[data-id=" + '31' + "].slickbox4").show('slow');
$('a.slick-toggle').click(function() {
var dataID = $(this).attr("data-id");
$('#slickbox4 div.slickbox4').hide();
$("#slickbox4 div[data-id=" + dataID + "].slickbox4").show('slow');
return false;
});
});
</script>
<script type ="text/javascript">
$(document).ready(function() {
//When page loads...
$(".tab_content").hide(); //Hide all content
$("ul.tabs li:first").addClass("active").show(); //Activate first tab
$(".tab_content:first").show(); //Show first tab content
//On Click
Event
$("ul.tabs li").click(function() {
$("ul.tabs li").removeClass("active"); //Remove any "active" class
$(this).addClass("active"); //Add "active" class to selected tab
$(".tab_content").hide(); //Hide all tab content
var activeTab = $(this).find("a").attr("href"); //Find the href attribute value to identify the active tab + content
$(activeTab).fadeIn(); //Fade in the active
ID content
return false;
});
});
</script>
</head>
<body>
<div class="container">
<ul class="tabs">
<li><a href="#tab1">1</a></li>
<li><a href="#tab2">2</a></li>
<li><a href="#tab3">3</a></li>
<li><a href="#tab4">4</a></li>
</ul>
<div class="tab_container">
<div id="tab1" class="tab_content">
<!--Content-->
<ul class="thumb">
<li><a class="slick-toggle" href="./index_pliki/max1.jpg" data-id="01"><img src="./index_pliki/min1.jpg" alt="" /></a></li>
<li><a class="slick-toggle" href="./index_pliki/max2.jpg" data-id="02"><img src="./index_pliki/min2.jpg" alt="" /></a></li>
<li><a class="slick-toggle" href="./index_pliki/max3.jpg" data-id="03"><img src="./index_pliki/min3.jpg" alt="" /></a></li>
<li><a class="slick-toggle" href="./index_pliki/max4.jpg" data-id="04"><img src="./index_pliki/min4.jpg" alt="" /></a></li>
</ul>
<div id="main_view">
<a href="index.htm"><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">
<div id="someOtherID" class="slickbox" data-id="01" style="display: none;">
1.1
</div>
<div id="someOtherID" class="slickbox" data-id="02" style="display: none;">
1.2
</div>
<div id="someOtherID" class="slickbox" data-id="03" style="display: none;">
1.3
</div>
<div id="someOtherID" class="slickbox" data-id="04" style="display: none;">
1.4
</div>
<!-- <a href="#" id="slick-show"><img src="http://www.amptech.pl/images/more.jpg" alt="Zobacz wiecej" /></a>
<a href="#" id="slick-hide"><img src="http://www.amptech.pl/images/online.jpg" alt="Zobacz wiecej" /></a>
-->
</div>
</div>
</div>
<!-- tutaj wklejalem reszte -->
<div id="tab2" class="tab_content">
<!--Content-->
<ul class="thumb">
<li><a class="slick-toggle" href="./index_pliki/max4.jpg" data-id="11"><img src="./index_pliki/min4.jpg" alt="" /></a></li>
<li><a class="slick-toggle" href="./index_pliki/max3.jpg" data-id="12"><img src="./index_pliki/min3.jpg" alt="" /></a></li>
<li><a class="slick-toggle" href="./index_pliki/max2.jpg" data-id="13"><img src="./index_pliki/min2.jpg" alt="" /></a></li>
<li><a class="slick-toggle" href="./index_pliki/max1.jpg" data-id="14"><img src="./index_pliki/min1.jpg" alt="" /></a></li>
</ul>
<div id="main_view2">
<a href="index.htm"><img src="index_pliki/max1.jpg" alt=""/></a>
<small style="float: right; color: rgb(153, 153, 153);">
</small>
</div>
<div id="wiecej">
<div id="slickbox2">
<div id="someOtherID" class="slickbox2" data-id="11" style="display: none;">
2.1
</div>
<div id="someOtherID" class="slickbox2" data-id="12" style="display: none;">
2.2
</div>
<div id="someOtherID" class="slickbox2" data-id="13" style="display: none;">
2.3
</div>
<div id="someOtherID" class="slickbox2" data-id="14" style="display: none;">
2.4
</div>
</div>
</div>
</div>
<div id="tab3" class="tab_content">
<ul class="thumb">
<li><a class="slick-toggle" href="./index_pliki/max4.jpg" data-id="21"><img src="./index_pliki/min4.jpg" alt="" /></a></li>
<li><a class="slick-toggle" href="./index_pliki/max3.jpg" data-id="22"><img src="./index_pliki/min3.jpg" alt="" /></a></li>
<li><a class="slick-toggle" href="./index_pliki/max2.jpg" data-id="23"><img src="./index_pliki/min2.jpg" alt="" /></a></li>
<li><a class="slick-toggle" href="./index_pliki/max1.jpg" data-id="24"><img src="./index_pliki/min1.jpg" alt="" /></a></li>
</ul>
<div id="main_view3">
<a href="index.htm"><img src="index_pliki/max1.jpg" alt=""/></a>
<small style="float: right; color: rgb(153, 153, 153);">
</small>
</div>
<div id="wiecej">
<div id="slickbox3">
<div id="someOtherID" class="slickbox3" data-id="21" style="display: none;">
3.1
</div>
<div id="someOtherID" class="slickbox3" data-id="22" style="display: none;">
3.2
</div>
<div id="someOtherID" class="slickbox3" data-id="23" style="display: none;">
3.3
</div>
<div id="someOtherID" class="slickbox3" data-id="24" style="display: none;">
3.4
</div>
</div>
</div>
</div>
<div id="tab4" class="tab_content">
<ul class="thumb">
<li><a class="slick-toggle" href="./index_pliki/max4.jpg" data-id="31"><img src="./index_pliki/min4.jpg" alt="" /></a></li>
<li><a class="slick-toggle" href="./index_pliki/max3.jpg" data-id="32"><img src="./index_pliki/min3.jpg" alt="" /></a></li>
<li><a class="slick-toggle" href="./index_pliki/max2.jpg" data-id="33"><img src="./index_pliki/min2.jpg" alt="" /></a></li>
<li><a class="slick-toggle" href="./index_pliki/max1.jpg" data-id="34"><img src="./index_pliki/min1.jpg" alt="" /></a></li>
</ul>
<div id="main_view4">
<a href="index.htm"><img src="index_pliki/max1.jpg" alt=""/></a>
<small style="float: right; color: rgb(153, 153, 153);">
</small>
</div>
<div id="wiecej">
<div id="slickbox4">
<div id="someOtherID" class="slickbox4" data-id="31" style="display: none;">
4.1
</div>
<div id="someOtherID" class="slickbox4" data-id="32" style="display: none;">
4.2
</div>
<div id="someOtherID" class="slickbox4" data-id="33" style="display: none;">
4.3
</div>
<div id="someOtherID" class="slickbox4" data-id="34" style="display: none;">
4.4
</div>
</div>
</div>
</div>
</div>
</div>
