Statistics
| Branch: | Tag: | Revision:

root / cloudcms / templates / content / intro_images.html @ d35930c2

History | View | Annotate | Download (2.3 kB)

1 d35930c2 Kostas Papadimitriou
<style>
2 d35930c2 Kostas Papadimitriou
    .content {
3 d35930c2 Kostas Papadimitriou
        margin: 0 auto;
4 d35930c2 Kostas Papadimitriou
        height: 100%;
5 d35930c2 Kostas Papadimitriou
    }
6 d35930c2 Kostas Papadimitriou
    .intro-img {
7 d35930c2 Kostas Papadimitriou
        cursor: pointer;
8 d35930c2 Kostas Papadimitriou
        border: none;
9 d35930c2 Kostas Papadimitriou
        position: absolute;
10 d35930c2 Kostas Papadimitriou
        left:0;
11 d35930c2 Kostas Papadimitriou
        right:0;
12 d35930c2 Kostas Papadimitriou
    }
13 d35930c2 Kostas Papadimitriou
    a {
14 d35930c2 Kostas Papadimitriou
        border: none;
15 d35930c2 Kostas Papadimitriou
        outline: none;
16 d35930c2 Kostas Papadimitriou
    }
17 d35930c2 Kostas Papadimitriou
    .fadeimg {
18 d35930c2 Kostas Papadimitriou
        position: absolute;
19 d35930c2 Kostas Papadimitriou
        display: none;
20 d35930c2 Kostas Papadimitriou
        border: none;
21 d35930c2 Kostas Papadimitriou
        left:0;
22 d35930c2 Kostas Papadimitriou
        top:0;
23 d35930c2 Kostas Papadimitriou
    }
24 d35930c2 Kostas Papadimitriou
    .images {
25 d35930c2 Kostas Papadimitriou
        width: 657px;
26 d35930c2 Kostas Papadimitriou
        height: 590px;
27 d35930c2 Kostas Papadimitriou
        position: absolute;
28 d35930c2 Kostas Papadimitriou
    }
29 d35930c2 Kostas Papadimitriou
</style>
30 d35930c2 Kostas Papadimitriou
31 d35930c2 Kostas Papadimitriou
<script type="text/javascript">
32 d35930c2 Kostas Papadimitriou
    $(document).ready(function() {
33 d35930c2 Kostas Papadimitriou
        $(".content").css("width", "100%");
34 d35930c2 Kostas Papadimitriou
        var img = $(".images");
35 d35930c2 Kostas Papadimitriou
        var img_width = 657;
36 d35930c2 Kostas Papadimitriou
        var img_height = 590;
37 d35930c2 Kostas Papadimitriou

38 d35930c2 Kostas Papadimitriou
        function recenter_img() {
39 d35930c2 Kostas Papadimitriou
            img.css("left", ($(window).width()/2 - img_width/2) + "px");
40 d35930c2 Kostas Papadimitriou
            img.css("top", ($(window).height()/2 - img_height/2) + "px");
41 d35930c2 Kostas Papadimitriou
        }
42 d35930c2 Kostas Papadimitriou
        recenter_img();
43 d35930c2 Kostas Papadimitriou
        $(window).resize(function(){
44 d35930c2 Kostas Papadimitriou
            recenter_img();
45 d35930c2 Kostas Papadimitriou
        });
46 d35930c2 Kostas Papadimitriou

47 d35930c2 Kostas Papadimitriou
        function start_animation()
48 d35930c2 Kostas Papadimitriou
        {
49 d35930c2 Kostas Papadimitriou
            $(".fadeimg").fadeIn();
50 d35930c2 Kostas Papadimitriou
            $(".fadeimg").show();
51 d35930c2 Kostas Papadimitriou
        }
52 d35930c2 Kostas Papadimitriou

53 d35930c2 Kostas Papadimitriou
        function stop_animation()
54 d35930c2 Kostas Papadimitriou
        {
55 d35930c2 Kostas Papadimitriou
            $(".fadeimg").fadeOut();
56 d35930c2 Kostas Papadimitriou
        }
57 d35930c2 Kostas Papadimitriou
        
58 d35930c2 Kostas Papadimitriou
        var capture = ".images";
59 d35930c2 Kostas Papadimitriou
        $(capture).mouseenter(function(){
60 d35930c2 Kostas Papadimitriou
                start_animation();
61 d35930c2 Kostas Papadimitriou
        })
62 d35930c2 Kostas Papadimitriou
        $(capture).mouseleave(function() {
63 d35930c2 Kostas Papadimitriou
                    stop_animation();
64 d35930c2 Kostas Papadimitriou
        });
65 d35930c2 Kostas Papadimitriou
        $(capture).mouseup(function() {
66 d35930c2 Kostas Papadimitriou
                $(".intro-img").hide();
67 d35930c2 Kostas Papadimitriou
                window.location = $("a.intro-link").attr("href");
68 d35930c2 Kostas Papadimitriou
        });
69 d35930c2 Kostas Papadimitriou

70 d35930c2 Kostas Papadimitriou
        $(".images").mousedown(function(){
71 d35930c2 Kostas Papadimitriou
                $(".intro-img").attr("{{ content.image_3.get_absolute_url }}");
72 d35930c2 Kostas Papadimitriou
                $(".fadeimg").hide();
73 d35930c2 Kostas Papadimitriou
        });
74 d35930c2 Kostas Papadimitriou

75 d35930c2 Kostas Papadimitriou
        $(".images").click(function(evn){
76 d35930c2 Kostas Papadimitriou
                // evn.preventDefault();
77 d35930c2 Kostas Papadimitriou
                // var to = $(window).width() + img_width + 100 + "px";
78 d35930c2 Kostas Papadimitriou
                // $(".images").animate({"left": to}, 1000, function(){window.location = $("a.intro-link").attr("href")});
79 d35930c2 Kostas Papadimitriou
        });
80 d35930c2 Kostas Papadimitriou
    });
81 d35930c2 Kostas Papadimitriou
</script>
82 d35930c2 Kostas Papadimitriou
83 d35930c2 Kostas Papadimitriou
<div class="images">
84 d35930c2 Kostas Papadimitriou
    <a class="intro-link" href="{{ content.link }}" title="{{ content.link_title }}">
85 d35930c2 Kostas Papadimitriou
        <img class="intro-img" src="{{ content.image_1.get_absolute_url }}" alt="{{ content.link_title }}" />
86 d35930c2 Kostas Papadimitriou
        <img class="fadeimg" src="{{ content.image_2.get_absolute_url }}" />
87 d35930c2 Kostas Papadimitriou
    </a>
88 d35930c2 Kostas Papadimitriou
</div>