1 | <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "DTD/xhtml1-strict.dtd"> |
---|
2 | <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de" lang="de"> |
---|
3 | <!-- saved from url=(0013)about:internet --> |
---|
4 | <head> |
---|
5 | <title> |
---|
6 | Animated InnerFade with jquery |
---|
7 | </title> |
---|
8 | <!-- // |
---|
9 | |
---|
10 | ____________________________________________ |
---|
11 | |
---|
12 | Gestaltung und XHTML-Programmierung |
---|
13 | |
---|
14 | Medienfreunde GbR |
---|
15 | Arthur-Hoffmann-Straße 47 HH |
---|
16 | 04107 Leipzig |
---|
17 | |
---|
18 | +49 341 2 27 96 99 |
---|
19 | www.medienfreunde.com |
---|
20 | ____________________________________________ |
---|
21 | animated version : |
---|
22 | OpenStudio |
---|
23 | |
---|
24 | le bourg |
---|
25 | 43160 Saint Pal de Senouire |
---|
26 | +33 4 71 00 10 75 |
---|
27 | www.openstudio.fr |
---|
28 | ____________________________________________ |
---|
29 | |
---|
30 | --> |
---|
31 | |
---|
32 | <meta http-equiv="content-type" content="text/html; charset=utf-8" /> |
---|
33 | <meta http-equiv="imagetoolbar" content="no" /> |
---|
34 | |
---|
35 | <script type="text/javascript" src="js/jquery.js"></script> |
---|
36 | <script type="text/javascript" src="js/jquery.animated.innerfade.js"></script> |
---|
37 | <script type="text/javascript"> |
---|
38 | $(document).ready( |
---|
39 | function(){ |
---|
40 | |
---|
41 | |
---|
42 | $('ul#animated-panorama').animatedinnerfade({ |
---|
43 | speed: 2000, |
---|
44 | timeout: 15000, |
---|
45 | type: 'sequence', |
---|
46 | containerheight: '300px', |
---|
47 | containerwidth: '600px', |
---|
48 | animationSpeed: 15000, |
---|
49 | animationtype: 'fade', |
---|
50 | bgFrame: 'img/frame.png', |
---|
51 | controlBox: 'none', |
---|
52 | controlBoxClass: 'mycontrolboxclass', |
---|
53 | controlButtonsPath: 'img', |
---|
54 | displayTitle: 'yes' |
---|
55 | }); |
---|
56 | |
---|
57 | $('ul#animated-panorama').animatedinnerfade({ |
---|
58 | speed: 1000, |
---|
59 | timeout: 5000, |
---|
60 | type: 'random', |
---|
61 | containerheight: '300px', |
---|
62 | containerwidth: '270px', |
---|
63 | animationSpeed: 5000, |
---|
64 | animationtype: 'fade', |
---|
65 | bgFrame: 'none', |
---|
66 | controlBox: 'none', |
---|
67 | displayTitle: 'none' |
---|
68 | }); |
---|
69 | }); |
---|
70 | </script> |
---|
71 | |
---|
72 | <style> |
---|
73 | .innerfade-title{ |
---|
74 | position: absolute; |
---|
75 | bottom: 20px; |
---|
76 | left: 0; |
---|
77 | z-index: 290; |
---|
78 | width: 100%; |
---|
79 | background: #00a7ee url(img/title-bg.png); |
---|
80 | height: 34px; |
---|
81 | filter:alpha(opacity=80); |
---|
82 | -moz-opacity: 0.8; |
---|
83 | opacity: .8; |
---|
84 | border-top: 1px solid white; |
---|
85 | } |
---|
86 | .innerfade-title h2{ |
---|
87 | color: white; |
---|
88 | font-weight: bold; |
---|
89 | margin-top: 0; |
---|
90 | margin-bottom: 0; |
---|
91 | text-align: center; |
---|
92 | font-family: Arial; |
---|
93 | font-size: 16px; |
---|
94 | font-style: italic; |
---|
95 | line-height: 34px; |
---|
96 | } |
---|
97 | .mycontrolboxclass{ |
---|
98 | position: absolute; |
---|
99 | right: 35px; |
---|
100 | top: 20px; |
---|
101 | } |
---|
102 | .bg-frame img { behavior: url(win_png.htc); } |
---|
103 | </style> |
---|
104 | |
---|
105 | </head> |
---|
106 | <body> |
---|
107 | <h1>Animated Innerfade for jQuery</h1> |
---|
108 | |
---|
109 | <p>Online documentation : <a href="http://www.openstudio.fr/Animated-InnerFade-with-JQuery.html">http://www.openstudio.fr/Animated-InnerFade-with-JQuery.html</a></p> |
---|
110 | |
---|
111 | <h2>Exemple 1 : portfolio</h3> |
---|
112 | |
---|
113 | <ul id="animated-panorama"> |
---|
114 | <li> |
---|
115 | <a href="http://www.cc-plateau-chaisedieu.fr"><img src="images/cc-chaisedieu.jpg" alt="cc-chaise-dieu" title="Communauté de communes du Plateau de la Chaise-Dieu" width="400" height="411" /></a> |
---|
116 | </li> |
---|
117 | <li> |
---|
118 | <a href="http://www.casadart.fr"><img src="images/casadart.jpg" alt="OpenStudio" title="Casa d'Art" width="400" height="335" /></a> |
---|
119 | </li> |
---|
120 | <li> |
---|
121 | <a href="http://www.3bm.fr"><img src="images/3bm.jpg" alt="OpenStudio" title="Le Puy en Velay, Auvergne - vue depuis l'hôtel de région" width="400" height="411" /></a> |
---|
122 | </li> |
---|
123 | <li> |
---|
124 | <a href="http://www.aupanierdauvergne.fr"><img src="images/aupanierdauvergne.jpg" alt="OpenStudio" title="Le Puy en Velay, Auvergne - vue depuis l'hôtel de région" width="400" height="425" /></a> |
---|
125 | </li> |
---|
126 | |
---|
127 | </ul> |
---|
128 | |
---|
129 | <h2>Exemple 2 : panoramic views</h3> |
---|
130 | <ul id="animated-panorama"> |
---|
131 | <li> |
---|
132 | <a href="http://www.openstudio.fr"><img src="images/statue2.jpg" alt="openstudio" title="Le Puy en Velay, Auvergne - vue depuis la statue Notre Dame" width="1373" height="375" /></a> |
---|
133 | </li> |
---|
134 | <li> |
---|
135 | <a href="http://www.openstudio.fr"><img src="images/vue-puy-en-velay2-375.jpg" alt="OpenStudio" title="Le Puy en Velay, Auvergne - vue depuis le Rocher Corneille" width="1739" height="375" /></a> |
---|
136 | </li> |
---|
137 | <li> |
---|
138 | <a href="http://www.openstudio.fr"><img src="images/vue-puy-en-velay4-375.jpg" alt="OpenStudio" title="Le Puy en Velay, Auvergne - vue depuis l'hôtel de région" width="2099" height="375" /></a> |
---|
139 | </li> |
---|
140 | |
---|
141 | </ul> |
---|
142 | |
---|
143 | |
---|
144 | |
---|
145 | |
---|
146 | |
---|
147 | |
---|
148 | |
---|
149 | </div> |
---|
150 | |
---|
151 | <noscript> |
---|
152 | <div id="att"> |
---|
153 | <p>Sorry, you need to activate JavaScript in your browser.</p> |
---|
154 | </div> |
---|
155 | </noscript> |
---|
156 | </body> |
---|
157 | </html> |
---|