Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: [JavaScript]Space Gallery
Forum PHP.pl > Forum > Przedszkole
starter91php
5.04.2012, 22:17:34
Witam, mam pewien problem ze skryptem galerii Space Gallery. Chodzi o to, że jeśli w moim pliku index.php mam odpaloną tylko jedną taką galerię, wszystko jest w porządku. Jednak kiedy chcę mieć ich więcej. Każda z tych następnych już nie działa (działa tylko jedna instancja, niestety - co trzeba zrobić, żeby można było odpalić kilka tego typu photosliderów na 1 stronie?). Działa tylko wersja z obrazkami z folderu "imageS", dla tej z "images2" nalozylo sie tylko na siebie kilka obrazków, które są nieruchome. Przykład działania na: http://www.eyecon.ro/spacegallery/#about

index.php:
[PHP] pobierz, plaintext 
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
  3. <head>
  4.     <title>Spacegallery</title>
  5.     <link rel="stylesheet" media="screen" type="text/css" href="css/layout.css" />
  6.     <link rel="stylesheet" media="screen" type="text/css" href="css/spacegallery.css" />
  7.     <link rel="stylesheet" media="screen" type="text/css" href="css/custom.css" />
  8.     <script type="text/javascript" src="js/jquery.js"></script>
  9.     <script type="text/javascript" src="js/eye.js"></script>
  10.     <script type="text/javascript" src="js/utils.js"></script>
  11.     <script type="text/javascript" src="js/spacegallery.js"></script>
  12.     <script type="text/javascript" src="js/layout.js"></script>
  13. </head>
  14. <body>
  15.     <div class="wrapper">
  16.  
  17.  
  18.  
  19. 				<div id="myGallery" class="spacegallery">
  20.  
  21. 				       			<?php 
  22. 					$dir = opendir('images');
  23. 					while(false !== ($file = readdir($dir)))
  24.  					if($file != '.' && $file != '..' && $file!='blank.gif' && $file!='ajax_small.gif'){
  25.    					 echo'<img src=images/'.$file.' alt="" />'; }?>
  26.  
  27.  
  28.  
  29. 				</div>
  30.  
  31. 				<br><br><br>aaaa
  32.  
  33. 				<div id="myGallery" class="spacegallery">
  34.  
  35. 				       			<?php 
  36. 					$dir = opendir('images');
  37. 					while(false !== ($file = readdir($dir)))
  38.  					if($file != '.' && $file != '..' && $file!='blank.gif' && $file!='ajax_small.gif'){
  39.    					 echo '<img src=images/'.$file.' alt="" />'; } 
  40.    					 ?>
  41.  
  42.  
  43.  
  44. 				</div>
  45.  
  46.  
  47. 	</div>
  48.  
  49.  
  50. </body>
  51. </html>
[PHP] pobierz, plaintext



layout.js:
[JAVASCRIPT] pobierz, plaintext 
  1. (function($){
  2. 	var initLayout = function() {
  3. 		var hash = window.location.hash.replace('#', '');
  4. 		$('#myGallery').spacegallery({loadingClass: 'loading'}); 
  5. 	};
  6. 	EYE.register(initLayout, 'init');
  7. })(jQuery)
[JAVASCRIPT] pobierz, plaintext



spacegallery.js
[JAVASCRIPT] pobierz, plaintext 
  1. /**
  2.  
  3.  *
  4.  
  5.  * Spacegallery
  6.  
  7.  * Author: Stefan Petre www.eyecon.ro
  8.  
  9.  * 
  10.  
  11.  */
  12.  
  13.  
  14.  
  15. (function($){
  16.  
  17. 	EYE.extend({
  18.  
  19.  
  20.  
  21. 		spacegallery: {
  22.  
  23.  
  24.  
  25. 			//default options (many options are controled via CSS)
  26.  
  27. 			defaults: {
  28.  
  29. 				border: 6, // border arround the image
  30.  
  31. 				perspective: 100, // perpective height
  32.  
  33. 				minScale: 0.1, // minimum scale for the image in the back
  34.  
  35. 				duration: 800, // aimation duration
  36.  
  37. 				loadingClass: null, // CSS class applied to the element while looading images
  38.  
  39. 				before: function(){return false},
  40.  
  41. 				after: function(){return false}
  42.  
  43. 			},
  44.  
  45.  
  46.  
  47. 			animated: false,
  48.  
  49.  
  50.  
  51. 			//position images
  52.  
  53. 			positionImages: function(el) {
  54.  
  55. 				var top = 0;
  56.  
  57. 				EYE.spacegallery.animated = false;
  58.  
  59. 				$(el)
  60.  
  61. 					.find('a')
  62.  
  63. 						.removeClass(el.spacegalleryCfg.loadingClass)
  64.  
  65. 						.end()
  66.  
  67. 					.find('img')
  68.  
  69. 						.removeAttr('height')
  70.  
  71. 						.each(function(nr){
  72.  
  73. 							var newWidth = this.spacegallery.origWidth - (this.spacegallery.origWidth - this.spacegallery.origWidth * el.spacegalleryCfg.minScale) * el.spacegalleryCfg.asins[nr];
  74.  
  75. 							$(this)
  76.  
  77. 								.css({
  78.  
  79. 									top: el.spacegalleryCfg.tops[nr] + 'px',
  80.  
  81. 									marginLeft: - parseInt((newWidth + el.spacegalleryCfg.border)/2, 10) + 'px',
  82.  
  83. 									opacity: 1 - el.spacegalleryCfg.asins[nr]
  84.  
  85. 								})
  86.  
  87. 								.attr('width', parseInt(newWidth));
  88.  
  89. 							this.spacegallery.next = el.spacegalleryCfg.asins[nr+1];
  90.  
  91. 							this.spacegallery.nextTop = el.spacegalleryCfg.tops[nr+1] - el.spacegalleryCfg.tops[nr];
  92.  
  93. 							this.spacegallery.origTop = el.spacegalleryCfg.tops[nr];
  94.  
  95. 							this.spacegallery.opacity = 1 - el.spacegalleryCfg.asins[nr];
  96.  
  97. 							this.spacegallery.increment = el.spacegalleryCfg.asins[nr] - this.spacegallery.next;
  98.  
  99. 							this.spacegallery.current = el.spacegalleryCfg.asins[nr];
  100.  
  101. 							this.spacegallery.width = newWidth;
  102.  
  103. 						})
  104.  
  105. 			},
  106.  
  107.  
  108.  
  109. 			//animate to nex image
  110.  
  111. 			next: function(e) {
  112.  
  113. 				if (EYE.spacegallery.animated === false) {
  114.  
  115. 					EYE.spacegallery.animated = true;
  116.  
  117. 					var el = this.parentNode;
  118.  
  119. 					el.spacegalleryCfg.before.apply(el);
  120.  
  121. 					$(el)
  122.  
  123. 						.css('spacegallery', 0)
  124.  
  125. 						.animate({
  126.  
  127. 							spacegallery: 100
  128.  
  129. 						},{
  130.  
  131. 							easing: 'easeOut',
  132.  
  133. 							duration: el.spacegalleryCfg.duration,
  134.  
  135. 							complete: function() {
  136.  
  137. 								$(el)
  138.  
  139. 									.find('img:last')
  140.  
  141. 									.prependTo(el);
  142.  
  143. 								EYE.spacegallery.positionImages(el);
  144.  
  145. 								el.spacegalleryCfg.after.apply(el);
  146.  
  147. 							},
  148.  
  149. 							step: function(now) {
  150.  
  151. 								$('img', this)
  152.  
  153. 									.each(function(nr){
  154.  
  155. 										var newWidth, top, next;
  156.  
  157. 										if (nr + 1 == el.spacegalleryCfg.images) {
  158.  
  159. 											top = this.spacegallery.origTop + this.spacegallery.nextTop * 4 * now /100;
  160.  
  161. 											newWidth = this.spacegallery.width * top / this.spacegallery.origTop;
  162.  
  163. 											$(this)
  164.  
  165. 												.css({
  166.  
  167. 													top: top + 'px',
  168.  
  169. 													opacity: 0.7 - now/100,
  170.  
  171. 													marginLeft: - parseInt((newWidth + el.spacegalleryCfg.border)/2, 10) + 'px'
  172.  
  173. 												})
  174.  
  175. 												.attr('width', newWidth);
  176.  
  177. 										} else {
  178.  
  179. 											next = this.spacegallery.current - this.spacegallery.increment * now /100;
  180.  
  181. 											newWidth = this.spacegallery.origWidth - (this.spacegallery.origWidth - this.spacegallery.origWidth * el.spacegalleryCfg.minScale) * next;
  182.  
  183. 											$(this).css({
  184.  
  185. 												top: this.spacegallery.origTop + this.spacegallery.nextTop * now /100 + 'px',
  186.  
  187. 												opacity: 1 - next,
  188.  
  189. 												marginLeft: - parseInt((newWidth + el.spacegalleryCfg.border)/2, 10) + 'px'
  190.  
  191. 											})
  192.  
  193. 											.attr('width', newWidth);
  194.  
  195. 										}
  196.  
  197. 									});
  198.  
  199. 							}
  200.  
  201. 						});
  202.  
  203. 				}
  204.  
  205.  
  206.  
  207. 				this.blur();
  208.  
  209. 				return false;
  210.  
  211. 			},
  212.  
  213.  
  214.  
  215. 			//constructor
  216.  
  217. 			init: function(opt) {
  218.  
  219. 				opt = $.extend({}, EYE.spacegallery.defaults, opt||{});
  220.  
  221. 				return this.each(function(){
  222.  
  223. 					var el = this;
  224.  
  225. 					if ($(el).is('.spacegallery')) {
  226.  
  227. 						$('<a href="#"></a>')
  228.  
  229. 							.appendTo(this)
  230.  
  231. 							.addClass(opt.loadingClass)
  232.  
  233. 							.bind('click', EYE.spacegallery.next);
  234.  
  235. 						el.spacegalleryCfg = opt;
  236.  
  237. 						el.spacegalleryCfg.images = el.getElementsByTagName('img').length;
  238.  
  239. 						el.spacegalleryCfg.loaded = 0;
  240.  
  241. 						el.spacegalleryCfg.asin = Math.asin(1);
  242.  
  243. 						el.spacegalleryCfg.asins = {};
  244.  
  245. 						el.spacegalleryCfg.tops = {};
  246.  
  247. 						el.spacegalleryCfg.increment = parseInt(el.spacegalleryCfg.perspective/el.spacegalleryCfg.images, 10);
  248.  
  249. 						var top = 0;
  250.  
  251. 						$('img', el)
  252.  
  253. 							.each(function(nr){
  254.  
  255. 								var imgEl = new Image();
  256.  
  257. 								var elImg = this;
  258.  
  259. 								el.spacegalleryCfg.asins[nr] = 1 - Math.asin((nr+1)/el.spacegalleryCfg.images)/el.spacegalleryCfg.asin;
  260.  
  261. 								top += el.spacegalleryCfg.increment - el.spacegalleryCfg.increment * el.spacegalleryCfg.asins[nr];
  262.  
  263. 								el.spacegalleryCfg.tops[nr] = top;
  264.  
  265. 								elImg.spacegallery = {};
  266.  
  267. 								imgEl.src = this.src;
  268.  
  269. 								if (imgEl.complete) {
  270.  
  271. 									el.spacegalleryCfg.loaded ++;
  272.  
  273. 									elImg.spacegallery.origWidth = imgEl.width;
  274.  
  275. 									elImg.spacegallery.origHeight = imgEl.height
  276.  
  277. 								} else {
  278.  
  279. 									imgEl.onload = function() {
  280.  
  281. 										el.spacegalleryCfg.loaded ++;
  282.  
  283. 										elImg.spacegallery.origWidth = imgEl.width;
  284.  
  285. 										elImg.spacegallery.origHeight = imgEl.height
  286.  
  287. 										if (el.spacegalleryCfg.loaded == el.spacegalleryCfg.images) {
  288.  
  289.  
  290.  
  291. 											EYE.spacegallery.positionImages(el);
  292.  
  293. 										}
  294.  
  295. 									};
  296.  
  297. 								}
  298.  
  299. 							});
  300.  
  301. 						el.spacegalleryCfg.asins[el.spacegalleryCfg.images] = el.spacegalleryCfg.asins[el.spacegalleryCfg.images - 1] * 1.3;
  302.  
  303. 						el.spacegalleryCfg.tops[el.spacegalleryCfg.images] = el.spacegalleryCfg.tops[el.spacegalleryCfg.images - 1] * 1.3;
  304.  
  305. 						if (el.spacegalleryCfg.loaded == el.spacegalleryCfg.images) {
  306.  
  307. 							EYE.spacegallery.positionImages(el);
  308.  
  309. 						}
  310.  
  311. 					}
  312.  
  313. 				});
  314.  
  315. 			}
  316.  
  317. 		}
  318.  
  319. 	});
  320.  
  321.  
  322.  
  323. 	$.fn.extend({
  324.  
  325.  
  326.  
  327. 		/**
  328.  
  329. 		 * Create a space gallery
  330.  
  331. 		 * @name spacegallery
  332.  
  333. 		 * @description create a space gallery
  334.  
  335. 		 * @option	int			border			Images' border. Default: 6
  336.  
  337. 		 * @option	int			perspective		Perpective height. Default: 140
  338.  
  339. 		 * @option	float		minScale		Minimum scale for the image in the back. Default: 0.2
  340.  
  341. 		 * @option	int			duration		Animation duration. Default: 800
  342.  
  343. 		 * @option	string		loadingClass	CSS class applied to the element while looading images. Default: null
  344.  
  345. 		 * @option	function	before			Callback function triggered before going to the next image
  346.  
  347. 		 * @option	function	after			Callback function triggered after going to the next image
  348.  
  349. 		 */
  350.  
  351. 		spacegallery: EYE.spacegallery.init
  352.  
  353. 	});
  354.  
  355. 	$.extend($.easing,{
  356.  
  357. 		easeOut:function (x, t, b, c, d) {
  358.  
  359. 			return -c *(t/=d)*(t-2) + b;
  360.  
  361. 		}
  362.  
  363. 	});
  364.  
  365. })(jQuery);
[JAVASCRIPT] pobierz, plaintext

Kostek.88
5.04.2012, 23:55:39
Mam rozumieć, że

[PHP] pobierz, plaintext 
  1. <div id="myGallery" class="spacegallery">
  2. <?php
  3. $dir = opendir('images');
  4. while(false !== ($file = readdir($dir)))
  5. if($file != '.' && $file != '..' && $file!='blank.gif' && $file!='ajax_small.gif'){
  6. echo'<img src=images/'.$file.' alt="" />'; }?>
  7. </div>
[PHP] pobierz, plaintext


to jest 1 box z galerią?

1) nie możesz powtarzać na stronie ID. Jeśli już, to nazwij drugi box np. myGallery2
2) http://www.eyecon.ro/spacegallery/#implement - tutaj masz napisane:

[PHP] pobierz, plaintext 
  1. $('#myGallery').spacegallery({loadingClass: 'loading'});
[PHP] pobierz, plaintext


wynika z tego, że do boxa #myGallery podpinasz galerię. Spróbuj...

a ) 
[PHP] pobierz, plaintext 
  1. $('#myGallery').spacegallery({loadingClass: 'loading'});
  2. $('#myGallery2').spacegallery({loadingClass: 'loading'});  // zauważ, tu jest inne ID
[PHP] pobierz, plaintext


LUB

b ) do każdego boxa masz przyporządkowaną klasę "spacegallery". Klasy z kolei mogą się powtarzać, a więc:
[PHP] pobierz, plaintext 
  1. $('.spacegallery').spacegallery({loadingClass: 'loading'});
[PHP] pobierz, plaintext


I wtedy załatwiłbyś 2 galerie jednym poleceniem?
starter91php
6.04.2012, 08:55:50
Dzięki, pomogło zalecenie z podpunktu cool.gif : )
To jest wersja lo-fi głównej zawartości. Aby zobaczyć pełną wersję z większą zawartością, obrazkami i formatowaniem proszę kliknij tutaj.
Invision Power Board © 2001-2025 Invision Power Services, Inc.