Хаки и Скрипты Next Generation CMS : Слайдшоу и анимация, JS : Фоновое слайдшоу

irbees2008 Опубликовано - 8 - марта Слайдшоу и анимация

Адаптировал: irbees2008
Уровень сложности исполнения: нужны навыки css hmlt
Демо:

Подыскал интересную реализацию Фонового слайдшоу.
1.Скачиваем архив Вы не можете скачивать файлы с нашего сайта ,рекомендуем Вам зарегистрироваться либо войти на сайт под своим именем. , распаковываем и заливаем в папку с шаблоном.
2.В main.tpl в head подключаем скрипты и стили.

Код:

1<link rel="stylesheet" type="text/css" href="{tpl_url}/css/style.css" />
2  <link href='http://fonts.googleapis.com/css?family=PT+Sans+Narrow' rel='stylesheet' type='text/css' />
3  <link href='http://fonts.googleapis.com/css?family=Dancing+Script' rel='stylesheet' type='text/css' />
4<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.0/jquery.min.js"></script>
5  <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.9/jquery-ui.min.js"></script>
6  <script type="text/javascript" src="{tpl_url}/js/jquery.flip.js"></script>
7  <script type="text/javascript" src="{tpl_url}/js/jquery-mousewheel-3.0.4/jquery.mousewheel.min.js"></script>

3.Сам блок нашего слайдшоу

Код:

01<div id="tf_bg" class="tf_bg">
02   <img src="images/1.jpg" alt="Image 1" longdesc="images/thumbs/1.jpg" />
03   <img src="images/2.jpg" alt="Image 2" longdesc="images/thumbs/2.jpg"/>
04   <img src="images/3.jpg" alt="Image 3" longdesc="images/thumbs/3.jpg"/>
05   <img src="images/4.jpg" alt="Image 4" longdesc="images/thumbs/4.jpg"/>
06   <img src="images/5.jpg" alt="Image 5" longdesc="images/thumbs/5.jpg"/>
07   <img src="images/6.jpg" alt="Image 6" longdesc="images/thumbs/6.jpg"/>
08   <div class="tf_pattern"></div>
09  </div>
10  <div id="tf_content_wrapper" class="tf_content_wrapper">
11   <div class="tf_content" id="content1" style="display:block;">
12    <h2>Dreamer</h2>
13    <p>Far far away, behind the word mountains, far from the countries Vokalia and Consonantia, there live the blind texts.</p>
14   </div>
15   <div class="tf_content" id="content2">
16    <h2>Crusader</h2>
17    <p>Separated they live in Bookmarksgrove right at the coast of the Semantics, a large language ocean. A small river named Duden flows by their place and supplies it with the necessary regelialia.</p>
18   </div>
19   <div class="tf_content" id="content3">
20    <h2>Adventurer</h2>
21    <p>It is a paradisematic country, in which roasted parts of sentences fly into your mouth.</p>
22   </div>
23   <div class="tf_content" id="content4">
24    <h2>Risk Taker</h2>
25    <p>She packed her seven versalia, put her initial into the belt and made herself on the way.</p>
26   </div>
27   <div class="tf_content" id="content5">
28    <h2>Visioneer</h2>
29    <p>Pityful a rethoric question ran over her cheek, then she continued her way. On her way she met a copy.</p>
30   </div>
31   <div class="tf_content" id="content6">
32    <h2>Magician</h2>
33    <p>And if she hasn’t been rewritten, then they are still using her. Far far away, behind the word mountains, far from the countries Vokalia and Consonantia, there live the blind texts.</p>
34   </div>
35  </div>
36 
37  <div id="tf_thumbs" class="tf_thumbs">
38   <span id="tf_zoom" class="tf_zoom"></span>
39   <img src="images/thumbs/1.jpg" alt="Thumb1"/>
40  </div>
41 
42  <div id="tf_next" class="tf_next"></div>
43  <div id="tf_prev" class="tf_prev"></div>
44  <div class="description">
45   <span> <span>Вы можете использовать ↑ and ↓ или колесико мыши для пролистывания</span></span>
46  </div>

4.Подключаем скрипт инициализации перед /body/

Код:

001<script type="text/javascript">
002   /*
003   the images preload plugin
004   */
005   (function($) {
006    $.fn.preload = function(options) {
007     var opts  = $.extend({}, $.fn.preload.defaults, options);
008     o   = $.meta ? $.extend({}, opts, this.data()) : opts;
009     var c  = this.length,
010      l  = 0;
011     return this.each(function() {
012      var $i = $(this);
013      $('<img/>').load(function(i){
014       ++l;
015       if(l == c) o.onComplete();
016      }).attr('src',$i.attr('src')); 
017     });
018    };
019    $.fn.preload.defaults = {
020     onComplete : function(){return false;}
021    };
022   })(jQuery);
023  </script>
024  <script type="text/javascript">
025   $(function() {
026    var $tf_bg    = $('#tf_bg'),
027     $tf_bg_images  = $tf_bg.find('img'),
028     $tf_bg_img   = $tf_bg_images.eq(0),
029     $tf_thumbs   = $('#tf_thumbs'),
030     total    = $tf_bg_images.length,
031     current    = 0,
032     $tf_content_wrapper = $('#tf_content_wrapper'),
033     $tf_next   = $('#tf_next'),
034     $tf_prev   = $('#tf_prev'),
035     $tf_loading   = $('#tf_loading');
036 
037    //preload the images    
038    $tf_bg_images.preload({
039     onComplete : function(){
040      $tf_loading.hide();
041      init();
042     }
043    });
044 
045    //shows the first image and initializes events
046    function init(){
047     //get dimentions for the image, based on the windows size
048     var dim = getImageDim($tf_bg_img);
049     //set the returned values and show the image
050     $tf_bg_img.css({
051      width : dim.width,
052      height : dim.height,
053      left : dim.left,
054      top  : dim.top
055     }).fadeIn();
056 
057     //resizing the window resizes the $tf_bg_img
058    $(window).bind('resize',function(){
059     var dim = getImageDim($tf_bg_img);
060     $tf_bg_img.css({
061      width : dim.width,
062      height : dim.height,
063      left : dim.left,
064      top  : dim.top
065     });
066    });
067 
068     //expand and fit the image to the screen
069     $('#tf_zoom').live('click',
070      function(){
071      if($tf_bg_img.is(':animated'))
072       return false;
073 
074       var $this = $(this);
075       if($this.hasClass('tf_zoom')){
076        resize($tf_bg_img);
077        $this.addClass('tf_fullscreen')
078          .removeClass('tf_zoom');
079       }
080       else{
081        var dim = getImageDim($tf_bg_img);
082        $tf_bg_img.animate({
083         width : dim.width,
084         height : dim.height,
085         top  : dim.top,
086         left : dim.left
087        },350);
088        $this.addClass('tf_zoom')
089          .removeClass('tf_fullscreen'); 
090       }
091      }
092     );
093 
094     //click the arrow down, scrolls down
095     $tf_next.bind('click',function(){
096      if($tf_bg_img.is(':animated'))
097       return false;
098       scroll('tb');
099     });
100 
101     //click the arrow up, scrolls up
102     $tf_prev.bind('click',function(){
103      if($tf_bg_img.is(':animated'))
104      return false;
105      scroll('bt');
106     });
107 
108     //mousewheel events - down / up button trigger the scroll down / up
109     $(document).mousewheel(function(e, delta) {
110      if($tf_bg_img.is(':animated'))
111       return false;
112 
113      if(delta > 0)
114       scroll('bt');
115      else
116       scroll('tb');
117      return false;
118     });
119 
120     //key events - down / up button trigger the scroll down / up
121     $(document).keydown(function(e){
122      if($tf_bg_img.is(':animated'))
123       return false;
124 
125      switch(e.which){
126       case 38: 
127        scroll('bt');
128        break; 
129 
130       case 40: 
131        scroll('tb');
132        break;
133      }
134     });
135    }
136 
137    //show next / prev image
138    function scroll(dir){
139     //if dir is "tb" (top -> bottom) increment current, 
140     //else if "bt" decrement it
141     current = (dir == 'tb')?current + 1:current - 1;
142 
143     //we want a circular slideshow, 
144     //so we need to check the limits of current
145     if(current == total) current = 0;
146     else if(current < 0) current = total - 1;
147 
148     //flip the thumb
149     $tf_thumbs.flip({
150      direction : dir,
151      speed  : 400,
152      onBefore : function(){
153       //the new thumb is set here
154       var content = '<span id="tf_zoom" class="tf_zoom"></span>';
155       content  +='<img src="' + $tf_bg_images.eq(current).attr('longdesc') + '" alt="Thumb' + (current+1) + '"/>';
156       $tf_thumbs.html(content);
157     }
158     });
159 
160     //we get the next image
161     var $tf_bg_img_next = $tf_bg_images.eq(current),
162      //its dimentions
163      dim    = getImageDim($tf_bg_img_next),
164      //the top should be one that makes the image out of the viewport
165      //the image should be positioned up or down depending on the direction
166       top = (dir == 'tb')?$(window).height() + 'px':-parseFloat(dim.height,10) + 'px';
167 
168     //set the returned values and show the next image 
169      $tf_bg_img_next.css({
170       width : dim.width,
171       height : dim.height,
172       left : dim.left,
173       top  : top
174      }).show();
175 
176     //now slide it to the viewport
177      $tf_bg_img_next.stop().animate({
178       top  : dim.top
179      },1000);
180 
181     //we want the old image to slide in the same direction, out of the viewport
182      var slideTo = (dir == 'tb')?-$tf_bg_img.height() + 'px':$(window).height() + 'px';
183      $tf_bg_img.stop().animate({
184       top  : slideTo
185      },1000,function(){
186      //hide it
187       $(this).hide();
188      //the $tf_bg_img is now the shown image
189       $tf_bg_img = $tf_bg_img_next;
190      //show the description for the new image
191       $tf_content_wrapper.children()
192              .eq(current)
193                 .show();
194    });
195     //hide the current description 
196      $tf_content_wrapper.children(':visible')
197             .hide()
198 
199    }
200 
201    //animate the image to fit in the viewport
202    function resize($img){
203     var w_w = $(window).width(),
204      w_h = $(window).height(),
205      i_w = $img.width(),
206      i_h = $img.height(),
207      r_i = i_h / i_w,
208      new_w,new_h;
209 
210     if(i_w > i_h){
211      new_w = w_w;
212      new_h = w_w * r_i;
213 
214      if(new_h > w_h){
215       new_h = w_h;
216       new_w = w_h / r_i;
217      }
218     } 
219     else{
220      new_h = w_w * r_i;
221      new_w = w_w;
222     }
223 
224     $img.animate({
225      width : new_w + 'px',
226      height : new_h + 'px',
227      top  : '0px',
228      left : '0px'
229     },350);
230    }
231 
232    //get dimentions of the image, 
233    //in order to make it full size and centered
234    function getImageDim($img){
235     var w_w = $(window).width(),
236      w_h = $(window).height(),
237      r_w = w_h / w_w,
238      i_w = $img.width(),
239      i_h = $img.height(),
240      r_i = i_h / i_w,
241      new_w,new_h,
242      new_left,new_top;
243 
244     if(r_w > r_i){
245      new_h = w_h;
246      new_w = w_h / r_i;
247     }
248     else{
249      new_h = w_w * r_i;
250      new_w = w_w;
251     }
252 
253     return {
254      width : new_w + 'px',
255      height : new_h + 'px',
256      left : (w_w - new_w) / 2 + 'px',
257      top  : (w_h - new_h) / 2 + 'px'
258     };
259     }
260   });
261        </script>

5.Легко подключить плагин xnews.Пишите комментарии если что надо объяснить.

Можешь почитать и вот эту статейку "Размещаем рекламу в новости на твиге"

Это тоже интересно

Уважаемый посетитель, Вы зашли на сайт как незарегистрированный пользователь.
Мы рекомендуем Вам зарегистрироваться либо войти на сайт под своим именем.

Обновленное

Настройка плагиновПлагин XMenu для NG-CMS
Настройка плагиновГостевая книга:
РазноеПереезд часть 5 ... ошибки
РазноеПереезд часть 4 ... ошибки
РазноеПереезд часть 3
РазноеПереезд часть 2

Статистика

Caйту: 4765 дней
Новостей: 610
Комменты: 257
Зарегистрированно : 725
Онлайн всего: [9]
Гости: [9]
Были сегодня : [7] Google, dankeanke, Яндекс, Google, Google, Google, Matthewnus

SQL запросов: 33
Генерация страницы: 0.44сек
Потребление памяти: 6.134 Mb

Фоновое слайдшоу

Это тоже интересно

Популярное

Опрос

Ваше мнение

Последние комментарии

Ссылки

Обновленное

Архив

Теги

Статистика