Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: [PHP][JavaScript] Problem z powiększeniem zdjęc po najechaniu
Forum PHP.pl > Forum > Przedszkole
saviola15
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 ;/

  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. }
Arcioch
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
Hmmm.... To jak zrobić żeby działało wszędzie bo nie mam pomysłu ;/
Arcioch
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
Tutaj ?

  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. },
Arcioch
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. 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' }






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.