Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: Problem z sliderem i pol.znakami
Forum PHP.pl > Forum > Po stronie przeglądarki
mabi
13.03.2015, 15:31:11
Posiadam galerie zdjęć (slider) w jQuery and CSS3 , jeśli dodaje zdjęcia bez polskich znaków (w tytule zdjęcia),wszystko jest ok. lecz kiedy są polskie znaki to nic nie działa.Co zrobić żeby hulało z polskimi znakami?
http://www.dogs.com.pl/galeria/
com
13.03.2015, 17:00:22
kod poprosimy smile.gif
mabi
13.03.2015, 17:25:37

Wkleje w dwóch częściach bo post jest za dłógi 

[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>
  3.     <head>
  4.         <title>Rasy psów,galeria zdjęć,wszystkie rasy</title>
  5.         <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
  6.         <meta name="description" content="Galeria zdjęć wszystkich ras psów,psie forum,dogs com pl" />
  7.         <meta name="keywords" content="zdjęcia psów,rasy psów zdjęcia,galeria zdjęć psów,psy zdjęcia"/>
  8.         <link rel="stylesheet" href="css/style.css" type="text/css" media="screen"/>
  9.         <style>
  10.           span.reference{
  11.             position:fixed;
  12.             top:10px;
  13.             right:10px;
  14.             font-size:9px;
  15.           }
  16.           span.reference a{
  17.             color:#aaa;
  18.             text-decoration:none;
  19. 			text-transform:uppercase;
  20. 			margin-left:10px;
  21.           }
  22.           span.reference a:hover{
  23.               color:#ddd;
  24.           }
  25. 		  h1.title{
  26. 			text-indent:-9000px;
  27. 			background:transparent url(title.png) no-repeat top left;
  28. 			width:640px;
  29. 			height:52px;
  30. 			position:absolute;
  31. 			top:15px;
  32. 			left:15px;
  33. 		  }  
  34.       </style>
  35.     </head>
  36.     <body>
  37. 		<div>
  38. 			<h1 class="title">Rasy psów,galeria zdjęć,wszystkie rasy</h1>
  39.             <span class="reference">
  40.  
  41.             </span>
  42. 		</div>
  43.  
  44. 		<div id="ps_slider" class="ps_slider">
  45. 			<a class="prev disabled"></a>
  46. 			<a class="next disabled"></a>
  47. 			<div id="ps_albums">
  48. 				<div class="ps_album" style="opacity:0;"><img src="albums/album1/thumb/thumb.jpg" alt=""/><div class="ps_desc"><h2>GRUPA I FCI</h2><span>Tekst do wyswietlania na stronie test test test </span></div></div>
  49. 				<div class="ps_album" style="opacity:0;"><img src="albums/album2/thumb/thumb.jpg" alt=""/><div class="ps_desc"><h2>GRUPA II FCI</h2><span>Abundantly fowl of you'll fly moved i evening there whales creeping very kind green. Of have after lights saying.</span></div></div>
  50. 				<div class="ps_album" style="opacity:0;"><img src="albums/album3/thumb/thumb.jpg" alt=""/><div class="ps_desc"><h2>GRUPA III FCI</h2><span> nię bć zż, fruitful great fourth likeness given subdue cattle deep abundantly set place night stars fill.</span></div></div>
  51. 				<div class="ps_album" style="opacity:0;"><img src="albums/album4/thumb/thumb.jpg" alt=""/><div class="ps_desc"><h2>GRUPA IV FCI</h2><span>And did the Countenance DivineShine forth upon our clouded hills? And was Jerusalem builded here among these dark Satanic Mills?</span></div></div>
  52. 				<div class="ps_album" style="opacity:0;"><img src="albums/album5/thumb/thumb.jpg" alt=""/><div class="ps_desc"><h2>GRUPA V FCI</h2><span>You can have all the faith you want in spirits, and the afterlife, and heaven and hell, but when it comes to this world, don't be an idiot.</span></div></div>
  53. 				<div class="ps_album" style="opacity:0;"><img src="albums/album6/thumb/thumb.jpg" alt=""/><div class="ps_desc"><h2>GRUPA VI FCI</h2><span>Without contraries is no progression. Attraction and repulsion, reason and energy, love and hate, are necessary to human existence.</span></div></div>
  54. 				<div class="ps_album" style="opacity:0;"><img src="albums/album7/thumb/thumb.jpg" alt=""/><div class="ps_desc"><h2>GRUPA VII FCI</h2><span>So hath under years itself seasons life divided signs light were god fruitful evening a. Fruitful.</span></div></div>
  55. 				<div class="ps_album" style="opacity:0;"><img src="albums/album8/thumb/thumb.jpg" alt=""/><div class="ps_desc"><h2>GRUPA VIII FCI</h2><span>A light moving. Moved was abundantly created, over sixth above grass after grass.</span></div></div>
  56. 				<div class="ps_album" style="opacity:0;"><img src="albums/album9/thumb/thumb.jpg" alt=""/><div class="ps_desc"><h2>GRUPA IX FCI</h2><span>If the doors of perception were cleansed everything would appear to man as it is, infinite.</span></div></div>
  57. 				<div class="ps_album" style="opacity:0;"><img src="albums/album9/thumb/thumb.jpg" alt=""/><div class="ps_desc"><h2>GRUPA X FCI</h2><span>If the doors of perception were cleansed everything would appear to man as it is, infinite.</span></div></div>
  58. 			</div>	
  59. 		</div>
  60.  
  61. 		<div id="ps_overlay" class="ps_overlay" style="display:none;"></div>
  62. 		<a id="ps_close" class="ps_close" style="display:none;"></a>
  63. 		<div id="ps_container" class="ps_container" style="display:none;">
  64. 			<a id="ps_next_photo" class="ps_next_photo" style="display:none;"></a>
  65. 		</div>
  66.  
  67.  
  68.         <!-- The JavaScript -->
  69.         <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
  70. 		<script type="text/javascript">
  71.             $(function() {
  72. 				/**
  73. 				* navR,navL are flags for controlling the albums navigation
  74. 				* first gives us the position of the album on the left
  75. 				* positions are the left positions for each of the 5 albums displayed at a time
  76. 				*/
  77.                 var navR,navL	= false;
  78. 				var first		= 1;
  79. 				var positions 	= {
  80. 					'0'		: 0,
  81. 					'1' 	: 170,
  82. 					'2' 	: 340,
  83. 					'3' 	: 510,
  84. 					'4' 	: 680
  85. 				}
  86. 				var $ps_albums 		= $('#ps_albums');
  87. 				/**
  88. 				* number of albums available
  89. 				*/
  90. 				var elems			= $ps_albums.children().length;
  91. 				var $ps_slider		= $('#ps_slider');
  92.  
  93. 				/**
  94. 				* let's position all the albums on the right side of the window
  95. 				*/
  96. 				var hiddenRight 	= $(window).width() - $ps_albums.offset().left;
  97. 				$ps_albums.children('div').css('left',hiddenRight + 'px');
  98.  
  99. 				/**
  100. 				* move the first 5 albums to the viewport
  101. 				*/
  102. 				$ps_albums.children('div:lt(5)').each(
  103. 					function(i){
  104. 						var $elem = $(this);
  105. 						$elem.animate({'left': positions[i] + 'px','opacity':1},800,function(){
  106. 							if(elems > 5)
  107. 								enableNavRight();
  108. 						});
  109. 					}
  110. 				);
  111.  
  112. 				/**
  113. 				* next album
  114. 				*/
  115. 				$ps_slider.find('.next').bind('click',function(){
  116. 					if(!$ps_albums.children('div:nth-child('+parseInt(first+5)+')').length || !navR) return;
  117. 					disableNavRight();
  118. 					disableNavLeft();
  119. 					moveRight();
  120. 				});
  121.  
  122. 				/**
  123. 				* we move the first album (the one on the left) to the left side of the window
  124. 				* the next 4 albums slide one position, and finally the next one in the list
  125. 				* slides in, to fill the space of the first one
  126. 				*/
  127. 				function moveRight () {
  128. 					var hiddenLeft 	= $ps_albums.offset().left + 163;
  129.  
  130. 					var cnt = 0;
  131. 					$ps_albums.children('div:nth-child('+first+')').animate({'left': - hiddenLeft + 'px','opacity':0},500,function(){
  132. 							var $this = $(this);
  133. 							$ps_albums.children('div').slice(first,parseInt(first+4)).each(
  134. 								function(i){
  135. 									var $elem = $(this);
  136. 									$elem.animate({'left': positions[i] + 'px'},800,function(){
  137. 										++cnt;
  138. 										if(cnt == 4){
  139. 											$ps_albums.children('div:nth-child('+parseInt(first+5)+')').animate({'left': positions[cnt] + 'px','opacity':1},500,function(){
  140. 												//$this.hide();
  141. 												++first;
  142. 												if(parseInt(first + 4) < elems)
  143. 													enableNavRight();
  144. 												enableNavLeft();
  145. 											});
  146. 										}		
  147. 									});
  148. 								}
  149. 							);		
  150. 					});
  151. 				}
  152.  
  153. 				/**
  154. 				* previous album
  155. 				*/
  156. 				$ps_slider.find('.prev').bind('click',function(){
  157. 					if(first==1  || !navL) return;
  158. 					disableNavRight();
  159. 					disableNavLeft();
  160. 					moveLeft();
  161. 				});
[PHP] pobierz, plaintext 


[PHP] pobierz, plaintext 
  1. /**
  2. 				* we move the last album (the one on the right) to the right side of the window
  3. 				* the previous 4 albums slide one position, and finally the previous one in the list
  4. 				* slides in, to fill the space of the last one
  5. 				*/
  6. 				function moveLeft () {
  7. 					var hiddenRight 	= $(window).width() - $ps_albums.offset().left;
  8.  
  9. 					var cnt = 0;
  10. 					var last= first+4;
  11. 					$ps_albums.children('div:nth-child('+last+')').animate({'left': hiddenRight + 'px','opacity':0},500,function(){
  12. 							var $this = $(this);
  13. 							$ps_albums.children('div').slice(parseInt(last-5),parseInt(last-1)).each(
  14. 								function(i){
  15. 									var $elem = $(this);
  16. 									$elem.animate({'left': positions[i+1] + 'px'},800,function(){
  17. 										++cnt;
  18. 										if(cnt == 4){
  19. 											$ps_albums.children('div:nth-child('+parseInt(last-5)+')').animate({'left': positions[0] + 'px','opacity':1},500,function(){
  20. 												//$this.hide();
  21. 												--first;
  22. 												enableNavRight();
  23. 												if(first > 1)
  24. 													enableNavLeft();
  25. 											});
  26. 										}										
  27. 									});
  28. 								}
  29. 							);
  30. 					});
  31. 				}
  32.  
  33. 				/**
  34. 				* disable or enable albums navigation
  35. 				*/
  36. 				function disableNavRight () {
  37. 					navR = false;
  38. 					$ps_slider.find('.next').addClass('disabled');
  39. 				}
  40. 				function disableNavLeft () {
  41. 					navL = false;
  42. 					$ps_slider.find('.prev').addClass('disabled');
  43. 				}
  44. 				function enableNavRight () {
  45. 					navR = true;
  46. 					$ps_slider.find('.next').removeClass('disabled');
  47. 				}
  48. 				function enableNavLeft () {
  49. 					navL = true;
  50. 					$ps_slider.find('.prev').removeClass('disabled');
  51. 				}		
  52.  
  53. 				var $ps_container 	= $('#ps_container');
  54. 				var $ps_overlay 	= $('#ps_overlay');
  55. 				var $ps_close		= $('#ps_close');
  56. 				/**
  57. 				* when we click on an album,
  58. 				* we load with AJAX the list of pictures for that album.
  59. 				* we randomly rotate them except the last one, which is
  60. 				* the one the User sees first. We also resize and center each image.
  61. 				*/
  62. 				$ps_albums.children('div').bind('click',function(){
  63. 					var $elem = $(this);
  64. 					var album_name 	= 'album' + parseInt($elem.index() + 1);
  65. 					var $loading 	= $('<div />',{className:'loading'});
  66. 					$elem.append($loading);
  67. 					$ps_container.find('img').remove();
  68. 					$.get('photostack.php', {album_name:album_name} , function(data) {
  69. 						var items_count	= data.length;
  70. 						for(var i = 0; i < items_count; ++i){
  71. 							var item_source = data[i];
  72. 							var cnt 		= 0;
  73. 							$('<img />').load(function(){
  74. 								var $image = $(this);
  75. 								++cnt;
  76. 								resizeCenterImage($image);
  77. 								$ps_container.append($image);
  78. 								var r		= Math.floor(Math.random()*41)-20;
  79. 								if(cnt < items_count){
  80. 									$image.css({
  81. 										'-moz-transform'	:'rotate('+r+'deg)',
  82. 										'-webkit-transform'	:'rotate('+r+'deg)',
  83. 										'transform'			:'rotate('+r+'deg)'
  84. 									});
  85. 								}
  86. 								if(cnt == items_count){
  87. 									$loading.remove();
  88. 									$ps_container.show();
  89. 									$ps_close.show();
  90. 									$ps_overlay.show();
  91. 								}
  92. 							}).attr('src',item_source);
  93. 						}
  94. 					},'json');
  95. 				});
  96.  
  97. 				/**
  98. 				* when hovering each one of the images, 
  99. 				* we show the button to navigate through them
  100. 				*/
  101. 				$ps_container.live('mouseenter',function(){
  102. 					$('#ps_next_photo').show();
  103. 				}).live('mouseleave',function(){
  104. 					$('#ps_next_photo').hide();
  105. 				});
  106.  
  107. 				/**
  108. 				* navigate through the images: 
  109. 				* the last one (the visible one) becomes the first one.
  110. 				* we also rotate 0 degrees the new visible picture 
  111. 				*/
  112. 				$('#ps_next_photo').bind('click',function(){
  113. 					var $current 	= $ps_container.find('img:last');
  114. 					var r			= Math.floor(Math.random()*41)-20;
  115.  
  116. 					var currentPositions = {
  117. 						marginLeft	: $current.css('margin-left'),
  118. 						marginTop	: $current.css('margin-top')
  119. 					}
  120. 					var $new_current = $current.prev();
  121.  
  122. 					$current.animate({
  123. 						'marginLeft':'250px',
  124. 						'marginTop':'-385px'
  125. 					},250,function(){
  126. 						$(this).insertBefore($ps_container.find('img:first'))
  127. 							   .css({
  128. 									'-moz-transform'	:'rotate('+r+'deg)',
  129. 									'-webkit-transform'	:'rotate('+r+'deg)',
  130. 									'transform'			:'rotate('+r+'deg)'
  131. 								})
  132. 							   .animate({
  133. 									'marginLeft':currentPositions.marginLeft,
  134. 									'marginTop'	:currentPositions.marginTop
  135. 									},250,function(){
  136. 										$new_current.css({
  137. 											'-moz-transform'	:'rotate(0deg)',
  138. 											'-webkit-transform'	:'rotate(0deg)',
  139. 											'transform'			:'rotate(0deg)'
  140. 										});
  141. 							   });
  142. 					});
  143. 				});
  144.  
  145. 				/**
  146. 				* close the images view, and go back to albums
  147. 				*/
  148. 				$('#ps_close').bind('click',function(){
  149. 					$ps_container.hide();
  150. 					$ps_close.hide();
  151. 					$ps_overlay.fadeOut(400);
  152. 				});
  153.  
  154. 				/**
  155. 				* resize and center the images
  156. 				*/
  157. 				function resizeCenterImage($image){
  158. 					var theImage 	= new Image();
  159. 					theImage.src 	= $image.attr("src");
  160. 					var imgwidth 	= theImage.width;
  161. 					var imgheight 	= theImage.height;
  162.  
  163. 					var containerwidth  = 460;
  164. 					var containerheight = 330;
  165.  
  166. 					if(imgwidth	> containerwidth){
  167. 						var newwidth = containerwidth;
  168. 						var ratio = imgwidth / containerwidth;
  169. 						var newheight = imgheight / ratio;
  170. 						if(newheight > containerheight){
  171. 							var newnewheight = containerheight;
  172. 							var newratio = newheight/containerheight;
  173. 							var newnewwidth =newwidth/newratio;
  174. 							theImage.width = newnewwidth;
  175. 							theImage.height= newnewheight;
  176. 						}
  177. 						else{
  178. 							theImage.width = newwidth;
  179. 							theImage.height= newheight;
  180. 						}
  181. 					}
  182. 					else if(imgheight > containerheight){
  183. 						var newheight = containerheight;
  184. 						var ratio = imgheight / containerheight;
  185. 						var newwidth = imgwidth / ratio;
  186. 						if(newwidth > containerwidth){
  187. 							var newnewwidth = containerwidth;
  188. 							var newratio = newwidth/containerwidth;
  189. 							var newnewheight =newheight/newratio;
  190. 							theImage.height = newnewheight;
  191. 							theImage.width= newnewwidth;
  192. 						}
  193. 						else{
  194. 							theImage.width = newwidth;
  195. 							theImage.height= newheight;
  196. 						}
  197. 					}
  198. 					$image.css({
  199. 						'width'			:theImage.width,
  200. 						'height'		:theImage.height,
  201. 						'margin-top'	:-(theImage.height/2)-10+'px',
  202. 						'margin-left'	:-(theImage.width/2)-10+'px'	
  203. 					});
  204. 				}
  205.             });
  206.         </script>
  207.     </body>
  208. </html>
[PHP] pobierz, plaintext
Kshyhoo
13.03.2015, 20:41:57
Cytat(mabi @ 13.03.2015, 15:31:11 ) *
Posiadam galerie zdjęć (slider) w jQuery and CSS3

Jaki to ma związek z PHP?
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.