idatavisualizationlab.github.io/homeSlide.html at master · iDataVisualizationLab/idatavisualizationlab.github.io · GitHub

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

<!DOCTYPE html>
<!-- Camera is a Pixedelic free jQuery slideshow | Manuel Masia (designer and developer) -->
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" >
    <title>Camera | a free jQuery slideshow by Pixedelic</title>
    <meta name="description" content="Camera a free jQuery slideshow with many effects, transitions, adaptive layout, easy to customize, using canvas and mobile ready">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!--///////////////////////////////////////////////////////////////////////////////////////////////////
    //
    //		Styles
    //
    ///////////////////////////////////////////////////////////////////////////////////////////////////-->
    <link rel='stylesheet' id='camera-css'  href='./css/camera.css' type='text/css' media='all'>
    <style>
		body {
			margin: 0;
			padding: 0;
		}
		a {
			color: #09f;
		}
		a:hover {
			text-decoration: none;
		}
		#back_to_camera {
			clear: both;
			display: block;
			height: 80px;
			line-height: 40px;
			padding: 20px;
		}
		.fluid_container {
			margin: 0 auto;
			max-width: 1000px;
			width: 90%;
		}
		.camera_thumbs{
			display: none;
		}
        .cameraContents{
            height: 370px;
        }
        ::-webkit-scrollbar {
        display: none;
        }
        .camera_wrap div{
            max-height: 370px;
        }
        .camera_wrap a{
            color: #ad4242;
        }
	</style>

    <!--///////////////////////////////////////////////////////////////////////////////////////////////////
    //
    //		Scripts
    //
    ///////////////////////////////////////////////////////////////////////////////////////////////////-->

    <script type='text/javascript' src='./js/jquery.min.js'></script>
    <script type='text/javascript' src='./js/jquery.mobile.customized.min.js'></script>
    <script type='text/javascript' src='./js/jquery.easing.1.3.js'></script>
    <script type='text/javascript' src='./js/camera.js'></script>

    <script>
		jQuery(function(){
			jQuery('#camera_wrap_3').camera({
				height: '370px',
				loader: 'bar',
				pagination: false,
				thumbnails: true,
				imagePath: '../images/',
				time: 4500
			});
		});
	</script>

</head>
<body>

<div class="fluid_container" style="width: 750px; height: 370px;">
    <div class="camera_wrap camera_emboss" id="camera_wrap_3" style="height: 370px;">
        <div data-src="images/figures/idvRact2.gif" data-time="1000" data-thumb="" data-trasPeriod="5000" data-target="_blank">
            <div class="camera_caption fadeFromBottom">
                Interactive visualization for <a href="php/news.php?id=5" target="_blank"> rotorcraft aviation</a>
            </div>
        </div>

        <div data-src="images/figures/HPCCtemp.gif" data-time="1000" data-thumb="" data-trasPeriod="5000" data-target="_blank">
            <div class="camera_caption fadeFromBottom">
                Monitoring Health Status of <a href="php/news.php?id=6" target="_blank"> High Performance Computing Systems</a>
            </div>
        </div>

        <div data-src="images/figures/diasterVR.gif" data-time="1000" data-thumb="" data-trasPeriod="4000" data-target="_blank">
            <div class="camera_caption fadeFromBottom">
                Virtual simulations of <a href="php/news.php?id=8" target="_blank"> disaster evacuation</a>
            </div>
        </div>

        <div data-src="images/figures/maingif.gif" data-time="1000" data-thumb="" data-trasPeriod="4000" data-target="_blank">
            <div class="camera_caption fadeFromBottom">
                3D web modeling
            </div>
        </div>

        <div data-src="images/figures/Soil3.png" data-time="500" data-thumb="" data-trasPeriod="4000" data-target="_blank">
            <div class="camera_caption fadeFromBottom">
                Soil chemical analysis for the <a href="php/news.php?id=2" target="_blank">Olympus Handheld XRF</a>
            </div>
        </div>

        <div data-src="images/figures/eduAvatar.png" data-time="500" data-thumb="" data-trasPeriod="4000" data-target="_blank">
            <div class="camera_caption fadeFromBottom">
                Teaching Foreign Language Pronunciation through  <a href="php/news.php?id=9" target="_blank">Educational Avatars.</a>
            </div>
        </div>


        <div data-src="https://github.com/iDataVisualizationLab/webFiles/raw/master/labWeb/images/projects/bioLinker.png" data-time="1000" data-thumb="" data-trasPeriod="4000" data-target="_blank">
            <div class="camera_caption fadeFromBottom">
                <a href="https://github.com/iDataVisualizationLab/BioLinker/raw/master/files/BioLinker.pdf"> BioLinker</a>: Bottom-up Exploration of Protein Interaction Networks.
            </div>
        </div>

<!--        <div data-src="images/pics/Tommy2.jpg">-->
<!--            <div class="camera_caption fadeFromBottom">-->
<!--                Experiencing VR environment of underground water saturated thickness using Oculus Rift.-->
<!--            </div>-->
<!--        </div>-->
    </div><!-- #camera_wrap_3 -->

</div><!-- .fluid_container -->
    <!-- <div style="clear:both; display:block; height:100px"></div> -->
</body>
</html>