2 scripts, 1 pagina en ze vinden elkaar niet aardig
Hierop staat een script voor het draaiende krijgen van een slideshow
en daarnaast wil ik een lightbox instellen waarin de foto's worden geshowd.
apart van elkaar werken ze goed, bij elkaar niet!
de website staat op http://www.escapefromeden.com/demotest.html
hieronder de pagina in html:
Code (php)
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
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
<!DOCTYPE html>
<html><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>escape from eden</title>
<!-- the CSS for Smooth Div Scroll -->
<link rel="Stylesheet" type="text/css" href="./demo/smoothDivScroll.css">
<!-- Styles for my specific scrolling content -->
<style type="text/css">
#makeMeScrollable
{
width:100%;
height: 350px;
position: relative;
}
#makeMeScrollable div.scrollableArea img
{
position: relative;
float: left;
margin: 0;
padding: 0;
/* If you don't want the images in the scroller to be selectable, try the following
block of code. It's just a nice feature that prevent the images from
accidentally becoming selected/inverted when the user interacts with the scroller. */
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-o-user-select: none;
user-select: none;
}
</style>
<!-- iframe test -->
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
<script>
!window.jQuery && document.write('<script src="jquery-1.4.3.min.js"><\/script>');
</script>
<script type="text/javascript" src="fancybox/jquery.mousewheel-3.0.4.pack.js"></script>
<script type="text/javascript" src="fancybox/jquery.fancybox-1.3.4.pack.js"></script>
<link rel="stylesheet" type="text/css" href="fancybox/jquery.fancybox-1.3.4.css" media="screen" />
<link rel="stylesheet" href="style.css" />
<script type="text/javascript">
$(document).ready(function() {
$("#lightbox1").fancybox({
'width' : '75%',
'height' : '75%',
'autoScale' : false,
'transitionIn' : 'none',
'transitionOut' : 'none',
'type' : 'iframe'
});
});
</script>
<!-- einde test -->
</head>
<body style="">
<br>
<br>
<div id="makeMeScrollable"><div class="scrollingHotSpotLeft" style="display: block; opacity: 0;"></div><div class="scrollingHotSpotRight" style="opacity: 0;"></div><div class="scrollWrapper"><div class="scrollableArea" style="width: 3784px;">
<a id="lightbox1" href="demo/1/index.html"><img src="./demo/1.jpg"></a>
<img src="./demo/2.jpg" alt="Gnome" id="gnome">
<img src="./demo/3.jpg" alt="Pencils" id="pencils">
<img src="./demo/4.jpg" alt="Golf" id="golf">
<img src="./demo/5.jpg" alt="River" id="river">
<img src="./demo/6.jpg" alt="Train" id="train">
<img src="./demo/7.jpg" alt="Leaf" id="leaf">
</div></div></div>
<!-- LOAD JAVASCRIPT LATE - JUST BEFORE THE BODY TAG
That way the browser will have loaded the images
and will know the width of the images. No need to
specify the width in the CSS or inline. -->
<!-- jQuery library - Please load it from Google API's -->
<script src="./demo/jquery.min.js" type="text/javascript"></script>
<!-- jQuery UI Widget and Effects Core (custom download)
You can make your own at: http://jqueryui.com/download -->
<script src="./demo/jquery-ui-1.10.3.custom.min.js" type="text/javascript"></script>
<!-- Latest version of jQuery Mouse Wheel by Brandon Aaron
You will find it here: http://brandonaaron.net/code/mousewheel/demos -->
<script src="./demo/jquery.mousewheel.min.js" type="text/javascript"></script>
<!-- jQuery Kinetic - for touch -->
<script src="./demo/jquery.kinetic.min.js" type="text/javascript"></script>
<!-- Smooth Div Scroll 1.3 minified -->
<script src="./demo/jquery.smoothdivscroll-1.3-min.js" type="text/javascript"></script>
<!-- If you want to look at the uncompressed version you find it at
js/source/jquery.smoothDivScroll-1.3.js -->
<!-- Plugin initialization -->
<script type="text/javascript">
// Initialize the plugin with no custom options
$(document).ready(function () {
// None of the options are set
$("div#makeMeScrollable").smoothDivScroll({});
});
</script>
</body></html>
<html><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>escape from eden</title>
<!-- the CSS for Smooth Div Scroll -->
<link rel="Stylesheet" type="text/css" href="./demo/smoothDivScroll.css">
<!-- Styles for my specific scrolling content -->
<style type="text/css">
#makeMeScrollable
{
width:100%;
height: 350px;
position: relative;
}
#makeMeScrollable div.scrollableArea img
{
position: relative;
float: left;
margin: 0;
padding: 0;
/* If you don't want the images in the scroller to be selectable, try the following
block of code. It's just a nice feature that prevent the images from
accidentally becoming selected/inverted when the user interacts with the scroller. */
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-o-user-select: none;
user-select: none;
}
</style>
<!-- iframe test -->
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
<script>
!window.jQuery && document.write('<script src="jquery-1.4.3.min.js"><\/script>');
</script>
<script type="text/javascript" src="fancybox/jquery.mousewheel-3.0.4.pack.js"></script>
<script type="text/javascript" src="fancybox/jquery.fancybox-1.3.4.pack.js"></script>
<link rel="stylesheet" type="text/css" href="fancybox/jquery.fancybox-1.3.4.css" media="screen" />
<link rel="stylesheet" href="style.css" />
<script type="text/javascript">
$(document).ready(function() {
$("#lightbox1").fancybox({
'width' : '75%',
'height' : '75%',
'autoScale' : false,
'transitionIn' : 'none',
'transitionOut' : 'none',
'type' : 'iframe'
});
});
</script>
<!-- einde test -->
</head>
<body style="">
<br>
<br>
<div id="makeMeScrollable"><div class="scrollingHotSpotLeft" style="display: block; opacity: 0;"></div><div class="scrollingHotSpotRight" style="opacity: 0;"></div><div class="scrollWrapper"><div class="scrollableArea" style="width: 3784px;">
<a id="lightbox1" href="demo/1/index.html"><img src="./demo/1.jpg"></a>
<img src="./demo/2.jpg" alt="Gnome" id="gnome">
<img src="./demo/3.jpg" alt="Pencils" id="pencils">
<img src="./demo/4.jpg" alt="Golf" id="golf">
<img src="./demo/5.jpg" alt="River" id="river">
<img src="./demo/6.jpg" alt="Train" id="train">
<img src="./demo/7.jpg" alt="Leaf" id="leaf">
</div></div></div>
<!-- LOAD JAVASCRIPT LATE - JUST BEFORE THE BODY TAG
That way the browser will have loaded the images
and will know the width of the images. No need to
specify the width in the CSS or inline. -->
<!-- jQuery library - Please load it from Google API's -->
<script src="./demo/jquery.min.js" type="text/javascript"></script>
<!-- jQuery UI Widget and Effects Core (custom download)
You can make your own at: http://jqueryui.com/download -->
<script src="./demo/jquery-ui-1.10.3.custom.min.js" type="text/javascript"></script>
<!-- Latest version of jQuery Mouse Wheel by Brandon Aaron
You will find it here: http://brandonaaron.net/code/mousewheel/demos -->
<script src="./demo/jquery.mousewheel.min.js" type="text/javascript"></script>
<!-- jQuery Kinetic - for touch -->
<script src="./demo/jquery.kinetic.min.js" type="text/javascript"></script>
<!-- Smooth Div Scroll 1.3 minified -->
<script src="./demo/jquery.smoothdivscroll-1.3-min.js" type="text/javascript"></script>
<!-- If you want to look at the uncompressed version you find it at
js/source/jquery.smoothDivScroll-1.3.js -->
<!-- Plugin initialization -->
<script type="text/javascript">
// Initialize the plugin with no custom options
$(document).ready(function () {
// None of the options are set
$("div#makeMeScrollable").smoothDivScroll({});
});
</script>
</body></html>
ik hoop dat iemand mij hier mee kan helpen!!!
groetjes gerwin
- Aar -:
Gelieve in het vervolg bij code de [code][/code]-tags gebruiken.
Alvast bedankt!
Alvast bedankt!
Gewijzigd op 21/01/2014 13:33:50 door - Ariën -
Kijk eens goed naar de comments op lijn 80.
zou je me misschien een concrete oplossing kunnen geven?
ik hoop het.
groetjes
Toevoeging op 21/01/2014 13:44:54:
Jaaaahhhh hij doet het!!
toch nog even verdiept in regel 80!
dank!
(en daar ben ik al 3 dagen mee bezig...)
Gewijzigd op 21/01/2014 13:45:26 door gerwin vis