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>&nbsp;&nbsp;
-->

</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>