Foutmelding onopgelost (fancybox)
..fancybox/jquery.fancybox-1.3.4.pack.js
Line 18
Ik blijf maar deze foutmelding krijgen
Quote:
Try calling "$.fancybox.init();" before triggering (reference).
Also, try verifying that "fancybox.js" is not called twice for some reason.
Also, try verifying that "fancybox.js" is not called twice for some reason.
http://stackoverflow.com/questions/9058339/fancybox-error-t-is-undefined
maar de code deed het daarna niet meer
Met jou voorbeeld krijg ik nog steeds dezelfde probleem dit is de code
Code (php)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
jQuery(document).ready(function(){
/* Fancy Box */
jQuery.fancybox.init();
jQuery(".fancy-box").fancybox({
'overlayColor': "#111",
'overlayOpacity': 0.7,
'easingIn' : 'easeInBack',
'easingOut' : 'easeOutBack'
});
jQuery("#contact-me").fancybox({
'easingIn' : 'easeInBack',
'easingOut' : 'easeOutBack',
'padding' : 40,
'overlayColor': "#111",
'overlayOpacity': 0.7,
'scrolling' : 'no',
'titleShow' : false
});
/* Fancy Box */
jQuery.fancybox.init();
jQuery(".fancy-box").fancybox({
'overlayColor': "#111",
'overlayOpacity': 0.7,
'easingIn' : 'easeInBack',
'easingOut' : 'easeOutBack'
});
jQuery("#contact-me").fancybox({
'easingIn' : 'easeInBack',
'easingOut' : 'easeOutBack',
'padding' : 40,
'overlayColor': "#111",
'overlayOpacity': 0.7,
'scrolling' : 'no',
'titleShow' : false
});
Toevoeging op 14/01/2014 12:49:04:
Oja en voor de volledigheid een tweede call naar fancybox zie ik niet staan dus is uitgesloten
Gewijzigd op 14/01/2014 12:58:11 door Francoi gckx
Heb je ook een werkend voorbeeld? Pagina of fiddle o.i.d.
Ipv jQuery kun je ook $ gebruiken (Korter). Is maar net wat je fijner vind.
http://jsfiddle.net/4EV7Y/
ik gebruik jQuery om conflict te voorkomen met andere javascipts
Gewijzigd op 14/01/2014 13:32:05 door Francoi gckx
Wat me wel opvalt is dat versie 1.3.4 veroudert is en meerdere foutmeldingen geeft.
Lijkt me handig om versie 2.1.5 te downloaden
Code (php)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
jQuery(document).ready(function(){
/* Fancy Box */
jQuery.fancybox.init();
jQuery(".fancy-box").fancybox({
'overlayColor': "#111",
'overlayOpacity': 0.7,
'easingIn' : 'easeInBack',
'easingOut' : 'easeOutBack'
});
jQuery("#contact-me").fancybox({
'easingIn' : 'easeInBack',
'easingOut' : 'easeOutBack',
'padding' : 40,
'overlayColor': "#111",
'overlayOpacity': 0.7,
'scrolling' : 'no',
'titleShow' : false
});
/* Fancy Box */
jQuery.fancybox.init();
jQuery(".fancy-box").fancybox({
'overlayColor': "#111",
'overlayOpacity': 0.7,
'easingIn' : 'easeInBack',
'easingOut' : 'easeOutBack'
});
jQuery("#contact-me").fancybox({
'easingIn' : 'easeInBack',
'easingOut' : 'easeOutBack',
'padding' : 40,
'overlayColor': "#111",
'overlayOpacity': 0.7,
'scrolling' : 'no',
'titleShow' : false
});
herschreven worden zodat het met de nieuwe versie werkt
De hele code is
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
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
jQuery(document).ready(function(){
/* Fancy Box */
jQuery(".fancy-box").fancybox({
'overlayColor': "#111",
'overlayOpacity': 0.7,
'easingIn' : 'easeInBack',
'easingOut' : 'easeOutBack'
});
jQuery("#contact-me").fancybox({
'easingIn' : 'easeInBack',
'easingOut' : 'easeOutBack',
'padding' : 40,
'overlayColor': "#111",
'overlayOpacity': 0.7,
'scrolling' : 'no',
'titleShow' : false
});
/* Cufon font replacement */
Cufon.replace('h1');
Cufon.replace('h2');
Cufon.replace('h3');
Cufon.replace('h4');
Cufon.replace('.top-description');
Cufon.now();
var $query = '',
$elem = jQuery("#tooltip");
jQuery("#background-switcher a").click(function(){
var $backgr = jQuery(this).parent().css('background');
jQuery("body").css({
'background': $backgr,
'background-attachment':'fixed',
'background-position':'0 0'
});
});
jQuery(".controls li").not('#tooltip').hover(
function () {
clearTimeout($query);
if($elem.attr("class") === 'active'){
$elem.clearQueue().animate({'left': (jQuery(this).position().left - 38 ) + 'px'}, 300);
$elem.text(jQuery(this).attr('title'));
}
if ($elem.attr("class") === 'inactive'){
$elem.css({'left': (jQuery(this).position().left - 38 )+ 'px'}).css({'top': (jQuery(this).position().top + 40) + 'px'}).fadeIn("slow").attr('class','active');
$elem.html(jQuery(this).attr('title'));
}
},
function () {
$query = setTimeout( function(){ $elem.fadeOut("fast", function(){$elem.css({'left':'0'}).attr('class','inactive'); }); } ,500);
}
);
jQuery(".controls li a").click(function(){
$elem.fadeOut("fast", function(){$elem.css({'left':'0'}).attr('class','inactive'); });
});
jQuery(".controls li a#print").click(function(){
$elem.fadeOut("fast", function(){$elem.css({'left':'0'}).attr('class','inactive'); });
window.print();
return false;
});
jQuery('#middle-content ul.list>li:nth-child(even)').not('.arrow-up').css({ 'background': '#e6e6e6'});
jQuery('#middle-content ul.list>li:nth-child(odd)').not('.arrow-up').css({ 'background': '#f6f6f6'});
jQuery('#middle-content ul.list:last-child').css({'margin-bottom':'0'});
/* Fancy Box */
jQuery(".fancy-box").fancybox({
'overlayColor': "#111",
'overlayOpacity': 0.7,
'easingIn' : 'easeInBack',
'easingOut' : 'easeOutBack'
});
jQuery("#contact-me").fancybox({
'easingIn' : 'easeInBack',
'easingOut' : 'easeOutBack',
'padding' : 40,
'overlayColor': "#111",
'overlayOpacity': 0.7,
'scrolling' : 'no',
'titleShow' : false
});
/* Cufon font replacement */
Cufon.replace('h1');
Cufon.replace('h2');
Cufon.replace('h3');
Cufon.replace('h4');
Cufon.replace('.top-description');
Cufon.now();
var $query = '',
$elem = jQuery("#tooltip");
jQuery("#background-switcher a").click(function(){
var $backgr = jQuery(this).parent().css('background');
jQuery("body").css({
'background': $backgr,
'background-attachment':'fixed',
'background-position':'0 0'
});
});
jQuery(".controls li").not('#tooltip').hover(
function () {
clearTimeout($query);
if($elem.attr("class") === 'active'){
$elem.clearQueue().animate({'left': (jQuery(this).position().left - 38 ) + 'px'}, 300);
$elem.text(jQuery(this).attr('title'));
}
if ($elem.attr("class") === 'inactive'){
$elem.css({'left': (jQuery(this).position().left - 38 )+ 'px'}).css({'top': (jQuery(this).position().top + 40) + 'px'}).fadeIn("slow").attr('class','active');
$elem.html(jQuery(this).attr('title'));
}
},
function () {
$query = setTimeout( function(){ $elem.fadeOut("fast", function(){$elem.css({'left':'0'}).attr('class','inactive'); }); } ,500);
}
);
jQuery(".controls li a").click(function(){
$elem.fadeOut("fast", function(){$elem.css({'left':'0'}).attr('class','inactive'); });
});
jQuery(".controls li a#print").click(function(){
$elem.fadeOut("fast", function(){$elem.css({'left':'0'}).attr('class','inactive'); });
window.print();
return false;
});
jQuery('#middle-content ul.list>li:nth-child(even)').not('.arrow-up').css({ 'background': '#e6e6e6'});
jQuery('#middle-content ul.list>li:nth-child(odd)').not('.arrow-up').css({ 'background': '#f6f6f6'});
jQuery('#middle-content ul.list:last-child').css({'margin-bottom':'0'});
Gewijzigd op 14/01/2014 14:24:17 door Francoi gckx
Zie ook deze pagina
Gewijzigd op 14/01/2014 14:36:57 door Michael -
Code (php)
1
2
3
4
5
6
7
2
3
4
5
6
7
'easingIn' : 'easeInBack',
'easingOut' : 'easeOutBack',
'padding' : 40,
'overlayColor': "#111",
'overlayOpacity': 0.7,
'scrolling' : 'no',
'titleShow' : false
'easingOut' : 'easeOutBack',
'padding' : 40,
'overlayColor': "#111",
'overlayOpacity': 0.7,
'scrolling' : 'no',
'titleShow' : false
Kan je mij misschien helpen met 1 van die regels boven, als je interresse heb
Toevoeging op 14/01/2014 14:51:57:
als ik er 1 weet weet ik wss de rest
Code (php)
1
2
3
4
5
6
7
2
3
4
5
6
7
jQuery(".fancy-box").fancybox({
overlay : {
css : {
'background' : '#111',
'opacity' : 0.7
}
}
overlay : {
css : {
'background' : '#111',
'opacity' : 0.7
}
}
Francoi gckx op 14/01/2014 14:51:42:
Kan je mij misschien helpen met 1 van die regels boven, als je interresse heb
Toevoeging op 14/01/2014 14:51:57:
als ik er 1 weet weet ik wss de rest
Code (php)
1
2
3
4
5
6
7
2
3
4
5
6
7
'easingIn' : 'easeInBack',
'easingOut' : 'easeOutBack',
'padding' : 40,
'overlayColor': "#111",
'overlayOpacity': 0.7,
'scrolling' : 'no',
'titleShow' : false
'easingOut' : 'easeOutBack',
'padding' : 40,
'overlayColor': "#111",
'overlayOpacity': 0.7,
'scrolling' : 'no',
'titleShow' : false
Kan je mij misschien helpen met 1 van die regels boven, als je interresse heb
Toevoeging op 14/01/2014 14:51:57:
als ik er 1 weet weet ik wss de rest
Ipv easingIn, easingOut
Code (php)
1
2
3
4
5
2
3
4
5
openEffect : 'elastic',
openEasing : 'easeOutBack',
closeEffect : 'elastic',
closeEasing : 'easeInBack',
openEasing : 'easeOutBack',
closeEffect : 'elastic',
closeEasing : 'easeInBack',
Ipv coloroverlay
17,17,17 = #111, 0.7 = opacity
Code (php)
1
2
3
4
5
6
7
2
3
4
5
6
7
helpers : {
overlay : {
css : {
'background' : 'rgba(17, 17, 17, 0.7)'
}
}
}
overlay : {
css : {
'background' : 'rgba(17, 17, 17, 0.7)'
}
}
}
scrolling en padding zijn het zelfde gebleven.
titleShow = title geworden, maar default null, dus kun je weglaten.
Allemaal van de pagina die ik je had gegeven en met hulp van CTRL+F (Find)
edit: code tags toegevoegd
Gewijzigd op 14/01/2014 15:15:30 door Michael -
<a class="fancy-box" href="cv/img/foto.png"> </a>
Zou dan moeten werken maar hij open heel de afbeelding ipv een doorzichtige achtergrond
Gewijzigd op 14/01/2014 15:08:42 door Francoi gckx
Francoi gckx op 14/01/2014 15:03:06:
Bedankt Michael het is klaar om gelancheerd te worden
<a class="fancy-box" href="cv/img/foto.png"> </a>
Zou dan moeten werken maar hij open heel de afbeelding ipv een doorzichtige achtergrond
<a class="fancy-box" href="cv/img/foto.png"> </a>
Zou dan moeten werken maar hij open heel de afbeelding ipv een doorzichtige achtergrond
Volgens het voorbeeld moet het zo
Code (php)
1
2
3
2
3
<a class="fancy-box" rel="gallery1" href="http://farm4.staticflickr.com/3677/8962691008_7f489395c9_b.jpg" title="Grasmere Lake (Phil 'the link' Whittaker (gizto29))">
<img src="http://farm4.staticflickr.com/3677/8962691008_7f489395c9_m.jpg" alt="" />
</a>
<img src="http://farm4.staticflickr.com/3677/8962691008_7f489395c9_m.jpg" alt="" />
</a>
en voor je contact formulier wordt het <a href="#contact-me" class="fancy-box">Contact</a>
Code (php)
1
2
3
4
5
6
2
3
4
5
6
<li class="view-photo" title="View Photo">
<a class="fancy-box" rel="group" href="cv/img/photo-big.png" title="">
</a>
<a class="fancy-box" href="cv/img/photo-big.png"> </a>
</li>
<li class="mail-top" title="Contact Me"><a id="contact-me" href="#contact-div"> </a></li>
<a class="fancy-box" rel="group" href="cv/img/photo-big.png" title="">
</a>
<a class="fancy-box" href="cv/img/photo-big.png"> </a>
</li>
<li class="mail-top" title="Contact Me"><a id="contact-me" href="#contact-div"> </a></li>
Francoi gckx op 14/01/2014 15:21:25:
Hij pakt het niet op en als ik in firebug kijk zou er al javascript achter beide moeten staan
Code (php)
1
2
3
4
5
6
2
3
4
5
6
<li class="view-photo" title="View Photo">
<a class="fancy-box" rel="group" href="cv/img/photo-big.png" title="">
</a>
<a class="fancy-box" href="cv/img/photo-big.png"> </a>
</li>
<li class="mail-top" title="Contact Me"><a id="contact-me" href="#contact-div"> </a></li>
<a class="fancy-box" rel="group" href="cv/img/photo-big.png" title="">
</a>
<a class="fancy-box" href="cv/img/photo-big.png"> </a>
</li>
<li class="mail-top" title="Contact Me"><a id="contact-me" href="#contact-div"> </a></li>
Je hebt 2x een link ipv de img binnen je link zoals het voorbeeld.
Code (php)
1
2
3
2
3
<a class="fancy-box" rel="group" href="cv/img/photo-big.png" title="">
<img src="cv/img/photo-big.png" alt="" />
</a>
<img src="cv/img/photo-big.png" alt="" />
</a>
edit: De img binnen de link is trouwens een kleinere/voorbeeld versie van de grote, dus deze kun je nog een width/height meegeven of een thumbnail laden
Gewijzigd op 14/01/2014 15:26:40 door Michael -
het is juist als een knop bedoelt
Toevoeging op 14/01/2014 15:27:14:
maar als ik dan weer op de knop druk met de img er over heen dan gaat hij alsnog naar de afbeelding in vergrote scherm
Francoi gckx op 14/01/2014 15:26:23:
Maar als ik erin stop laat hij gelijk de foto zien: <img src="cv/img/photo-big.png" alt="" />
het is juist als een knop bedoelt
het is juist als een knop bedoelt
<a class="fancy-box" rel="group" href="cv/img/photo-big.png" title="">
knop
</a>
In mij header staat:
Code (php)
1
2
3
4
5
6
7
8
9
2
3
4
5
6
7
8
9
<link href="cv/fancybox/jquery.fancybox.css" type="text/css" rel="stylesheet" rev="stylesheet" media="screen">
<!-- Endof CSS -->
<script type='text/javascript' src='js/jquery/jquery.js?ver=1.10.2'></script>
<script type='text/javascript' src='js/jquery/jquery-migrate.min.js?ver=1.2.1'></script>
<script type="text/javascript" src="js/jquery.cycle.all.min.js"></script>
<script type='text/javascript' src='js/trim/superfish.js?ver=1.0'></script>
<script src="cv/js/custom2.js" type="text/javascript"></script>
<script src="cv/fancybox/jquery.easing-1.3.pack.js" type="text/javascript"></script>
<script src="cv/fancybox/jquery.fancybox.js" type="text/javascript"></script>
<!-- Endof CSS -->
<script type='text/javascript' src='js/jquery/jquery.js?ver=1.10.2'></script>
<script type='text/javascript' src='js/jquery/jquery-migrate.min.js?ver=1.2.1'></script>
<script type="text/javascript" src="js/jquery.cycle.all.min.js"></script>
<script type='text/javascript' src='js/trim/superfish.js?ver=1.0'></script>
<script src="cv/js/custom2.js" type="text/javascript"></script>
<script src="cv/fancybox/jquery.easing-1.3.pack.js" type="text/javascript"></script>
<script src="cv/fancybox/jquery.fancybox.js" type="text/javascript"></script>
Toevoeging op 14/01/2014 15:39:54:
waar custom2.js de code in kwestie is
Gewijzigd op 14/01/2014 15:40:47 door Francoi gckx
en met wat jij zei niks doorslaggevend:
Gebruik van getPreventDefault() wordt niet meer ondersteund. Gebruik in plaats daarvan defaultPrevented. jquery.js:4
16:02:40.694 De webconsole-log-API (console.log, console.info, console.warn, console.error) is door een script op deze pagina uitgeschakeld.
Ik heb ook Web Developer 1.2.5 Firefox Addon en die ziet ook geen js fouten