API tools faq
paste
Guest User

Untitled

a guest
Jan 16th, 2018
182
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 11.91 KB | None | 0 0
raw download clone embed print report
  1. /*
  2. * Copyright 2016 Seven Spikes Ltd. All rights reserved. (http://www.nop-templates.com)
  3. * http://www.nop-templates.com/t/licensinginfo
  4. */
  5.  
  6. !function(e,t){e(document).ready(function(){var r=e(".cloudZoomAdjustPictureOnProductAttributeValueChange"),a=e(".cloudZoomPictureThumbnailsInCarouselData");if("true"===r.attr("data-isIntegratedByWidget")){var i="#sevenspikes-cloud-zoom",o=function(t){var r=t.attr("data-selectorOfTheParentElementOfTheCloudZoomWindow");if(void 0!=r&&""!==r){var a=e(r);if(void 0!=a){var i=t.attr("data-zoomWindowElementId");if(void 0==i||""===i)return;var o="<div id="+i+' style="position: absolute;"></div>';e(a).prepend(o)}}},l=e(i),n=l.attr("data-defaultImageContainerSelector");if(void 0==n||""===n)return;if(!t.isMobile()&&t.getViewPort().width>980){var u,c;e(n).each(function(){e(this).find(i).length<=0?u=e(this):c=e(this)}),null!=u&&null!=c&&(u.replaceWith(c),c.show()),o(l),e.event.trigger({type:"nopCloudZoomLoadCompletedEvent"})}else l.length>0&&e(n).length>1&&l.closest(".gallery").remove()}if(a.length>0){var s=parseInt(a.attr("data-numVisible"))||4,d="true"===a.attr("data-vertical");if(e("#carousel").jcarousel({vertical:d,numVisible:s,scroll:1,wrap:"none",size:parseInt(a.attr("data-size"))||0,rtl:"true"===a.attr("data-rtl")}),"true"===a.attr("data-vertical")){var h=e("#carousel li").outerHeight(!0);e("#carousel").parent().css({height:h*s+"px"})}else e("#carousel").css({width:"20000em","font-size":"13px"});e(".jcarousel-prev, .jcarousel-next").disableTextSelect()}if(e(".cloudZoomEnableClickToZoom").length>0&&e(".picture").on("click",".mousetrap",function(){var t=new Array,r=function(e,t){this.src=e,this.title=t};e(".picture-thumbs a.cloud-zoom-gallery").length<1&&t.push(new r(e(".picture a.cloud-zoom").attr("href"),e(".picture a.cloud-zoom").attr("title"))),e(".picture-thumbs a.cloud-zoom-gallery").each(function(){t.push(new r(e(this).attr("href"),e(this).attr("title")))});for(var a=0,i=0;i<t.length;i++)if(t[i].src===e(".picture a.cloud-zoom").attr("href")){a=i;break}e.magnificPopup.open({items:t,type:"image",removalDelay:300,gallery:{enabled:!0}},a)}),r.length>0){var p=r.attr("data-productId"),f="_fullsize",m="productAttributeValueAdjustmentTable_"+p;e('[id^="product_attribute_"]').each(function(){var t=e(this);t.closest(".product-variant-line").length>0||t.on("change",function(){var r=t.attr("id"),a="";if(t.is(":radio")&&t.is(":checked")||t.is(":checkbox")&&t.is(":checked"))a=window[m][r+f];else if(t.is("select")){var i=t.find("option:selected").index();-1!==i&&(a=window[m][r+f][i])}"string"==typeof a&&""!==a&&(e('.cloud-zoom-gallery[href="'+a+'"]').click(),e.event.trigger({type:"nopMainProductImageChanged",target:t,pictureDefaultSizeUrl:a,pictureFullSizeUrl:a}))})})}})}(jQuery,sevenSpikes);
  7.  
  8. /*
  9. * Copyright 2014 Seven Spikes Ltd. All rights reserved. (http://www.nop-templates.com)
  10. * http://www.nop-templates.com/t/licensinginfo
  11. */
  12.  
  13. @media all and (max-width: 1000px) {
  14.  
  15. #sevenspikes-cloud-zoom:before {
  16. display: none;
  17. }
  18. #sevenspikes-cloud-zoom img {
  19. position: static;
  20. }
  21.  
  22. }
  23.  
  24. @media all and (min-width: 1001px) {
  25.  
  26. /* theme overwritting styles */
  27.  
  28. .gallery {
  29. font-size: 0;
  30. }
  31. .gallery .picture-wrapper {
  32. /*** !!! set line-height to the appropriate height !!! ***/
  33. line-height: 320px;
  34. }
  35. .gallery .picture-wrapper .picture:before {
  36. display: none;
  37. }
  38.  
  39. /* main picture styles */
  40.  
  41. #sevenspikes-cloud-zoom {
  42. margin: 0;
  43. overflow: visible;
  44. text-align: center;
  45. font-size: 0;
  46. }
  47. #sevenspikes-cloud-zoom:before {
  48. display: none;
  49. }
  50. #wrap {
  51. display: block;
  52. max-width: 100%;
  53. vertical-align: middle;
  54. line-height: 0;
  55. }
  56. #wrap a {
  57. position: relative;
  58. max-width: 100%;
  59. vertical-align: middle;
  60. line-height: 0;
  61. overflow: hidden;
  62. }
  63. #wrap a:before {
  64. content: "";
  65. display: block;
  66. padding-top: 125%;
  67. }
  68. #wrap img {
  69. }
  70.  
  71. /* This is the overlay element. */
  72.  
  73. #wrap > .mousetrap {
  74. right: 0;
  75. bottom: 0;
  76. margin: auto;
  77. }
  78. .cloud-zoom-lens {
  79. margin: 0;
  80. border: none;
  81. background-color: #fff;
  82. cursor: crosshair;
  83. }
  84.  
  85. /* This is the zoom window. */
  86.  
  87. #cloudZoomWindowElement {
  88. left: 0;
  89. top: 0;
  90. z-index: 1;
  91. }
  92. #cloud-zoom-big {
  93. border: none;
  94. overflow: hidden;
  95. bottom: 0;
  96. margin: auto;
  97. }
  98. .overview #cloud-zoom-big {
  99. position: static !important; /* fix for the zoom window so that its wrapper takes the dimensions */
  100. }
  101.  
  102. /* This is for the title text. */
  103.  
  104. .cloud-zoom-title {
  105. background-color: #000;
  106. padding: 5px;
  107. text-align: center;
  108. font-size: 11px;
  109. line-height: normal;
  110. font-weight: bold;
  111. color: #fff;
  112. }
  113.  
  114. /* This is the loading message. */
  115.  
  116. .cloud-zoom-loading {
  117. width: 100% !important;
  118. height: 100% !important;
  119. top: 0 !important;
  120. left: 0 !important;
  121. right: 0 !important;
  122. bottom: 0 !important;
  123. font-size: 0;
  124. background: rgba(255,255,255,.5);
  125. opacity: 1 !important;
  126. }
  127. @keyframes spinner {
  128. from {
  129. transform: rotate(0deg);
  130. }
  131. to {
  132. transform: rotate(360deg);
  133. }
  134. }
  135. .cloud-zoom-loading:after,
  136. .cloud-zoom-loading:before {
  137. content: '';
  138. position: absolute;
  139. border: 2px solid #454545;
  140. width: 30px;
  141. height: 30px;
  142. top: 0;
  143. left: 0;
  144. right: 0;
  145. bottom: 0;
  146. margin: auto;
  147. outline: 1px solid transparent; /*firefox fix*/
  148. }
  149. .cloud-zoom-loading:after {
  150. animation: spinner 2.5s linear infinite;
  151. }
  152. .cloud-zoom-loading:before {
  153. width: 44px;
  154. height: 44px;
  155. animation: spinner 2.5s linear infinite;
  156. animation-direction: reverse;
  157. }
  158.  
  159. /* with product ribbons enabled */
  160.  
  161. .gallery .ribbon-wrapper {
  162. /*never display as inline or inline-block*/
  163. vertical-align: middle;
  164. line-height: 0;
  165. }
  166. .gallery .ribbon-wrapper:hover .ribbon-position {
  167. opacity: 0;
  168. }
  169.  
  170. }
  171.  
  172. @** Copyright 2016 Seven Spikes Ltd. All rights reserved. (http://www.nop-templates.com)
  173. * http://www.nop-templates.com/t/licensinginfo
  174. *@
  175.  
  176. @using Nop.Core
  177. @using Nop.Core.Infrastructure
  178. @using SevenSpikes.Nop.Plugins.CloudZoom.Models
  179.  
  180. @model CloudZoomModel
  181.  
  182. @if (!string.IsNullOrEmpty(Model.DefaultPicture.FullSizeImageUrl))
  183. {
  184. Html.AddCssFileParts("~/Plugins/SevenSpikes.Nop.Plugins.CloudZoom/Themes/" + Model.Theme + "/Content/cloud-zoom.1.0.2/CloudZoom.css");
  185.  
  186. var supportRtl = EngineContext.Current.Resolve<IWorkContext>().WorkingLanguage.Rtl;
  187. if (supportRtl)
  188. {
  189. Html.AddCssFileParts("~/Plugins/SevenSpikes.Nop.Plugins.CloudZoom/Styles/CloudZoom.common.rtl.css");
  190. }
  191.  
  192. Html.AddScriptParts("~/Plugins/SevenSpikes.Core/Scripts/SevenSpikesExtensions.min.js");
  193. Html.AddScriptParts("~/Plugins/SevenSpikes.Nop.Plugins.CloudZoom/Scripts/cloud-zoom.1.0.2/cloud-zoom.1.0.2.min.js");
  194.  
  195. if (Model.IsIntegratedByWidget)
  196. {
  197. Html.AddScriptParts("~/Plugins/SevenSpikes.Nop.Plugins.CloudZoom/Scripts/CloudZoom.min.js");
  198. }
  199.  
  200. if (Model.EnableClickToZoom)
  201. {
  202. Html.AddCssFileParts("~/Content/magnific-popup/magnific-popup.css");
  203. Html.AddScriptParts("~/Scripts/jquery.magnific-popup.min.js");
  204.  
  205. <script type="text/javascript">
  206. $(document).ready(function () {
  207. $(".picture").on("click", ".mousetrap", function () {
  208. var mainPictureHref = $('.picture a.cloud-zoom').attr('href');
  209. var cloudZoomThumbs = $('.picture-thumbs a.cloud-zoom-gallery');
  210. var imgSources = new Array();
  211. var imgItem = function(source) {
  212. this.src = source;
  213. };
  214.  
  215. cloudZoomThumbs.each(function(){
  216. imgSources.push(new imgItem($(this).attr('href')));
  217. });
  218.  
  219. if(imgSources.length === 0){
  220. imgSources.push(new imgItem(mainPictureHref));
  221. }
  222.  
  223. $.magnificPopup.open({
  224. items: imgSources,
  225. type: 'image',
  226. removalDelay: 300,
  227. gallery: {
  228. enabled: true
  229. }
  230. }, cloudZoomThumbs.filter('.active').index());
  231. });
  232. });
  233. </script>
  234. }
  235. <script type="text/javascript">
  236. @{
  237. string pictureAdjustmentTableName = string.Format("productAttributeValueAdjustmentTable_{0}", Model.ProductId);
  238. string pictureAdjustmentFuncName = string.Format("adjustProductAttributeValuePicture_CloudZoom_{0}", Model.ProductId);
  239. string pictureFullSizePrefix = "fullsize";
  240. }
  241.  
  242. function @(pictureAdjustmentFuncName)(controlId) {
  243. var ctrl = $('#' + controlId);
  244. var pictureFullSizeUrl = '';
  245. if((ctrl.is(':radio') && ctrl.is(':checked')) || (ctrl.is(':checkbox') && ctrl.is(':checked'))) {
  246. pictureFullSizeUrl = @(pictureAdjustmentTableName)[controlId + '_@(pictureFullSizePrefix)'];
  247. } else if(ctrl.is('select')) {
  248. var idx = $('#' + controlId + " option").index($('#' + controlId + " option:selected"));
  249. if(idx !== -1) {
  250. pictureFullSizeUrl = @(pictureAdjustmentTableName)[controlId + '_@(pictureFullSizePrefix)'][idx];
  251. }
  252. }
  253.  
  254. if (typeof pictureFullSizeUrl == 'string' && pictureFullSizeUrl !== '') {
  255. var zoomGallerySelector = ".cloud-zoom-gallery[href='" + pictureFullSizeUrl + "']";
  256. $(zoomGallerySelector).click();
  257.  
  258. $.event.trigger({
  259. type: 'nopMainProductImageChanged',
  260. target: ctrl,
  261. pictureDefaultSizeUrl: pictureFullSizeUrl,
  262. pictureFullSizeUrl: pictureFullSizeUrl
  263. });
  264. }
  265. }
  266.  
  267. $(document).ready(function () {
  268. $("[id^='product_attribute_']").on('change', function() {
  269. @(pictureAdjustmentFuncName)($(this).attr('id'));
  270. });
  271. });
  272. </script>
  273.  
  274. <div class="gallery sevenspikes-cloudzoom-gallery">
  275. <div class="picture-wrapper">
  276. <div class="picture" id="sevenspikes-cloud-zoom" data-zoomwindowelementid="@Model.ElementId"
  277. data-selectoroftheparentelementofthecloudzoomwindow="@Model.SettingsModel.SelectorOfTheParentElementOfTheCloudZoomWindow"
  278. data-defaultimagecontainerselector="@Model.SettingsModel.DefaultImageContainerSelector">
  279.  
  280. <a href="@Model.DefaultPicture.FullSizeImageUrl" class="cloud-zoom" id="zoom1" rel="@Model.DefaultPicture.DefaultRelation">
  281. <img src="@Model.DefaultPicture.SmallImageUrl" alt="@Model.DefaultPicture.AlternateText" title="@Model.DefaultPicture.Title" id="cloudZoomImage" itemprop="image" />
  282. </a>
  283.  
  284. @if (Model.Pictures.Count > 1)
  285. {
  286. <div class="picture-thumbs-navigation-arrow picture-thumbs-prev-arrow">
  287. <span>@T("SevenSpikes.Themes.Uptown.Product.ImageThumbs.Prev")</span>
  288. <img src="@Model.DefaultPicture.TinyImageUrl" data-fullSizeImageUrl="@Model.DefaultPicture.FullSizeImageUrl" alt="Previous" />
  289. </div>
  290. <div class="picture-thumbs-navigation-arrow picture-thumbs-next-arrow">
  291. <span>@T("SevenSpikes.Themes.Uptown.Product.ImageThumbs.Next")</span>
  292. <img src="@Model.DefaultPicture.TinyImageUrl" data-fullSizeImageUrl="@Model.DefaultPicture.FullSizeImageUrl" alt="Next" />
  293. </div>
  294. <div class="picture-thumbs">
  295. @foreach (var picture in Model.Pictures)
  296. {
  297. <a class="cloud-zoom-gallery" href="@picture.FullSizeImageUrl" title="@picture.Title" rel="@picture.GalleryRelation">
  298. <img class="cloud-zoom-gallery-img" src="@picture.TinyImageUrl" alt="@picture.AlternateText" title="@picture.Title" />
  299. </a>
  300. }
  301. </div>
  302. }
  303. </div>
  304. </div>
  305. </div>
  306. }
Add Comment
Please, Sign In to add comment
Public Pastes
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy.  OK, I Understand
Not a member of Pastebin yet?
Sign Up, it unlocks many cool features!