Witam.

Wpadłem ostatnio na pomysł aby zaktualizować skrypt Fancybox z wersji 2x na 3.x. Przesiedziałem nad tym wczoraj bite kilka godzin o 4:00 poddałem się.


Potrzebuje docelowo ustandaryzowac okienka, czyli potrzebowałbym trzy wersje. FULL SCREEN, "duże" dla dużych okien np 80% okna, albo wartosc w px i mniejsze dla małych formularzyków np o szerokosci 500 px.

Te trzy rodzaje okienek chciałem pogrupować w funkcje, ponieważ czasami bede je przypisywałdo odnośnika za pomocą rel="" a czasami bede wywoływał samą funkcje.

Nie rozumie jakie zmiany zaszły w fancybox, że nie mogę uruchomić funkcji tak jak we wcześniejszych wersjach, poniżej moje próby na kilka sposobów otwierania okienek:


Mam taki kod. 
[PHP] pobierz, plaintext 
  1. $(document).ready(function ()
  2. {
  3.  
  4. 	$.fancybox.defaults.buttons = [
  5. 		'slideShow',
  6. 		'fullScreen',
  7. 		'thumbs',
  8. 		'download',
  9. 		'close'
  10. 	];
  11.  
  12. 	//ta funkcja nie dziala, nie wiem dlaczego. czy w wersji 3.0 musi być $.fancybox.open(), albo .start() na końcu ? 
  13.         //Funkcja generuje: $.fancybox is not a function
  14. 	function fancybox_normal(hrefff) {
  15.  
  16. 		$.fancybox({
  17. 			href: hrefff, //niewidze w dokumentacji 3.x tego parametru, być może to jest problem
  18. 			//width: 1030,
  19. 			//height: '75%',
  20. 			//'overlayColor': '#000',
  21. 			//'autoScale': false,
  22. 			//'transitionIn': 'none',
  23. 			//'transitionOut': 'none',
  24. 			type: 'iframe'
  25. 			//'padding': 0,
  26.  
  27. 		});
  28. 	}
  29. 	// use .one() so that the handler is executed at most once per element ? - niewystarczy on()? 
  30.  
  31. 	$('a[rel=popup_iframe], input[rel=popup_iframe]').on('click', function ()
  32. 	{
  33. 		fancybox_normal( $(this).attr('href') );
  34. 		return false;
  35. 	});
  36.  
  37.  
  38.  
  39. 	//wersja med, parametry ma takie jak fulscreen 100procent, parametry musze dopracować.
  40. 	function popup_iframe_med(me)
  41. 	{
  42. 		 $(me).fancybox({ //zastanawiam się dlaczego tutaj w takeij formie można przypisać element 'me' 
  43. 			href  : $(me).attr('href'),
  44. 			type : 'iframe',
  45. 			opts : {
  46. 				'autoScale': true,
  47. 				'transitionIn': 'elastic',
  48. 				'transitionOut': 'elastic',
  49. 				'speedIn': 500,
  50. 				'speedOut': 300,
  51. 				'autoDimensions': true,
  52. 				'centerOnScroll': true,   // remove the trailing comma!!
  53. 				afterShow : function( instance, current ) {
  54. 					console.log( 'done!' );
  55. 				}
  56.  
  57. 			}
  58. 		});
  59. 	        // fire the click event after initializing fancybox on this element 
  60. 	        // this should open the fancybox
  61. 	}
  62.  
  63. 	$('a[rel=popup_iframe_med], input[rel=popup_iframe_med]').on('click', function ()
  64. 	{
  65. 		popup_iframe_med( this );
  66. 		return false;
  67. 	});
  68.  
  69.  
  70.         //tutraj chciałem wersje fullscreen -
  71. 	function popup_iframe_100procent(me)
  72. 	{
  73. 		alert('100procent');
  74.  
  75. 		$.fancybox.open({
  76. 			src  : me,
  77. 			type : 'iframe',
  78. 			opts : {
  79. 				'autoScale': true,
  80. 				'transitionIn': 'elastic',
  81. 				'transitionOut': 'elastic',
  82. 				'speedIn': 500,
  83. 				'speedOut': 300,
  84. 				'autoDimensions': true,
  85. 				'centerOnScroll': true,   // remove the trailing comma!! - ? 
  86. 				fullScreen : {
  87. 					autoStart: true 
  88. 				}, 
  89. 				afterShow : function( instance, current ) {
  90. 					console.log( 'done!' );
  91. 				}
  92.  
  93. 			}
  94. 		});
  95.  
  96. 	}
  97.  
  98.  
  99. 	$('a[rel=popup_iframe_100procent], input[rel=popup_iframe_100procent]').on('click', function ()
  100. 	{
  101. 		popup_iframe_100procent( $(this).attr('href') );
  102. 		return false;
  103. 	});
  104.  
  105.  
  106. });
[PHP] pobierz, plaintext


Na stronie poszczególne okienka wywołujetak: 
[PHP] pobierz, plaintext 
  1. <input type="button" value="Wywołaj - 100proc " class="mobile_show" rel="popup_iframe_100procent" href="plik.php">
  2.  
  3. <input type="button" value="Wywołaj - med " class="mobile_hide" rel="popup_iframe_med" href="plik.php">
  4.  
  5. <input type="button" value="Wywołaj - normal " class="mobile_hide" rel="popup_iframe" href="plik.php">
  6.  
  7. //+ czasami tek
  8.  
  9. <input type="button" value="Wywołaj z funkcji - 100proc" onClick="popup_iframe_100procent( 'plik.php' )">
[PHP] pobierz, plaintext


Proszę o podpowiedź, co z tym zrobić?