Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: [PHP][JavaScript] Problem z powiększeniem zdjęc po najechaniu
Forum PHP.pl > Forum > Przedszkole
saviola15
1.10.2012, 12:04:21
Dodałem dodatek do presta shop imageslarge. Powiększa ładnie zdjęcia jak na allegro ale tylko te z "home" [ http://www.pneumaticon.pl/presta/img/p/45-50-home.jpg ] Te z "medium" [ http://www.pneumaticon.pl/presta/img/p/52-58-medium.jpg ]niestety ich nie powiększa. Proszę zobaczyć: http://www.pneumaticon.pl/presta/ w Polecanych produktach powiększa zdjęcie po najechaniu a w najczęsciej kupowane już nie sad.gif. Przesyłam plik imageslarge.js gdzie dodałęm medium.jpg ale niestety nic się nie dzieje ;/ 

[PHP] pobierz, plaintext 
  1. /**
  2.  * image enlarge
  3.  * @name imagesenlarge.js
  4.  * @author Marghoob Suleman - <a href="http://www.marghoobsuleman.com" target="_blank">http://www.marghoobsuleman.com</a>
  5.  * @version 1.3
  6.  * @date January 18, 2009
  7.  * @date updated: February 05, 2009
  8.  * @copyright (c) 2009 Marghoob Suleman (http://www.giftlelo.com)
  9.  */
  10.  
  11. //To do after loading HTML
  12. $(document).ready(function(){
  13. 	ImagesEnlarge.setAnimationStatus(setAnimationStatus);
  14. 	ImagesEnlarge.setExtendZoomStatus(extendedZoomSatus);
  15. 	ImagesEnlarge.init();
  16. });
  17.  
  18. ImagesEnlarge = {
  19. 	settings: {
  20. 		useExtendedZoom:0,
  21. 		interval:0,
  22. 		shadowDistance:5,
  23. 		shadowTransparency:.5,
  24. 		allImageHolder:'featured-products_block_center',
  25. 		loaderImage:'modules/imagesenlarge/loader.gif',
  26. 		useAnimation:1,//make it zero if you dont want to animate
  27. 		imageArray:[],
  28. 		hrefHolder:{index:'a.product_image', otherpages:'a.product_img_link', indexBlock:'#featured-products_block_center .ajax_block_product', otherBlock:'#product_list div.center_block'}
  29. 	},
  30. 	imgHolderDiv:"<div id='msImageShadow' onmouseover='ImagesEnlarge.hideDivs();'></div><div id='msBigImageHolder' class='border' style='display:none' onmouseover='ImagesEnlarge.hideDivs();'></div>",
  31. 	init: function() {
  32. 		$('body').append(this.imgHolderDiv);
  33. 		//set div style
  34. 		this.alterAttributes();
  35. 	},
  36. 	getCurrentSourceID: function() {
  37. 		var currentpage = $('body').attr('id');
  38. 		var pageid;
  39. 		var srcBlock;
  40. 		if(currentpage=='index') {
  41. 			pageid = this.settings.hrefHolder.index;
  42. 			srcBlock = this.settings.hrefHolder.indexBlock;
  43. 		} else {
  44. 			pageid = this.settings.hrefHolder.otherpages;
  45. 			srcBlock = this.settings.hrefHolder.otherBlock;
  46. 		}
  47. 		return {aBlock:pageid, sourceBlock:srcBlock};
  48. 	},
  49. 	getImagePath: function(path) {
  50. 		var extract = path.split("/");
  51. 		var sPath = "";
  52. 		for(var i=0;i<extract.length-1;i++) {
  53. 			sPath+=extract[i]+"/";
  54. 		}
  55. 		return sPath;
  56. 	},
  57. 	setID: function(id, path) {
  58. 		var sID = id;
  59. 		var sPath = path;
  60. 		var imgPath = this.getImagePath(sPath);
  61. 		var extract = sPath.split("/");
  62. 		var imgName = extract[extract.length-1];
  63. 		var largeImg = imgPath+imgName.substr(0, imgName.length-9)+"-large.jpg";
  64. 		var thickImg = imgPath+imgName.substr(0, imgName.length-9)+"-thickbox.jpg";
  65. 		var homeImg = imgPath+imgName.substr(0, imgName.length-9)+"-home.jpg";
  66. 		var mediumImg = imgPath+imgName.substr(0, imgName.length-9)+"-medium.jpg";
  67. 		var smallImg = imgPath+imgName.substr(0, imgName.length-9)+"-small.jpg";
  68. 		ImagesEnlarge.settings.imageArray[sID] = {small:smallImg, medium:mediumImg, home:homeImg, large:largeImg, thickbox:thickImg};
  69. 		//console.debug("ImagesEnlarge.settings.imageArray[sID] " + ImagesEnlarge.settings.imageArray[sID].large);
  70. 	},
  71. 	getID:function(id) {
  72. 		return ImagesEnlarge.settings.imageArray[id];
  73. 	},
  74. 	alterAttributes: function() {
  75. 		//var blocks = $('');
  76. 		var sourceBlock = this.getCurrentSourceID();
  77. 		var blocks = $(sourceBlock.sourceBlock);
  78. 		var total = blocks.length;
  79. 		if(total>0) {
  80. 			if(ImagesEnlarge.settings.useAnimation==1) {
  81. 				$("#msBigImageHolder").css({position:'absolute', float:'right', top:'30%', left:'50%'});
  82. 				$("#msImageShadow").css({position:'absolute', float:'right', top:'30%', left:'50%'});
  83. 			}	
  84. 			var sourceA = sourceBlock.aBlock;
  85. 			for(var iCount=0;iCount<total;iCount++) {
  86. 				var currentBlock = blocks[iCount];
  87. 				var id = "product_list_"+iCount;
  88. 				currentBlock.id = id;
  89. 				var currentA = $("#"+id+ " "+sourceA)[0];
  90. 				var aID = "zoomer_"+iCount;
  91. 				currentA.id = aID;
  92. 				var imgTag = currentA.firstChild;
  93. 				var imgName = $(imgTag).attr("src");
  94. 				this.setID(aID, imgName);
  95.  
  96. 				//set clip
  97. 				//var sClipDiv = "<div id='clip_'"+iCount+" class='msClip'></div>";
  98. 				//$(aID).before(sClipDiv);
  99.  
  100. 			//set method
  101. 			$("#"+aID).bind('mouseenter', this.showSmallImage);
  102. 			if(ImagesEnlarge.settings.useExtendedZoom==1) {
  103. 				$("#"+aID).bind('mousemove', this.showClipedImage);
  104. 			}
  105.  
  106. 			$("#"+aID).bind('mouseleave',function() {
  107. 												 ImagesEnlarge.hideDivs();
  108. 						});
  109.  
  110. 			}
  111.  
  112. 		}
  113. 	},
  114. 	hideDivs: function() {
  115. 		$("#msImageShadow").hide("fast");												  
  116. 		$("#msBigImageHolder").hide("fast");	
  117. 	},
  118. 	hideOtherPluginDivs: function() {
  119. 		//this section hides other divs if you've already used suleman's modules.
  120. 		//Add to cart extended : <a href="http://www.marghoobsuleman.com/node/75" target="_blank">http://www.marghoobsuleman.com/node/75</a>
  121. 		if($('#moreTags').length>0)
  122. 			$('#moreTags').hide("fast");
  123. 	},
  124. 	showClipedImage: function(e) {
  125. 		var targetHolder  = "#"+this.id;
  126. 		var src = "#msBigImageHolder";
  127. 		var imgHolder = "#imgHolder";
  128. 		var tagerHolderPosition = $(targetHolder).position();
  129. 		var posCliper = {left:tagerHolderPosition.left - e.pageX, top:tagerHolderPosition.top - e.pageY}
  130. 		//console.debug("posCliper " + posCliper.left + " clientY " + posCliper.top)
  131. 	  	var ratio = 232.5581395;
  132. 	  	var xPos = ((posCliper.left) * ratio) / 100;
  133. 	  	var yPos = ((posCliper.top) * ratio) / 100;
  134. 	  	$(imgHolder).css({left:xPos+'px', top:yPos+'px'});	
  135. 	},
  136. 	getImageName: function(id) {
  137. 		var oImgNames = ImagesEnlarge.getID(id);
  138. 		var imgName = oImgNames.large
  139. 		if(ImagesEnlarge.settings.useExtendedZoom==1) {
  140. 			imgName = oImgNames.thickbox;
  141. 		}
  142. 		return imgName;
  143. 	},
  144. 	showSmallImage: function() {
  145. 							//hides other divs if you've already used suleman's modules.
  146. 							ImagesEnlarge.hideOtherPluginDivs();
  147. 							//start code
  148. 							var imgHTML = "<div class='border' style='position:absolute; background-color:#ffffff' id='imgLoader'><img src='"+ImagesEnlarge.settings.loaderImage+"' border='0' /></div>";
  149. 							$("#msBigImageHolder").html(imgHTML);
  150.  
  151. 							var getImage = ImagesEnlarge.getImageName(this.id);
  152. 							imgHTML += "<div id='imgHolder'><img id='bigImg' src='"+getImage+"' border='0' class='border' hspace='10' vspace='10' /></div>";
  153. 							$("#msBigImageHolder").html(imgHTML);
  154. 							ImagesEnlarge.checkImageLoad();
  155. 							var xy = $(this).offset();
  156. 							var height = 0;
  157. 							var width = $(this).width();
  158. 							$("#msBigImageHolder").css({'position':'absolute'})
  159. 							if(ImagesEnlarge.settings.useAnimation==1) {
  160. 								if($('body').attr('id')=='index'){
  161. 									$("#msBigImageHolder").css( {'left':(xy.left+width+width)+'px', 'top':(xy.top-height)+'px'})
  162. 									$("#msImageShadow").css( {'left':(xy.left+width+width)+'px', 'top':(xy.top-height)+'px'})
  163. 								}
  164. 								$("#msBigImageHolder").show("fast", function(e) {
  165. 																	$("#msBigImageHolder").animate( {'left':(xy.left+width)+'px', 'top':(xy.top+height)+'px'}, { queue:false, duration:500}, 'slow');
  166. 																	/*
  167. 																	var topPos = xy.top+height;
  168. 																	var leftPos = xy.left+width;
  169. 																	 if(($("#msBigImageHolder").width()+leftPos)>$(window).width()) {leftPos = leftPos - width - $("#msBigImageHolder").width() - 20;}
  170. 																	   $("#msBigImageHolder").animate( {'left':(leftPos)+'px', 'top':(topPos)+'px'}, { queue:false, duration:500 } )
  171. 																		*/   
  172. 																		   });
  173. 									$("#msImageShadow").show("fast", function(e) {
  174. 																		$("#msImageShadow").css({'opacity':ImagesEnlarge.settings.shadowTransparency});
  175. 																		$("#msImageShadow").animate( {'left':(xy.left+width+ImagesEnlarge.settings.shadowDistance)+'px', 'top':(xy.top+height+ImagesEnlarge.settings.shadowDistance)+'px'}, { queue:false, duration:500} )																			  
  176. 																			  });
  177.  
  178. 							} else {
  179. 								$("#msBigImageHolder").css({'left':(xy.left+width)+'px', 'top':(xy.top+height)+'px'});
  180. 								$("#msBigImageHolder").show("fast");
  181. 								$("#msImageShadow").css({'opacity':ImagesEnlarge.settings.shadowTransparency,'left':(xy.left+width+ImagesEnlarge.settings.shadowDistance)+'px', 'top':(xy.top+height+ImagesEnlarge.settings.shadowDistance)+'px'});
  182. 								$("#msImageShadow").show("fast");
  183. 							}
  184. 	},
  185. 	getImageStatus: function() {
  186. 		var img = $("#msBigImageHolder #bigImg")[0];
  187. 		if(img.complete==true) {
  188. 			$('#imgLoader').hide();
  189. 			clearInterval(ImagesEnlarge.settings.interval);
  190. 		} else {
  191. 			//console.debug("2 " + img.complete)
  192. 		}
  193. 	},
  194. 	checkImageLoad: function() {
  195. 		ImagesEnlarge.settings.interval = setInterval(ImagesEnlarge.getImageStatus, 500);
  196.  
  197. 	},
  198. 	setAnimationStatus: function(status) {
  199. 		ImagesEnlarge.settings.useAnimation = parseInt(status);
  200. 	},
  201. 	setExtendZoomStatus: function(extendedZoom) {
  202. 		ImagesEnlarge.settings.useExtendedZoom = parseInt(extendedZoom);
  203. 	}
  204. }
[PHP] pobierz, plaintext
Arcioch
1.10.2012, 12:16:57
Po pierwsze ten skrypt się buguje wink.gif Po drugie na bocznych panelach nie jest odpalana ta funkcja dlatego się one nie powiększają wink.gif
saviola15
1.10.2012, 12:20:43
Hmmm.... To jak zrobić żeby działało wszędzie bo nie mam pomysłu ;/
Arcioch
1.10.2012, 12:34:56
dla medium działa poprawnie wink.gif chodzi o to aby dodać klasę do tych najlepszych produktów a potem dopisać ją do inita i powinno działać wink.gif
saviola15
1.10.2012, 12:40:40
Tutaj ? 

[PHP] pobierz, plaintext 
  1. ImagesEnlarge = {
  2. 	settings: {
  3. 		useExtendedZoom:0,
  4. 		interval:0,
  5. 		shadowDistance:5,
  6. 		shadowTransparency:.5,
  7. 		allImageHolder:'featured-products_block_center',
  8. 		loaderImage:'modules/imagesenlarge/loader.gif',
  9. 		useAnimation:1,//make it zero if you dont want to animate
  10. 		imageArray:[],
  11. 		hrefHolder:{index:'a.product_image', otherpages:'a.product_img_link', indexBlock:'#featured-products_block_center .ajax_block_product', otherBlock:'#product_list div.center_block'}
  12. 	},
[PHP] pobierz, plaintext
Arcioch
1.10.2012, 12:45:28
tak mi się wydaje ale nigdy nie miałem odczynienia z tym skryptem i prestem smile.gif chyba musisz zmienić uchwyt diva do boxu po prawej bo masz iny niż tu dlatego nie działa wink.gif
saviola15
1.10.2012, 21:32:50 
[PHP] pobierz, plaintext 
  1. ImagesEnlarge = {
  2. 	settings: {
  3. 		useExtendedZoom:0,
  4. 		interval:0,
  5. 		shadowDistance:5,
  6. 		shadowTransparency:.5,
  7. 		allImageHolder:'featured-products_block_center',
  8. 		loaderImage:'modules/imagesenlarge/loader.gif',
  9. 		useAnimation:1,//make it zero if you dont want to animate
  10. 		imageArray:[],
  11. 		hrefHolder:{index:'a.product_image', otherpages:'a.product_img_link', indexBlock:'#featured-products_block_center .ajax_block_product', otherBlock:'#product_list div.center_block', otherBlock:'#product_list div.block.block_content' }
[PHP] pobierz, plaintext






Dodałem : otherBlock:'#product_list div.block.block_content' i nie działa dodatkowo już nigdzie nie działa sad.gif Jakieś sugestie ?
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.