Ekstra menu / profil indhold her
Slider
Denne slider holder samme fart og der er ingen pause funktion når musen hviler på billdet.
Notat: sometider er der et hastighed problem når man scroller med musen. Arbejder på et fix.
-
Title text 1
Content text... Content text... -
Title text 2
Content text... Content text... -
Title text 2
Content text... Content text... -
Title text 2
Content text... Content text... -
Title text 2
Content text... Content text...
Notat 2: Det hjalp ikke at deaktivere scrolling for selve slider elementet - tilføjet på slider.js linje 11
1 element.hover(function() {
2 $(document).bind('mousewheel DOMMouseScroll',function(){
3 stopWheel();
4 });
5 }, function() {
6 $(document).unbind('mousewheel DOMMouseScroll');
7 });
8 function stopWheel(e){
9 if(!e){ /* IE7, IE8, Chrome, Safari */
10 e = window.event;
11 }
12 if(e.preventDefault) { /* Chrome, Safari, Firefox */
13 e.preventDefault();
14 }
15 e.returnValue = false; /* IE7, IE8 */
16 }Java Script file "slider.js".
1 (function($){
2 $.fn.slider = function(vars) {
3 var element = this;
4 var timeOut = (vars.timeOut != undefined) ? vars.timeOut : 4000;
5 var current = null;
6 var timeOutFn = null;
7 var faderStat = true;
8 var mOver = false;
9 var items = $("#" + element[0].id + "Content ." + element[0].id + "Image");
10 var itemsSpan = $("#" + element[0].id + "Content ." + element[0].id + "Image span");
11
12 items.each(function(i) {
13 $(items[i]).mouseover(function() {
14 /*mOver = true;*/
15 mOver = false;
16 fadeElement(true);
17 });
18 $(items[i]).mouseout(function() {
19 mOver = false;
20 fadeElement(true);
21 });
22 });
23
24 var fadeElement = function(isMouseOut) {
25 var thisTimeOut = (isMouseOut) ? (timeOut/2) : timeOut;
26 thisTimeOut = (faderStat) ? 10 : thisTimeOut;
27 if(items.length > 0) {
28 timeOutFn = setTimeout(makeSlider, thisTimeOut);
29 } else {
30 console.log("Poof..");
31 }
32 }
33
34 var makeSlider = function() {
35 current = (current != null) ? current : items[(items.length-1)];
36 var currNo = jQuery.inArray(current, items) + 1;
37 currNo = (currNo == items.length) ? 0 : (currNo - 1);
38 var newMargin = $(element).width() * currNo;
39 if(faderStat == true) {
40 if(!mOver) {
41 $(items[currNo]).fadeIn((timeOut/6), function() {
42 if($(itemsSpan[currNo]).css('bottom') == 0) {
43 $(itemsSpan[currNo]).slideUp((timeOut/6), function() {
44 faderStat = false;
45 current = items[currNo];
46 if(!mOver) {
47 fadeElement(false);
48 }
49 });
50 } else {
51 $(itemsSpan[currNo]).slideDown((timeOut/6), function() {
52 faderStat = false;
53 current = items[currNo];
54 if(!mOver) {
55 fadeElement(false);
56 }
57 });
58 }
59 });
60 }
61 } else {
62 if(!mOver) {
63 if($(itemsSpan[currNo]).css('bottom') == 0) {
64 $(itemsSpan[currNo]).slideDown((timeOut/6), function() {
65 $(items[currNo]).fadeOut((timeOut/6), function() {
66 faderStat = true;
67 current = items[(currNo+1)];
68 if(!mOver) {
69 fadeElement(false);
70 }
71 });
72 });
73 } else {
74 $(itemsSpan[currNo]).slideUp((timeOut/6), function() {
75 $(items[currNo]).fadeOut((timeOut/6), function() {
76 faderStat = true;
77 current = items[(currNo+1)];
78 if(!mOver) {
79 fadeElement(false);
80 }
81 });
82 });
83 }
84 }
85 }
86 }
87 makeSlider();
88 };
89 })(jQuery);Stylesheet.
1 <style type="text/css" media="screen">
2 #slider1 {
3 width: 830px;
4 height: 332px;
5 max-width: 100%;
6 max-height: 100%;
7 position: relative; /* important */
8 overflow: hidden; /* important */
9 }
10 #slider1Content {
11 width: 100%;
12 height:100%;
13 position: absolute;
14 top: 0;
15 margin:0;
16 padding:0;
17 }
18 .slider1Image > img {
19 width: 830px;
20 height: 332px;
21 max-width: 100%;
22 max-height: 100%;
23 }
24 .slider1Image {
25 float: left;
26 position: relative;
27 display: none;
28 }
29 .slider1Image span {
30 position: absolute;
31 font: 10px/15px Arial, Helvetica, sans-serif;
32 padding: 10px 13px;
33 width: 100%;
34 background-color: #000;
35 filter: alpha(opacity=70);
36 -moz-opacity: 0.7;
37 -khtml-opacity: 0.7;
38 opacity: 0.7;
39 color: #fff;
40 display: none;
41 }
42 .slider1clear {
43 clear: all;
44 }
45 .slider1Image span strong {
46 font-size: 14px;
47 }
48 .left {
49 top: 0;
50 left: 0;
51 width: 110px !important;
52 height: <?= ($height-20)?>px;
53 }
54 .right {
55 right: 0;
56 bottom: 0;
57 width: 90px !important;
58 height: <?= ($height-10)?>px;
59 }
60 #slider1Content > ul { list-style-type: none;}
61 </style>HTML.
1 <script type="text/javascript" src="/js/slider.js"></script>
2 <script type="text/javascript">
3 $(document).ready(function() {
4 $('#slider1').slider({
5 timeOut: 6000
6 });
7 });
8 </script>
9
10 <div id="slider1">
11 <ul id="slider1Content">
12 <li class="slider1Image">
13 <img src="/img/example_images/wide/1.jpg" alt="1" />
14 <span class="left"><strong>Title text 1</strong><br />Content text... Content text...</span></li>
15 <li class="slider1Image">
16 <img src="/img/example_images/wide/2.jpg" alt="2" />
17 <span class="right"><strong>Title text 2</strong><br />Content text... Content text...</span></li>
18 <li class="slider1Image">
19 <img src="/img/example_images/wide/3.jpg" alt="3" />
20 <span class="right"><strong>Title text 2</strong><br />Content text... Content text...</span></li>
21 <li class="slider1Image">
22 <img src="/img/example_images/wide/4.jpg" alt="4" />
23 <span class="left"><strong>Title text 2</strong><br />Content text... Content text...</span></li>
24 <li class="slider1Image">
25 <img src="/img/example_images/wide/5.jpg" alt="5" />
26 <span class="right"><strong>Title text 2</strong><br />Content text... Content text...</span></li>
27 <li class="slider1Image"></li>
28 </ul>
29 <div class="slider1clear slider1Image"></div>
30 </div>