panikweb_templates/templates/news/roll.html

   1 {% load thumbnails %}{% load i18n %}
   2 <div id="newsRoll">
   3         <div class="newsRoll center wrapper navigation cf">
   4                 <ul id="ticker" class="custom bigNews leftPart" style="height:360px;overflow:hidden;">
   5                         {% for content in news %}
   6                                 <li
   7                     id="newsRollId-{{ content.slug }}"
   8                     class="">
   9                                         <a
  10                         style="max-width:100%;height:360px;background: no-repeat 50% 50% url('{{ content.image|thumbnail:'800x600' }}');"
  11                         class="block news relative"
  12                         href="{% url 'newsitem-view' slug=content.slug %}">
  13                                                 {% if content.category %}
  14                                                         <div class="label labels absolute">
  15                                                                 <span class="item inBlock">{{ content.category.title }}</span>
  16                                                         </div>
  17                                                 {% endif %}
  18
  19                                                 <div class="title"><div>{{ content.title }}</div></div>
  20                                         </a>
  21                                 </li>
  22                         {% endfor %}
  23                 </ul>
  24                 <ul class="custom inline rightPart" id="roller">
  25                         {% for content in news %}
  26                                 <li class="num-{{ forloop.counter }}">
  27                                         <button class="inBlock" data-about="#newsRollId-{{ content.slug }}">
  28                                                 <img src="{{ content.image|thumbnail:'80x60' }}" />
  29                                         </button>
  30                                 </li>
  31                         {% endfor %}
  32                 </ul>
  33         <style>
  34         </style>
  35         <script>
  36         $(function() {
  37                 $('#ticker li:not(:first)');
  38                 var ticker_interval;
  39                 function tick(){
  40                     $('#ticker li:first').animate({'opacity':0}, 200, function () {
  41                         $(this).appendTo($('#ticker')).css('opacity', 1);
  42                     });
  43                 }
  44                 $("#roller button").on('click',function(e){
  45                     clearInterval(ticker_interval);
  46                     e.preventDefault();
  47                     $($(this).attr('data-about')).prependTo('#ticker');
  48                     return false;
  49                 });
  50                 ticker_interval = setInterval(function(){tick();  }, 5000);/**/
  51         });
  52         </script>
  53         </div>
  54 </div>