Переключатель с таблицы на список

emil116rus

Постоялец
Регистрация
29 Мар 2008
Сообщения
133
Реакции
15
Нужна помощь, необходимо что бы изначально отображало thumb_view а не display

Для просмотра ссылки Войди или Зарегистрируйся


Код:
<script type="text/javascript">
$(document).ready(function(){
    $("a.switch_thumb").toggle(function(){
      $(this).addClass("swap");
      $("ul.display").fadeOut("fast", function() {
          $(this).fadeIn("fast").addClass("thumb_view");
         });
      }, function () {
      $(this).removeClass("swap");
      $("ul.display").fadeOut("fast", function() {
          $(this).fadeIn("fast").removeClass("thumb_view");
        });
    });

});
</script>

Код:
<style type="text/css">

.container {
    width: 758px;
    margin: 0 auto;
    padding-bottom: 100px;
    overflow: hidden;
}
ul.display {
    float: left;
    width: 756px;
    margin: 0;
    padding: 0;
    list-style: none;
    border-top: 1px solid #ddd;
    border-right: 1px solid #ddd;
    background: #eee;
}
ul.display li {
    float: left;
    width: 754px;
    padding: 10px 0;
    margin: 0;
    border-top: 1px solid #fff;
    border-right: 1px solid #ddd;
    border-bottom: 1px solid #ddd;
    border-left: 1px solid #fff;
    color:#000
}
ul.display li a {
    color: #0062ad;
    text-decoration: none;
}
ul.display li .content_block {
    padding: 0 10px;
}
ul.display li .content_block h2 {
    margin: 0;
    padding: 5px;
    font-weight: normal;
    font-size: 1.7em;

}
ul.display li .content_block p {
    margin: 0;
    padding: 5px 5px 5px 245px;
    font-size: 1.2em;
}
ul.display li .content_block a img{
    padding: 5px;
    border: 2px solid #ccc;
    background: #fff;
    margin: 0 15px 0 0;
    float: left;
}

ul.thumb_view li{
    width: 250px;
}
ul.thumb_view li h2 {
    display: inline;
}
ul.thumb_view li p{
    display: none;
}
ul.thumb_view li .content_block a img {
    margin: 0 0 10px;
}


a.switch_thumb {
    width: 122px;
    height: 26px;
    line-height: 26px;
    padding: 0;
    margin: 10px 0;
    display: block;
    outline: none;
    text-indent: -9999px;
    background-image: url(switch.gif);
    background-repeat: no-repeat;
}
a:hover.switch_thumb {
    filter:alpha(opacity=75);
    opacity:.75;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=75)";
}
a.swap { background-position: left bottom; }


</style>

Код:
<div class="container">
<a href="#" class="switch_thumb">Иконка переключателя</a>
<ul class="display">
    <li>
        <div class="content_block">
            <a href="#"><img src="sample.gif" alt="" /></a>
            <h2><a href="#">Название миниатюры</a></h2>
            <p>Askin', jehosephat come pudneer, sam-hell, in lament had. Cabin tax-collectors spell, chitlins spittin' watchin' hootch me rightly kinfolk that. Woman kickin', work yer last dogs, rattler hee-haw mobilehome stew trailer driveway shootin'. </p>
        </div>
    </li>
    <li>
        <div class="content_block">
            <a href="#"><img src="sample2.gif" alt="" /></a>
            <h2><a href="#">Название миниатюры</a></h2>
            <p>Askin', jehosephat come pudneer, sam-hell, in lament had. Cabin tax-collectors spell, chitlins spittin' watchin' hootch me rightly kinfolk that. Woman kickin', work yer last dogs, rattler hee-haw mobilehome stew trailer driveway shootin'. </p>
        </div>
    </li>
    <li>
        <div class="content_block">
            <a href="#"><img src="sample3.gif" alt="" /></a>
            <h2><a href="#">Название миниатюры</a></h2>
            <p>Askin', jehosephat come pudneer, sam-hell, in lament had. Cabin tax-collectors spell, chitlins spittin' watchin' hootch me rightly kinfolk that. Woman kickin', work yer last dogs, rattler hee-haw mobilehome stew trailer driveway shootin'. </p>
        </div>
    </li>
    <li>
        <div class="content_block">
            <a href="#"><img src="sample4.gif" alt="" /></a>
            <h2><a href="#">Название миниатюры</a></h2>
            <p>Askin', jehosephat come pudneer, sam-hell, in lament had. Cabin tax-collectors spell, chitlins spittin' watchin' hootch me rightly kinfolk that. Woman kickin', work yer last dogs, rattler hee-haw mobilehome stew trailer driveway shootin'. </p>
        </div>
    </li>
    <li>
        <div class="content_block">
            <a href="#"><img src="sample5.gif" alt="" /></a>
            <h2><a href="#">Название миниатюры</a></h2>
            <p>Askin', jehosephat come pudneer, sam-hell, in lament had. Cabin tax-collectors spell, chitlins spittin' watchin' hootch me rightly kinfolk that. Woman kickin', work yer last dogs, rattler hee-haw mobilehome stew trailer driveway shootin'. </p>
        </div>
    </li>
    <li>
        <div class="content_block">
            <a href="#"><img src="sample6.gif" alt="" /></a>
            <h2><a href="#">Название миниатюры</a></h2>
            <p>Askin', jehosephat come pudneer, sam-hell, in lament had. Cabin tax-collectors spell, chitlins spittin' watchin' hootch me rightly kinfolk that. Woman kickin', work yer last dogs, rattler hee-haw mobilehome stew trailer driveway shootin'. </p>
        </div>
    </li>
    <li>
        <div class="content_block">
            <a href="#"><img src="sample7.gif" alt="" /></a>
            <h2><a href="#">Название миниатюры</a></h2>
            <p>Askin', jehosephat come pudneer, sam-hell, in lament had. Cabin tax-collectors spell, chitlins spittin' watchin' hootch me rightly kinfolk that. Woman kickin', work yer last dogs, rattler hee-haw mobilehome stew trailer driveway shootin'. </p>
        </div>
    </li>
    <li>
        <div class="content_block">
            <a href="#"><img src="sample8.gif" alt="" /></a>
            <h2><a href="#">Название миниатюры</a></h2>
            <p>Askin', jehosephat come pudneer, sam-hell, in lament had. Cabin tax-collectors spell, chitlins spittin' watchin' hootch me rightly kinfolk that. </p>
        </div>
    </li>
    <li>
        <div class="content_block">
            <a href="#"><img src="sample9.gif" alt="" /></a>
            <h2><a href="#">Название миниатюры</a></h2>
            <p>Askin', jehosephat come pudneer, sam-hell, in lament had. Cabin tax-collectors spell, chitlins spittin' watchin' hootch me rightly kinfolk that. Woman kickin', work yer last dogs, rattler hee-haw mobilehome stew trailer driveway shootin'. Woman kickin', work yer last dogs, rattler hee-haw mobilehome stew trailer driveway shootin'.</p>
        </div>
    </li>
    <li>
        <div class="content_block">
            <a href="#"><img src="sample10.gif" alt="" /></a>
            <h2><a href="#">Название миниатюры</a></h2>
            <p>Askin', jehosephat come pudneer, sam-hell, in lament had. Cabin tax-collectors spell, chitlins spittin' watchin' hootch me rightly kinfolk that. Woman kickin', work yer last dogs, rattler hee-haw mobilehome stew trailer driveway shootin'. </p>
        </div>
    </li>
    <li>
        <div class="content_block">
            <a href="#"><img src="sample11.gif" alt="" /></a>
            <h2><a href="#">Название миниатюры</a></h2>
            <p>Askin', jehosephat come pudneer, sam-hell, in lament had. Cabin tax-collectors spell. </p>
        </div>
    </li>
    <li>
        <div class="content_block">
            <a href="#"><img src="sample12.gif" alt="" /></a>
            <h2><a href="#">Название миниатюры</a></h2>
            <p>Askin', jehosephat come pudneer, sam-hell, in lament had. Cabin tax-collectors spell, chitlins spittin' watchin' hootch me rightly kinfolk that. Woman kickin', work yer last dogs, rattler hee-haw mobilehome stew trailer driveway shootin'. </p>
        </div>
    </li>
</ul>
</div>
 
HTML Заменить
Код:
<ul class="display">
На
Код:
<ul class="display thumb_view">
JS:
Код:
<script type="text/javascript">
$(document).ready(function(){
    $("a.switch_thumb").toggle(function(){
      $(this).addClass("swap");
      $("ul.display").fadeOut("fast", function() {
          $(this).fadeIn("fast").removeClass("thumb_view");
         });
      }, function () {
      $(this).removeClass("swap");
      $("ul.display").fadeOut("fast", function() {
          $(this).fadeIn("fast").addClass("thumb_view");
        });
    });

});
</script>
 
Назад
Сверху