content show problem
<p>I still fight with some jquery scripts:)</p>

<p>With my first problem Jens Fahnenbruck helped me here:</p>

<p><a href="http://stackoverflow.com/questions/3021476/problem-with-hide-show-in-jquery">http://stackoverflow.com/questions/3021476/problem-with-hide-show-in-jquery</a></p>

<p>thanks:)</p>

<p>Now i added another fancy thing - jquery tabs
Made a few modifications and it works like this:</p>

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

<p>online example:
<a href="http://rarelips.ayz.pl/testy/2/" rel="nofollow">http://rarelips.ayz.pl/testy/2/</a></p>

<p>code:</p>

<pre><code>&lt;style type="text/css"&gt;
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;
}
&lt;/style&gt;

&lt;script type="text/javascript" src="index_pliki/jquery-latest.js"&gt;&lt;/script&gt;

&lt;script type="text/javascript"&gt; 
$(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;
    });


});
&lt;/script&gt;

&lt;script type="text/javascript"&gt;
$(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;
  });
});
&lt;/script&gt;

&lt;script type="text/javascript"&gt;
$(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;
  });
});
&lt;/script&gt;

&lt;script type="text/javascript"&gt;
$(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;
  });
});
&lt;/script&gt;

&lt;script type="text/javascript"&gt;
$(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;
  });
});
&lt;/script&gt;

&lt;script type ="text/javascript"&gt;
    $(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;
    });

});
&lt;/script&gt;

&lt;/head&gt;

&lt;body&gt;

&lt;div class="container"&gt;

&lt;ul class="tabs"&gt;
    &lt;li&gt;&lt;a href="#tab1"&gt;1&lt;/a&gt;&lt;/li&gt;
    &lt;li&gt;&lt;a href="#tab2"&gt;2&lt;/a&gt;&lt;/li&gt;
    &lt;li&gt;&lt;a href="#tab3"&gt;3&lt;/a&gt;&lt;/li&gt;
    &lt;li&gt;&lt;a href="#tab4"&gt;4&lt;/a&gt;&lt;/li&gt;
&lt;/ul&gt;

&lt;div class="tab_container"&gt;
    &lt;div id="tab1" class="tab_content"&gt;
        &lt;!--Content--&gt;

&lt;ul class="thumb"&gt;
    &lt;li&gt;&lt;a class="slick-toggle" href="./index_pliki/max1.jpg" data-id="01"&gt;&lt;img src="./index_pliki/min1.jpg" alt="" /&gt;&lt;/a&gt;&lt;/li&gt;
    &lt;li&gt;&lt;a class="slick-toggle" href="./index_pliki/max2.jpg" data-id="02"&gt;&lt;img src="./index_pliki/min2.jpg" alt="" /&gt;&lt;/a&gt;&lt;/li&gt;
    &lt;li&gt;&lt;a class="slick-toggle" href="./index_pliki/max3.jpg" data-id="03"&gt;&lt;img src="./index_pliki/min3.jpg" alt="" /&gt;&lt;/a&gt;&lt;/li&gt;
    &lt;li&gt;&lt;a class="slick-toggle" href="./index_pliki/max4.jpg" data-id="04"&gt;&lt;img src="./index_pliki/min4.jpg" alt="" /&gt;&lt;/a&gt;&lt;/li&gt;
&lt;/ul&gt;

&lt;div id="main_view"&gt;

        &lt;a href="index.htm"&gt;&lt;img src="index_pliki/max1.jpg" alt=""/&gt;&lt;/a&gt;
    &lt;small style="float: right; color: rgb(153, 153, 153);"&gt;
                       &lt;/small&gt;
&lt;/div&gt;

&lt;div id="wiecej"&gt;       

&lt;div id="slickbox"&gt;
&lt;div id="someOtherID" class="slickbox" data-id="01" style="display: none;"&gt;
  1.1
&lt;/div&gt;
&lt;div id="someOtherID" class="slickbox" data-id="02" style="display: none;"&gt;
  1.2
&lt;/div&gt;
&lt;div id="someOtherID" class="slickbox" data-id="03" style="display: none;"&gt;
  1.3
&lt;/div&gt;
&lt;div id="someOtherID" class="slickbox" data-id="04" style="display: none;"&gt;
  1.4
&lt;/div&gt;

&lt;!-- &lt;a href="#" id="slick-show"&gt;&lt;img src="http://www.amptech.pl/images/more.jpg" alt="Zobacz wiecej" /&gt;&lt;/a&gt;
&lt;a href="#" id="slick-hide"&gt;&lt;img src="http://www.amptech.pl/images/online.jpg" alt="Zobacz wiecej" /&gt;&lt;/a&gt;&amp;nbsp;&amp;nbsp;
--&gt;

&lt;/div&gt;
    &lt;/div&gt;
&lt;/div&gt;

&lt;!-- tutaj wklejalem reszte --&gt;

    &lt;div id="tab2" class="tab_content"&gt;
       &lt;!--Content--&gt;

&lt;ul class="thumb"&gt;
    &lt;li&gt;&lt;a class="slick-toggle" href="./index_pliki/max4.jpg" data-id="11"&gt;&lt;img src="./index_pliki/min4.jpg" alt="" /&gt;&lt;/a&gt;&lt;/li&gt;
    &lt;li&gt;&lt;a class="slick-toggle" href="./index_pliki/max3.jpg" data-id="12"&gt;&lt;img src="./index_pliki/min3.jpg" alt="" /&gt;&lt;/a&gt;&lt;/li&gt;
    &lt;li&gt;&lt;a class="slick-toggle" href="./index_pliki/max2.jpg" data-id="13"&gt;&lt;img src="./index_pliki/min2.jpg" alt="" /&gt;&lt;/a&gt;&lt;/li&gt;
    &lt;li&gt;&lt;a class="slick-toggle" href="./index_pliki/max1.jpg" data-id="14"&gt;&lt;img src="./index_pliki/min1.jpg" alt="" /&gt;&lt;/a&gt;&lt;/li&gt;
&lt;/ul&gt;

&lt;div id="main_view2"&gt;

        &lt;a href="index.htm"&gt;&lt;img src="index_pliki/max1.jpg" alt=""/&gt;&lt;/a&gt;
    &lt;small style="float: right; color: rgb(153, 153, 153);"&gt;
                       &lt;/small&gt;
&lt;/div&gt;

&lt;div id="wiecej"&gt;

&lt;div id="slickbox2"&gt;
&lt;div id="someOtherID" class="slickbox2" data-id="11" style="display: none;"&gt;
  2.1
&lt;/div&gt;
&lt;div id="someOtherID" class="slickbox2" data-id="12" style="display: none;"&gt;
  2.2
&lt;/div&gt;
&lt;div id="someOtherID" class="slickbox2" data-id="13" style="display: none;"&gt;
  2.3
&lt;/div&gt;
&lt;div id="someOtherID" class="slickbox2" data-id="14" style="display: none;"&gt;
  2.4
&lt;/div&gt;
&lt;/div&gt;
    &lt;/div&gt;
&lt;/div&gt;


&lt;div id="tab3" class="tab_content"&gt;
&lt;ul class="thumb"&gt;
    &lt;li&gt;&lt;a class="slick-toggle" href="./index_pliki/max4.jpg" data-id="21"&gt;&lt;img src="./index_pliki/min4.jpg" alt="" /&gt;&lt;/a&gt;&lt;/li&gt;
    &lt;li&gt;&lt;a class="slick-toggle" href="./index_pliki/max3.jpg" data-id="22"&gt;&lt;img src="./index_pliki/min3.jpg" alt="" /&gt;&lt;/a&gt;&lt;/li&gt;
    &lt;li&gt;&lt;a class="slick-toggle" href="./index_pliki/max2.jpg" data-id="23"&gt;&lt;img src="./index_pliki/min2.jpg" alt="" /&gt;&lt;/a&gt;&lt;/li&gt;
    &lt;li&gt;&lt;a class="slick-toggle" href="./index_pliki/max1.jpg" data-id="24"&gt;&lt;img src="./index_pliki/min1.jpg" alt="" /&gt;&lt;/a&gt;&lt;/li&gt;
&lt;/ul&gt;

&lt;div id="main_view3"&gt;

        &lt;a href="index.htm"&gt;&lt;img src="index_pliki/max1.jpg" alt=""/&gt;&lt;/a&gt;
    &lt;small style="float: right; color: rgb(153, 153, 153);"&gt;
                       &lt;/small&gt;
&lt;/div&gt;

&lt;div id="wiecej"&gt;

&lt;div id="slickbox3"&gt;
&lt;div id="someOtherID" class="slickbox3" data-id="21" style="display: none;"&gt;
  3.1
&lt;/div&gt;
&lt;div id="someOtherID" class="slickbox3" data-id="22" style="display: none;"&gt;
  3.2
&lt;/div&gt;
&lt;div id="someOtherID" class="slickbox3" data-id="23" style="display: none;"&gt;
  3.3
&lt;/div&gt;
&lt;div id="someOtherID" class="slickbox3" data-id="24" style="display: none;"&gt;
  3.4
&lt;/div&gt;
&lt;/div&gt;
    &lt;/div&gt;
&lt;/div&gt;

    &lt;div id="tab4" class="tab_content"&gt;
    &lt;ul class="thumb"&gt;
    &lt;li&gt;&lt;a class="slick-toggle" href="./index_pliki/max4.jpg" data-id="31"&gt;&lt;img src="./index_pliki/min4.jpg" alt="" /&gt;&lt;/a&gt;&lt;/li&gt;
    &lt;li&gt;&lt;a class="slick-toggle" href="./index_pliki/max3.jpg" data-id="32"&gt;&lt;img src="./index_pliki/min3.jpg" alt="" /&gt;&lt;/a&gt;&lt;/li&gt;
    &lt;li&gt;&lt;a class="slick-toggle" href="./index_pliki/max2.jpg" data-id="33"&gt;&lt;img src="./index_pliki/min2.jpg" alt="" /&gt;&lt;/a&gt;&lt;/li&gt;
    &lt;li&gt;&lt;a class="slick-toggle" href="./index_pliki/max1.jpg" data-id="34"&gt;&lt;img src="./index_pliki/min1.jpg" alt="" /&gt;&lt;/a&gt;&lt;/li&gt;
&lt;/ul&gt;

&lt;div id="main_view4"&gt;

        &lt;a href="index.htm"&gt;&lt;img src="index_pliki/max1.jpg" alt=""/&gt;&lt;/a&gt;
    &lt;small style="float: right; color: rgb(153, 153, 153);"&gt;
                       &lt;/small&gt;
&lt;/div&gt;

&lt;div id="wiecej"&gt;

&lt;div id="slickbox4"&gt;
&lt;div id="someOtherID" class="slickbox4" data-id="31" style="display: none;"&gt;
  4.1
&lt;/div&gt;
&lt;div id="someOtherID" class="slickbox4" data-id="32" style="display: none;"&gt;
  4.2
&lt;/div&gt;
&lt;div id="someOtherID" class="slickbox4" data-id="33" style="display: none;"&gt;
  4.3
&lt;/div&gt;
&lt;div id="someOtherID" class="slickbox4" data-id="34" style="display: none;"&gt;
  4.4
&lt;/div&gt;
&lt;/div&gt;
    &lt;/div&gt;
&lt;/div&gt;



    &lt;/div&gt;
&lt;/div&gt;
</code></pre>
