source: extensions/Panoramas/jquery.animated.innerfade/index.htm @ 3339

Last change on this file since 3339 was 3339, checked in by vdigital, 15 years ago

+ Add Front2Back to depository
+ Add Panoramas to depository

File size: 4.9 KB
Line 
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&eacute; 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&ocirc;tel de r&eacute;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&ocirc;tel de r&eacute;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&ocirc;tel de r&eacute;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>
Note: See TracBrowser for help on using the repository browser.