Statistics
| Branch: | Tag: | Revision:

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

History | View | Annotate | Download (2.3 kB)

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>