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
|
<!--
To change this template, choose Tools | Templates
and open the template in the editor.
-->
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<link rel="stylesheet" href="css-wttv.css" type="text/css" media="all" />
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$(document).ready(function() {
//Show Banner
$(".main_image .desc").show(); //Show Banner
$(".main_image .toptop").show(); //Show Banner
$(".main_image .block").animate({ opacity: 0.65 }, 1 ); //Set Opacity
$(".main_image .blocktop").animate({ opacity: 0.65}, 1 ); //Set Opacity
//Add class activ to the first thumbnail
$(".image_thumb ul li a img:first").addClass('active');
// neutralize the click action on img of the thumbnail
$(".image_thumb ul li a img").click(function(){
return false;
});
//Hover events for thumbnails
$(".image_thumb ul li a img").hover(function(){
//Set Variables
var imgAlt = $(this).parents(2).find('img').attr("alt"); //Get Alt Tag of Image
var imgTitle = $(this).parents(2).find('a').attr("href"); //Get Main Image URL
var htmlDesc = $(this).parents(2).find('.block').html(); //Get HTML of block
var htmlTop = $(this).parents(2).find('.blocktop').html(); //Get HTML of block
var imgDescHeight = $(".main_image").find('.block').height(); //Calculate height of block
var imgTopHeight = $(".main_image").find('.blocktop').height(); //Calculate height of blocktop
if ($(this).is(".active")) { //If it's already active, then...
return false; // Don't hover through
} else {
//Animate the picture
$(".main_image img").animate({ opacity: 0}, 500 , function() {
$(".main_image img").attr({ src: imgTitle , alt: imgAlt}).animate({ opacity: 1}, 500 );
});
//Animate the bottom block
$(".main_image .block").animate({marginBottom: -imgDescHeight }, 500 , function() {
$(".main_image .block").html(htmlDesc).animate({marginBottom: "0" }, 500 );
});
//Animate the top block
$(".main_image .blocktop").animate({marginTop: -imgTopHeight }, 500 , function() {
$(".main_image .blocktop").html(htmlTop).animate({marginTop: "0" }, 500 );
});
//Remove class of 'active' on all imgs
$(".image_thumb ul li a img").removeClass('active');
//add class of 'active' on this img only
$(this).addClass('active');
return false;
}
});
});//Close Function
</script>
</head>
<body>
<div class="cache_images_rotator">
<img src="images/gilles_1.jpg"/>
<img src="images/gilles_2.jpg"/>
<img src="images/gilles_tim_1.jpg"/>
</div><!--cache_images_rotator-->
<div class="container">
<h1>Image Gallery w/ Teaser - CSS & jQuery Tutorial d'après l'original avec un fadeout, la mise en cache des images et un return dans //Toggle Teaser pour éviter de bouger la page lorsque l'on collapse... Presentation à la wt et mot clé en haut... Toujours avec mes photos...<small>by Soh Tanaka</small></h1>
</div>
<div class="container">
<a href="http://designm.ag/tutorials/image-rotator-css-jquery/" target="_blank">Images Rotator : http://designm.ag/tutorials/image-rotator-css-jquery/</a>
</div>
<div id="main" class="container">
<div class="main_image">
<img src="images/gilles_1.jpg" alt="gilles_1"/>
<div class="toptop">
<div class="blocktop">
<p>haut 1</p>
</div><!--.blocktop-->
</div><!--.toptop-->
<div class="desc">
<div class="block">
<h2><a href="http://www.google.fr">Slowing Down</a></h2>
<p>Autem conventio nimis quis ad, nisl secundum sed, facilisi, vicis augue regula, ratis, autem. Neo nostrud letatio aliquam validus eum quadrum, volutpat et <b>par Robomatix le robot</b>.</p>
</div><!--.block-->
</div><!--.desc-->
</div><!--.main_image-->
<div class="image_thumb">
<ul>
<li>
<a href="images/gilles_1.jpg"><img src="images/gilles_1_thumb.jpg" alt="Slowing Dow" /></a>
<div class="blocktop">
<p>haut 1</p>
</div><!--.blocktop-->
<div class="block">
<h2><a href="http://www.google.fr">Slowing Down</a></h2>
<p>Autem conventio nimis quis ad, nisl secundum sed, facilisi, vicis augue regula, ratis, autem. Neo nostrud letatio aliquam validus eum quadrum, volutpat et <b>par Robomatix le robot</b>.</p>
</div><!--.block-->
</li>
<li>
<a href="images/gilles_2.jpg"><img src="images/gilles_2_thumb.jpg" alt="Organized Food Fight" /></a>
<div class="blocktop">
<p>haut 2</p>
</div><!--.blocktop-->
<div class="block">
<h2><a href="http://an200.machinesculte.net">Robomatix the clown</a></h2>
<p>The clown Autem conventio nimis quis ad, nisl secundum sed, facilisi, vicis augue regula, ratis, autem. Neo nostrud letatio aliquam validus eum quadrum, volutpat et <b>par Robomatix le robot</b>.</p>
</div><!--.block-->
</li>
<li>
<a href="images/gilles_tim_1.jpg"><img src="images/gilles_tim_1_thumb.jpg" alt="Endangered Species" /></a>
<div class="blocktop">
<p>haut 3</p>
</div><!--.blocktop-->
<div class="block">
<h2><a href="http://www.machinesculte.net">Le duo infernal</a></h2>
<p>Duo Autem conventio nimis quis ad, nisl secundum sed, facilisi, vicis augue regula, ratis, autem. Neo nostrud letatio aliquam validus eum quadrum, volutpat et <b>par Robomatix le robot</b>.</p>
</div><!--.block-->
</li>
</ul>
</div><!--#image_thumb-->
</div><!--#main-->
</body>
</html> |
