-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
173 lines (135 loc) · 7.39 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
<!DOCTYPE html>
<html>
<head>
<title>Meet Mizi</title>
<link rel="stylesheet" href="fancybox/jquery.fancybox.css">
<link rel="stylesheet" href="stylesheet.css">
<link href='http://fonts.googleapis.com/css?family=Droid+Serif:400,400italic|Open+Sans:300italic,400italic,400,300' rel='stylesheet' type='text/css'>
<link href='http://fonts.googleapis.com/css?family=Quicksand:400,700|Droid+Serif:400
,400italic' rel='stylesheet' type='text/css'>
<link href='http://fonts.googleapis.com/css?family=Poiret+One' rel='stylesheet' type='text/css'>
<link href='http://fonts.googleapis.com/css?family=Oleo+Script:400,700' rel='stylesheet' type='text/css'>
<link rel="icon" href="images/cat/favicon.ico">
</head>
<body>
<div class="container clearfix">
<div class="gallery">
<h1>Meet Mitzi
<img src="images/cat/yarn.png" alt="ball of yarn image">
</h1>
<div class="full">
<!-- first image is viewable to start -->
<a class="popup" href="images/cat/mitzi-1.jpg"><img src="images/cat/mitzi-1.jpg"></a>
</div>
<div class="triContain">
<h2 class="title part-part1">PART 1</h2>
<h2 class="title part-part2">PART 2</h2>
<h2 class="title part-part3">PART 3</h2>
<h2 class="title part-part4">PART 4</h2>
<h2 class="title part-part5">PART 5</h2>
<h2 class="title part-part6">PART 6</h2>
<div class="triangle"></div>
<div class="triangle2"></div>
</div>
<div class="story story-step1">
<p>
Hi there, my name is Mitzi. Every day when my human goes to work, I sit by the window and wonder what it's like to be on the other side. I listen to the birds chirping, the sounds of distant traffic, and have conversations with the occasional squirrel.
</p>
</div>
<div class="story story-step2">
<p>
I am only 2 years old, but I have big aspirations to be a traveling cat. Life is good: I have plenty of food, and I get a lot of cuddles. Sometimes though, I think there must be more beyond these apartment walls! If only I wasn't so scared to leave my home.
</p>
</div>
<div class="story story-step3">
<p>
I look at photos of far-away places all the time. Near the top on my list of places to visit would be Amsterdam. Do you think this box fits me? Rawr, I am Godzilla-Cat!
</p>
</div>
<div class="story story-step4">
<p>
What a difference it would make to really travel, and to feel a change in the air which tells me I am no longer in Toronto. I will spend my days chasing seagulls by the canals, and hop from the roofs of houseboats.
</p>
</div>
<div class="story story-step5">
<p>
When I am ready for my next destination, I will simply get on a train. I will watch the lush foreign landscapes go by, eating salmon pate and sipping water from the comfort of my window seat. Just name a destination, and I am there!
</p>
</div>
<div class="story story-step6">
<p>
Do you think I have what it takes to make it abroad? I have big pointy ears, a fluffy tail, and hair between my toes. My charm is undeniable. My human tells me that my grandmother was a Maine Coon, which is where I got my stunning looks.
</p>
</div>
<div class="previewBar clearfix">
<span id="panLeft" class="panner" data-scroll-modifier='-1'></span>
<div class="previews clearfix">
<a href="#" class="selected" data-full="images/cat/mitzi-1.jpg" data-caption="step1" data-title="part1"><img src="images/cat/mitzi-1-small.jpg" /></a>
<a href="#" data-full="images/cat/mitzi-2.jpg" data-caption="step2" data-title="part2"><img src="images/cat/mitzi-2-small.jpg" /></a>
<a href="#" data-full="images/cat/mitzi-3.jpg" data-caption="step3" data-title="part3"><img src="images/cat/mitzi-3-small.jpg" /></a>
<a href="#" data-full="images/cat/mitzi-4.jpg" data-caption="step4" data-title="part4"><img src="images/cat/mitzi-4-small.jpg" /></a>
<a href="#" data-full="images/cat/mitzi-5.jpg" data-caption="step5" data-title="part5"><img src="images/cat/mitzi-5-small.jpg" /></a>
<a href="#" data-full="images/cat/mitzi-6.jpg" data-caption="step6" data-title="part6"><img src="images/cat/mitzi-6-small.jpg" height="75" width="100" /></a>
</div>
<span id="panRight" class="panner" data-scroll-modifier='1'></span>
</div> <!-- previewBar -->
</div>
</div>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="fancybox/jquery.fancybox.js?v=2.1.4"></script>
<script src="plugins/jquery.loupe.min.js"></script>
<script src="plugins/fadeoverimage.js"></script>
<script>
$(function() {
$('.previews a').on('click',function(){
var source = $(this).data('full'); // the link info for the big images are in data-full
$('.full img').attr('src', source); // look for images with a parent of class .full, and set their sources to data-full
$('.popup').attr('href', source); // the popup attribute is the href, and set the same source as the full image
$('.selected').removeClass('selected'); // look for things with the selected class and remove them
$(this).addClass('selected'); // on this item with class of previews a, add a class of selected
$('.full img').hide().fadeIn(400); // on click, hide the full image that's already there, then fade in a new one
var caption = $(this).data('caption');
$('.story').hide();
$('.story-' + caption).show();
var part = $(this).data('title');
$('.title').hide();
$('.part-' + part).show();
$('.triangle').toggleClass('peachpuff');
});
$('a.popup').on('click', function(e) {
e.preventDefault(); // the default when you click on anchor link with href is to open the link in the same window. we have to prevent this with preventDefault
$.fancybox(this); // open the link that's in the a.popup in the fancybox
});
//Scrolling arrows
var scrollHandle = 0,
scrollStep = 5,
parent = $('.previews');
//Start the scrolling process
$(".panner").on("mouseenter", function () {
var data = $(this).data('scrollModifier'),
direction = parseInt(data, 10);
$(this).addClass('active');
startScrolling(direction, scrollStep);
});
//Kill the scrolling
$(".panner").on("mouseleave", function () {
stopScrolling();
$(this).removeClass('active');
});
//Actual handling of the scrolling
function startScrolling(modifier, step) {
if (scrollHandle === 0) {
scrollHandle = setInterval(function () {
var newOffset = parent.scrollLeft() + (scrollStep * modifier);
parent.scrollLeft(newOffset);
}, 10);
}
}
function stopScrolling() {
clearInterval(scrollHandle);
scrollHandle = 0;
}
});
</script>
</body>
</html>