JQ img rotator & Fancybox combineren
Code (php)
1
2
3
4
5
6
7
8
9
10
11
2
3
4
5
6
7
8
9
10
11
$(function(){
$('#foto1 img:gt(0)').hide();
setInterval(function(){
$('#foto1 :first-child').fadeOut(300).next('img').fadeIn(fading).end().appendTo('#foto1');}, 2000);
});
<div id="foto1">
<img class="serie" src="img_8726.jpg" alt=" " width="160" height="120" />
<img class="serie" src="img_8647.jpg" alt=" " width="160" height="120" />
<img class="serie" src="img_8720.jpg" alt=" " width="160" height="120" />
</div>
$('#foto1 img:gt(0)').hide();
setInterval(function(){
$('#foto1 :first-child').fadeOut(300).next('img').fadeIn(fading).end().appendTo('#foto1');}, 2000);
});
<div id="foto1">
<img class="serie" src="img_8726.jpg" alt=" " width="160" height="120" />
<img class="serie" src="img_8647.jpg" alt=" " width="160" height="120" />
<img class="serie" src="img_8720.jpg" alt=" " width="160" height="120" />
</div>
Roteert prima !
Ik wil dit samen met Fancybox gebruiken. (klik voor de grootte overlay foto)
Code (php)
1
$(".serie").fancybox();
Echter Fancybox vereist een <a> tag, een link voor de naam vd grootte foto !
Ik moet het daarom als volgt aanpassen:
Code (php)
1
2
2
<div id="foto1">
<a class="serie" href="groot/img_8726.jpg"> <img class="serie" src="img_8726.jpg" /> </a>
<a class="serie" href="groot/img_8726.jpg"> <img class="serie" src="img_8726.jpg" /> </a>
etc. ......
Echter (hij werkt dan niet meer) de fotorotator snapt dat niet, kan de img dat niet meer localiseren....
Heb ook laten zoeken naar a (ipv img) werkt ook niet,
Heb in een div geprobeerd: <div> <a class="serie" href="groot/img_8726.jpg"> <img class="serie" src="img_8726.jpg" /> </a> </div>
en dan de div laten zoeken/hiden
Hoe kan ik in JQ schrijven dat hij de link mét de foto als 1 geheel ziet .... ( en het hide en de volgende weer infade...)
bvd
of andere tips om zoiets te doen
Gewijzigd op 15/08/2013 11:46:27 door - Roland -
Code (php)
1
2
3
4
5
6
7
8
9
10
11
2
3
4
5
6
7
8
9
10
11
$(function(){
$('#foto1 img:gt(0)').hide();
setInterval(function(){
$('#foto1 :first-child').fadeOut(300).next('a').find('img').fadeIn(fading).end().appendTo('#foto1');}, 2000);
});
<div id="foto1">
<a class="serie" href="groot/img_8726.jpg"> <img class="serie" src="img_8726.jpg" width="160" height="120" /> </a>
<a class="serie" href="groot/img_8647.jpg"> <img class="serie" src="img_8647.jpg" width="160" height="120" /> </a>
<a class="serie" href="groot/img_8720.jpg"> <img class="serie" src="img_8720.jpg" width="160" height="120" /> </a>
</div>
$('#foto1 img:gt(0)').hide();
setInterval(function(){
$('#foto1 :first-child').fadeOut(300).next('a').find('img').fadeIn(fading).end().appendTo('#foto1');}, 2000);
});
<div id="foto1">
<a class="serie" href="groot/img_8726.jpg"> <img class="serie" src="img_8726.jpg" width="160" height="120" /> </a>
<a class="serie" href="groot/img_8647.jpg"> <img class="serie" src="img_8647.jpg" width="160" height="120" /> </a>
<a class="serie" href="groot/img_8720.jpg"> <img class="serie" src="img_8720.jpg" width="160" height="120" /> </a>
</div>
Het probleem zit, denk ik, dat first-child nu niet meer de img is maar de <a>
(én als je het via de <a> pakt moet hij ook de img in die a meenemen... ?
ik heb hier een demo en een download gezet van het onderstaande:
Deze laat de foto's netjes in elkaar oversliden.
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
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
<!DOCTYPE html>
<html>
<head>
<title>Slider with Fancybox!</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<script type="text/javascript" src="lib/jquery-1.10.1.min.js"></script>
<script type="text/javascript" src="source/jquery.fancybox.js?v=2.1.5"></script>
<link rel="stylesheet" type="text/css" href="source/jquery.fancybox.css?v=2.1.5" media="screen" />
<script type="text/javascript">
function slideSwitch() {
var $active = $('#foto1 a.active');
if ( $active.length == 0 ) $active = $('#foto1 a:last');
// use this to pull the images in the order they appear in the markup
var $next = $active.next().length ? $active.next()
: $('#foto1 a:first');
// uncomment the 3 lines below to pull the images in random order
// var $sibs = $active.siblings();
// var rndNum = Math.floor(Math.random() * $sibs.length );
// var $next = $( $sibs[ rndNum ] );
$active.addClass('last-active');
$next.css({opacity: 0.0})
.addClass('active')
.animate({opacity: 1.0}, 1000, function() {
$active.removeClass('active last-active');
});
}
$(document).ready(function() {
// koppel fancybox aan de alle <a> elementen in 'foto1' hebben
$('#foto1 a').fancybox();
setInterval( "slideSwitch()", 5000 );
});
</script>
<style type="text/css">
#foto1 {
position:relative;
height:125px;
}
#foto1 a {
position:absolute;
top:0;
left:0;
z-index:8;
opacity:0.0;
}
#foto1 a.active {
z-index:10;
opacity:1.0;
}
#foto1 a.last-active {
z-index:9;
}
</style>
</head>
<body>
<h1>Slider with Fancybox</h1>
<p>click a image</p>
<div id="foto1">
<a class="active" href="groot/img_8726.jpg"><img src="img_8726.jpg" width="160" height="120" /></a>
<a href="groot/img_8647.jpg"><img src="img_8647.jpg" width="160" height="120" /></a>
<a href="groot/img_8720.jpg"><img src="img_8720.jpg" width="160" height="120" /></a>
</div>
<p><a href="slider with Fancybox.zip">download complete package</a>
</body>
</html>
<html>
<head>
<title>Slider with Fancybox!</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<script type="text/javascript" src="lib/jquery-1.10.1.min.js"></script>
<script type="text/javascript" src="source/jquery.fancybox.js?v=2.1.5"></script>
<link rel="stylesheet" type="text/css" href="source/jquery.fancybox.css?v=2.1.5" media="screen" />
<script type="text/javascript">
function slideSwitch() {
var $active = $('#foto1 a.active');
if ( $active.length == 0 ) $active = $('#foto1 a:last');
// use this to pull the images in the order they appear in the markup
var $next = $active.next().length ? $active.next()
: $('#foto1 a:first');
// uncomment the 3 lines below to pull the images in random order
// var $sibs = $active.siblings();
// var rndNum = Math.floor(Math.random() * $sibs.length );
// var $next = $( $sibs[ rndNum ] );
$active.addClass('last-active');
$next.css({opacity: 0.0})
.addClass('active')
.animate({opacity: 1.0}, 1000, function() {
$active.removeClass('active last-active');
});
}
$(document).ready(function() {
// koppel fancybox aan de alle <a> elementen in 'foto1' hebben
$('#foto1 a').fancybox();
setInterval( "slideSwitch()", 5000 );
});
</script>
<style type="text/css">
#foto1 {
position:relative;
height:125px;
}
#foto1 a {
position:absolute;
top:0;
left:0;
z-index:8;
opacity:0.0;
}
#foto1 a.active {
z-index:10;
opacity:1.0;
}
#foto1 a.last-active {
z-index:9;
}
</style>
</head>
<body>
<h1>Slider with Fancybox</h1>
<p>click a image</p>
<div id="foto1">
<a class="active" href="groot/img_8726.jpg"><img src="img_8726.jpg" width="160" height="120" /></a>
<a href="groot/img_8647.jpg"><img src="img_8647.jpg" width="160" height="120" /></a>
<a href="groot/img_8720.jpg"><img src="img_8720.jpg" width="160" height="120" /></a>
</div>
<p><a href="slider with Fancybox.zip">download complete package</a>
</body>
</html>
Gewijzigd op 18/08/2013 17:19:53 door Frank Nietbelangrijk
hartelijk dank !! Dat werkt!
hier ga ik verder mee experimenteren