code.grnet.gr Git - snf-cloudcms/blob - cloudcms/templates/content/intro_images.html

   1 <style>
   2     .content {
   3         margin: 0 auto;
   4         height: 100%;
   5     }
   6     .intro-img {
   7         cursor: pointer;
   8         border: none;
   9         position: absolute;
  10         left:0;
  11         right:0;
  12     }
  13     a {
  14         border: none;
  15         outline: none;
  16     }
  17     .fadeimg {
  18         position: absolute;
  19         display: none;
  20         border: none;
  21         left:0;
  22         top:0;
  23     }
  24     .images {
  25         width: 657px;
  26         height: 590px;
  27         position: absolute;
  28     }
  29 </style>
  30
  31 <script type="text/javascript">
  32     $(document).ready(function() {
  33         $(".content").css("width", "100%");
  34         var img = $(".images");
  35         var img_width = 657;
  36         var img_height = 590;
  37
  38         function recenter_img() {
  39             img.css("left", ($(window).width()/2 - img_width/2) + "px");
  40             img.css("top", ($(window).height()/2 - img_height/2) + "px");
  41         }
  42         recenter_img();
  43         $(window).resize(function(){
  44             recenter_img();
  45         });
  46
  47         function start_animation()
  48         {
  49             $(".fadeimg").fadeIn();
  50             $(".fadeimg").show();
  51         }
  52
  53         function stop_animation()
  54         {
  55             $(".fadeimg").fadeOut();
  56         }
  57
  58         var capture = ".images";
  59         $(capture).mouseenter(function(){
  60                 start_animation();
  61         })
  62         $(capture).mouseleave(function() {
  63                     stop_animation();
  64         });
  65         $(capture).mouseup(function() {
  66                 $(".intro-img").hide();
  67                 window.location = $("a.intro-link").attr("href");
  68         });
  69
  70         $(".images").mousedown(function(){
  71                 $(".intro-img").attr("{{ content.image_3.get_absolute_url }}");
  72                 $(".fadeimg").hide();
  73         });
  74
  75         $(".images").click(function(evn){
  76                 // evn.preventDefault();
  77                 // var to = $(window).width() + img_width + 100 + "px";
  78                 // $(".images").animate({"left": to}, 1000, function(){window.location = $("a.intro-link").attr("href")});
  79         });
  80     });
  81 </script>
  82
  83 <div class="images">
  84     <a class="intro-link" href="{{ content.link }}" title="{{ content.link_title }}">
  85         <img class="intro-img" src="{{ content.image_1.get_absolute_url }}" alt="{{ content.link_title }}" />
  86         <img class="fadeimg" src="{{ content.image_2.get_absolute_url }}" />
  87     </a>
  88 </div>