DataLife Engine / Хак впечатляющий слайдер выбора новостей

Хак впечатляющий слайдер выбора новостей



Красивый слайдер выбора новостей со многими возможностями, на основе скрипта JS
Четыре вида настроек слайдера:

1. Анимация с нумерацией слайдов
2. Анимация с миниатюрой cладов
3. Анимация будет меняться хаотично т.е. будут меняться 2-22 вида анимации в любом порядке:
4. Анимация со всплывающей навигацией при наведении указателя мыши.
Впечатляющий дле хак, рабочего скрипта для вашего веб-ресурса.

Слайд шоу для dle выбора новостей


Установка:
Перед тегом вставляем:

    <link href="css/skitter.styles.css" type="text/css" media="all" rel="stylesheet" />    <script src="js/jquery-1.5.2.min.js"></script>    <script src="js/jquery-ui.min.js"></script>    <script src="js/jquery.skitter.min.js"></script>    <script>    $(document).ready(function(){    $('.box_skitter_large').skitter({animation:"cube" });            });    </script>


Где хотим видеть слайдер вставляем:

    <div class="border_box">    <div class="box_skitter box_skitter_large">    <ul>    <li><a href="#cube"><img src="images/001_1_.jpg" class="cube" /></a><div class="label_text"><p>cube</p></div></li>    <li><a href="#cubeRandom"><img src="images/002_1_.jpg" class="cubeRandom" /></a><div class="label_text"><p>cubeRandom</p></div></li>    <li><a href="#block"><img src="images/003_1_.jpg" class="block" /></a><div class="label_text"><p>block</p></div></li>    <li><a href="#cubeStop"><img src="images/004_1_.jpg" class="cubeStop" /></a><div class="label_text"><p>cubeStop</p></div></li>    <li><a href="#cubeHide"><img src="images/005_1_.jpg" class="cubeHide" /></a><div class="label_text"><p>cubeHide</p></div></li>    <li><a href="#cubeSize"><img src="images/006_1_.jpg" class="cubeSize" /></a><div class="label_text"><p>cubeSize</p></div></li>    <li><a href="#horizontal"><img src="images/007_1_.jpg" class="horizontal" /></a><div class="label_text"><p>horizontal</p></div></li>    <li><a href="#showBars"><img src="images/008_1_.jpg" class="showBars" /></a><div class="label_text"><p>showBars</p></div></li>    <li><a href="#showBarsRandom"><img src="images/009_1_.jpg" class="showBarsRandom" /></a><div class="label_text"><p>showBarsRandom</p></div></li>    <li><a href="#tube"><img src="images/010_1_.jpg" class="tube" /></a><div class="label_text"><p>tube</p></div></li>    <li><a href="#fade"><img src="images/011_1_.jpg" class="fade" /></a><div class="label_text"><p>fade</p></div></li>    <li><a href="#fadeFour"><img src="images/012_1_.jpg" class="fadeFour" /></a><div class="label_text"><p>fadeFour</p></div></li>    <li><a href="#paralell"><img src="images/013_1_.jpg" class="paralell" /></a><div class="label_text"><p>paralell</p></div></li>    <li><a href="#blind"><img src="images/014_1_.jpg" class="blind" /></a><div class="label_text"><p>blind</p></div></li>    <li><a href="#blindHeight"><img src="images/015_1_.jpg" class="blindHeight" /></a><div class="label_text"><p>blindHeight</p></div></li>    <li><a href="#blindWidth"><img src="images/016_1_.jpg" class="blindWidth" /></a><div class="label_text"><p>blindWidth</p></div></li>    <li><a href="#directionTop"><img src="images/017_1_.jpg" class="directionTop" /></a><div class="label_text"><p>directionTop</p></div></li>    <li><a href="#directionBottom"><img src="images/018_1_.jpg" class="directionBottom" /></a><div class="label_text"><p>directionBottom</p></div></li>    <li><a href="#directionRight"><img src="images/019_1_.jpg" class="directionRight" /></a><div class="label_text"><p>directionRight</p></div></li>    <li><a href="#directionLeft"><img src="images/020_1_.jpg" class="directionLeft" /></a><div class="label_text"><p>directionLeft</p></div></li>    <li><a href="#cubeStopRandom"><img src="images/021_1_.jpg" class="cubeStopRandom" /></a><div class="label_text"><p>cubeStopRandom</p></div></li>    <li><a href="#cubeSpread"><img src="images/022_1_.jpg" class="cubeSpread" /></a><div class="label_text"><p>cubeSpread</p></div></li>                    </ul>    </div>    </div>

Хак впечатляющий слайдер выбора новостей

Настройка:
Условно настройку слайдера я разделил по типам на 4 части:
1. Анимация с нумерацией слайдов

    <script>    $(document).ready(function(){    $('.box_skitter_large').skitter({animation:"cube" });            });    </script>


3.Анимация будет меняться хаотично т.е. будут меняться 22 вида анимации в любом порядке:

    <script>    $(document).ready(function(){    $('.box_skitter_large').skitter();            });    </script>

2. Анимация с миниатюрой cладов

    <script>    $(document).ready(function(){    $('.box_skitter_large').skitter({animation:"cube", thumbs: true });            });    </script>


3. Анимация со всплывающей навигацией при наведении указателя мыши

    <script>    $(document).ready(function(){    $('.box_skitter_large').skitter({animation:"cube" , hideTools: true});            });    </script>


Где cube - это вид анимации Все виды анимации
cube cubeRandom block cubeStop cubeHide cubeSize horizontal showBars showBarsRandom
tube fade fadeFour paralell blind blindHeight blindWidth directionBottom directionRight
directionLeft cubeStopRandom cubeSpread

Хак для DLE впечатляющий слайдер выбора новостей
Предлагаем dle хаки скачать хак слайд шоу для dle впечатляющий слайдер выбора новостей slayd-shou-jquery-skitter.rar[1.52 Mb]
13-08-2011, 15:01
Вернуться назад