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

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



Красивый слайдер выбора новостей со многими возможностями, на основе скрипта 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]
  • 100
Добавить комментарий

Оставить комментарий

    • bowtiesmilelaughingblushsmileyrelaxedsmirk
      heart_eyeskissing_heartkissing_closed_eyesflushedrelievedsatisfiedgrin
      winkstuck_out_tongue_winking_eyestuck_out_tongue_closed_eyesgrinningkissingstuck_out_tonguesleeping
      worriedfrowninganguishedopen_mouthgrimacingconfusedhushed
      expressionlessunamusedsweat_smilesweatdisappointed_relievedwearypensive
      disappointedconfoundedfearfulcold_sweatperseverecrysob
      joyastonishedscreamtired_faceangryragetriumph
      sleepyyummasksunglassesdizzy_faceimpsmiling_imp
      neutral_faceno_mouthinnocent