Produced by Araxis Merge on 2022-09-08 08:49:15 +0000. See www.araxis.com for information about Merge. This report uses XHTML and CSS2, and is best viewed with a modern standards-compliant browser. For optimum results when printing this report, use landscape orientation and enable printing of background images and colours in your browser.
| # | Location | File | Last Modified |
|---|---|---|---|
| 1 | /Volumes/Data 1/Ampps/www/Porto v4.0.2/Theme Files/Magento 2.x/Porto Theme/app/design/frontend/Smartwave/porto | gallery.phtml | 2021-04-28 11:05:02 +0000 |
| 2 | 2022-09-08 08:49:15 +0000 |
| Description | Between Files 1 and 2 | |
|---|---|---|
| Text Blocks | Lines | |
| Unchanged | 0 | 0 |
| Changed | 0 | 0 |
| Inserted | 0 | 0 |
| Removed | 1 | 482 |
| Whitespace | Consecutive whitespace is treated as a single space |
|---|---|
| Character case | Differences in character case are significant |
| Line endings | Differences in line endings (CR and LF characters) are ignored |
| CR/LF characters | Not shown in the comparison detail |
| Active line-pairing rules |
No regular expressions were active.
| 1 | <?php | |||||
| 2 | /** | |||||
| 3 | * Copyright © Magento, Inc. All rights reserved. | |||||
| 4 | * See COPYING.txt for license details. | |||||
| 5 | */ | |||||
| 6 | ||||||
| 7 | // @codingStandardsIgnoreFile | |||||
| 8 | ||||||
| 9 | /** | |||||
| 10 | * Product media data template | |||||
| 11 | * | |||||
| 12 | * @var $block \Magento\Catalog\Block\Product\View\Gallery | |||||
| 13 | */ | |||||
| 14 | ?> | |||||
| 15 | <?php | |||||
| 16 | $helper = $block->getData('imageHelper'); | |||||
| 17 | $porto_helper = $this->helper('Smartwave\Porto\Helper\Data'); | |||||
| 18 | $_config = $porto_helper->getConfig('porto_settings/product'); | |||||
| 19 | $image_width = (isset($_config['ratio_width']) && $_config['ratio_width'])?$_config['ratio_width']:600; | |||||
| 20 | $image_height = (isset($_config['ratio_height']) && $_config['ratio_height'])?$_config['ratio_height']:600; | |||||
| 21 | $aspect_ratio = (isset($_config['aspect_ratio']))?$_config['aspect_ratio']:0; | |||||
| 22 | if ($aspect_ratio) | |||||
| 23 | $image_height = $image_width; | |||||
| 24 | $thumb_width = 75; | |||||
| 25 | $thumb_height = 75 * $image_height / $image_width; | |||||
| 26 | if ($aspect_ratio) | |||||
| 27 | $thumb_height = 75; | |||||
| 28 | $_product = $block->getProduct(); | |||||
| 29 | $page_type = $_product->getData('product_page_type'); | |||||
| 30 | if(!$page_type) | |||||
| 31 | $page_type = isset($_config['product_page_type'])?$_config['product_page_type']:''; | |||||
| 32 | $image_size = $_product->getData('product_image_size'); | |||||
| 33 | $thumbnail_type = (isset($_config['vertical_thumbnail']) && $_config['vertical_thumbnail'])?'vertical':'horizontal'; | |||||
| 34 | if($page_type == 'wide_grid') { | |||||
| 35 | $thumbnail_type = 'vertical'; | |||||
| 36 | $thumb_width = 100; | |||||
| 37 | $thumb_height = 100; | |||||
| 38 | } | |||||
| 39 | ?> | |||||
| 40 | <?php if($page_type == 'carousel'): ?> | |||||
| 41 | <?php | |||||
| 42 | $gallery_images = json_decode($block->getGalleryImagesJson()); | |||||
| 43 | ?> | |||||
| 44 | <div id="gallery_images" class="owl-carousel product-image-carousel"> | |||||
| 45 | <?php foreach($gallery_images as $gallery_image): ?> | |||||
| 46 | <div class="item"> | |||||
| 47 | <img src="<?php echo $gallery_image->img; ?>" alt=""/> | |||||
| 48 | </div> | |||||
| 49 | <?php endforeach; ?> | |||||
| 50 | </div> | |||||
| 51 | <div class="short-custom-block" style="display: none;"><?php echo $porto_helper->filterContent($_product->getData("custom_block")); ?></div> | |||||
| 52 | <div class="fullwidth-custom-block" style="display: none;"><?php echo $porto_helper->filterContent($_product->getData("custom_block_2")); ?></div> | |||||
| 53 | <script type="text/javascript"> | |||||
| 54 | require([ | |||||
| 55 | 'jquery', | |||||
| 56 | 'owl.carousel/owl.carousel.min' | |||||
| 57 | ], function ($) { | |||||
| 58 | $("#gallery_images").owlCarousel({ | |||||
| 59 | autoplay: false, | |||||
| 60 | autoplayTimeout: 5000, | |||||
| 61 | autoplayHoverPause: true, | |||||
| 62 | loop: true, | |||||
| 63 | navRewind: true, | |||||
| 64 | margin: 0, | |||||
| 65 | nav: true, | |||||
| 66 | navText: ["<em class='porto-icon-left-open-huge'></em>","<em class='porto-icon-right-open-huge'></em>"], | |||||
| 67 | dots: false, | |||||
| 68 | responsive: { | |||||
| 69 | 0: { | |||||
| 70 | items:1 | |||||
| 71 | }, | |||||
| 72 | 768: { | |||||
| 73 | items:1 | |||||
| 74 | }, | |||||
| 75 | 992: { | |||||
| 76 | items:2 | |||||
| 77 | }, | |||||
| 78 | 1200: { | |||||
| 79 | items:3 | |||||
| 80 | } | |||||
| 81 | } | |||||
| 82 | }); | |||||
| 83 | $(document).ready(function(){ | |||||
| 84 | $(".product-info-main > .product-info-price").before($(".short-custom-block").show().detach()); | |||||
| 85 | $(".page-main").after($(".fullwidth-custom-block").show().detach()); | |||||
| 86 | $(".product-info-main > .prev-next-products").after($(".product-social-links").detach()); | |||||
| 87 | }); | |||||
| 88 | }); | |||||
| 89 | </script> | |||||
| 90 | <?php elseif($page_type == 'grid'): ?> | |||||
| 91 | <?php | |||||
| 92 | $gallery_images = json_decode($block->getGalleryImagesJson()); | |||||
| 93 | ?> | |||||
| 94 | <div id="gallery_images" class="row"> | |||||
| 95 | <?php foreach($gallery_images as $gallery_image): ?> | |||||
| 96 | <div class="col-sm-6"> | |||||
| 97 | <div class="product-image-grid"> | |||||
| 98 | <img src="<?php echo $gallery_image->img; ?>" alt=""/> | |||||
| 99 | </div> | |||||
| 100 | </div> | |||||
| 101 | <?php endforeach; ?> | |||||
| 102 | </div> | |||||
| 103 | <?php elseif($page_type == 'sticky_right'): ?> | |||||
| 104 | <?php | |||||
| 105 | $gallery_images = json_decode($block->getGalleryImagesJson()); | |||||
| 106 | ?> | |||||
| 107 | <div id="gallery_images"> | |||||
| 108 | <?php foreach($gallery_images as $gallery_image): ?> | |||||
| 109 | <div class="product-image-list"> | |||||
| 110 | <img src="<?php echo $gallery_image->img; ?>" alt=""/> | |||||
| 111 | </div> | |||||
| 112 | <?php endforeach; ?> | |||||
| 113 | </div> | |||||
| 114 | <div class="short-custom-block" style="display: none;"><?php echo $porto_helper->filterContent($_product->getData("custom_block")); ?></div> | |||||
| 115 | <script type="text/javascript"> | |||||
| 116 | require([ | |||||
| 117 | 'jquery' | |||||
| 118 | ], function ($) { | |||||
| 119 | var product_info_top = 0; | |||||
| 120 | var product_image_box_pos = $(".product.media").offset().top; | |||||
| 121 | ||||||
| 122 | $(window).scroll(function(){ | |||||
| 123 | product_image_box_pos = $(".product.media").offset().top; | |||||
| 124 | if($(window).innerWidth() >= 992) { | |||||
| 125 | $(".product-info-main").each(function(){ | |||||
| 126 | if(($(window).scrollTop() > product_image_box_pos - 50) && (product_image_box_pos + $(".product.media").outerHeight()) > ($(window).scrollTop() + $(this).outerHeight() + 50)) { | |||||
| 127 | product_info_top = $(window).scrollTop() - product_image_box_pos + 50; | |||||
| 128 | $(this).css('top',product_info_top + 'px'); | |||||
| 129 | } else if ($(window).scrollTop() < product_image_box_pos || $(".product.media").outerHeight() < $(this).outerHeight()) { | |||||
| 130 | product_info_top = 0; | |||||
| 131 | $(this).css('top',product_info_top + 'px'); | |||||
| 132 | } else { | |||||
| 133 | product_info_top = $(".product.media").outerHeight() - $(this).outerHeight(); | |||||
| 134 | $(this).css('top',product_info_top + 'px'); | |||||
| 135 | } | |||||
| 136 | }); | |||||
| 137 | } else { | |||||
| 138 | product_info_top = 0; | |||||
| 139 | $(".product-info-main").css('top',product_info_top + 'px'); | |||||
| 140 | } | |||||
| 141 | }); | |||||
| 142 | ||||||
| 143 | $(window).resize(function(){ | |||||
| 144 | product_image_box_pos = $(".product.media").offset().top; | |||||
| 145 | if($(window).innerWidth() >= 992) { | |||||
| 146 | $(".product-info-main").each(function(){ | |||||
| 147 | if(($(window).scrollTop() > product_image_box_pos - 50) && (product_image_box_pos + $(".product.media").outerHeight()) > ($(window).scrollTop() + $(this).outerHeight() + 50)) { | |||||
| 148 | product_info_top = $(window).scrollTop() - product_image_box_pos + 50; | |||||
| 149 | $(this).css('top',product_info_top + 'px'); | |||||
| 150 | } else if ($(window).scrollTop() < product_image_box_pos || $(".product.media").outerHeight() < $(this).outerHeight()) { | |||||
| 151 | product_info_top = 0; | |||||
| 152 | $(this).css('top',product_info_top + 'px'); | |||||
| 153 | } else { | |||||
| 154 | product_info_top = $(".product.media").outerHeight() - $(this).outerHeight(); | |||||
| 155 | $(this).css('top',product_info_top + 'px'); | |||||
| 156 | } | |||||
| 157 | }); | |||||
| 158 | } else { | |||||
| 159 | product_info_top = 0; | |||||
| 160 | $(".product-info-main").css('top',product_info_top + 'px'); | |||||
| 161 | } | |||||
| 162 | }); | |||||
| 163 | }); | |||||
| 164 | </script> | |||||
| 165 | <?php elseif($page_type == 'fullwidth'): ?> | |||||
| 166 | <div class="gallery-placeholder _block-content-loading" data-gallery-role="gallery-placeholder"> | |||||
| 167 | <div data-role="loader" class="loading-mask"> | |||||
| 168 | <div class="loader"> | |||||
| 169 | <img src="<?php /* @escapeNotVerified */ echo $block->getViewFileUrl('images/loader-1.gif'); ?>" | |||||
| 170 | alt="<?php /* @escapeNotVerified */ echo __('Loading...') ?>"> | |||||
| 171 | </div> | |||||
| 172 | </div> | |||||
| 173 | </div> | |||||
| 174 | <!--Fix for jumping content. Loader must be the same size as gallery.--> | |||||
| 175 | <script> | |||||
| 176 | var config = { | |||||
| 177 | "width": <?php /* @escapeNotVerified */ echo $image_width; ?>, | |||||
| 178 | "thumbheight": <?php /* @escapeNotVerified */ echo $block->getImageAttribute('product_page_image_small', 'height') | |||||
| 179 | ?: $block->getImageAttribute('product_page_image_small', 'width'); ?>, | |||||
| 180 | "navtype": "<?php /* @escapeNotVerified */ echo $block->getVar("gallery/navtype"); ?>", | |||||
| 181 | <?php if (!$aspect_ratio): ?> | |||||
| 182 | "height": <?php /* @escapeNotVerified */ echo $image_height; ?> | |||||
| 183 | <?php endif; ?> | |||||
| 184 | }, | |||||
| 185 | thumbBarHeight = 0, | |||||
| 186 | loader = document.querySelectorAll('[data-gallery-role="gallery-placeholder"] [data-role="loader"]')[0]; | |||||
| 187 | ||||||
| 188 | if (config.navtype === 'horizontal') { | |||||
| 189 | thumbBarHeight = config.thumbheight; | |||||
| 190 | } | |||||
| 191 | ||||||
| 192 | loader.style.paddingBottom = ( config.height / config.width * 100) + "%"; | |||||
| 193 | </script> | |||||
| 194 | <script type="text/x-magento-init"> | |||||
| 195 | { | |||||
| 196 | "[data-gallery-role=gallery-placeholder]": { | |||||
| 197 | "mage/gallery/gallery": { | |||||
| 198 | "mixins":["magnifier/magnify"], | |||||
| 199 | "magnifierOpts": <?= /* @escapeNotVerified */ $block->getMagnifier() ?>, | |||||
| 200 | "data": <?= /* @escapeNotVerified */ $block->getGalleryImagesJson() ?>, | |||||
| 201 | "options": { | |||||
| 202 | "nav": "<?= /* @escapeNotVerified */ $block->getVar("gallery/nav") ?>", | |||||
| 203 | <?php if (($block->getVar("gallery/loop"))): ?> | |||||
| 204 | "loop": <?= /* @escapeNotVerified */ $block->getVar("gallery/loop") ?>, | |||||
| 205 | <?php endif; ?> | |||||
| 206 | <?php if (($block->getVar("gallery/keyboard"))): ?> | |||||
| 207 | "keyboard": <?= /* @escapeNotVerified */ $block->getVar("gallery/keyboard") ?>, | |||||
| 208 | <?php endif; ?> | |||||
| 209 | <?php if (($block->getVar("gallery/arrows"))): ?> | |||||
| 210 | "arrows": <?= /* @escapeNotVerified */ $block->getVar("gallery/arrows") ?>, | |||||
| 211 | <?php endif; ?> | |||||
| 212 | <?php if (($block->getVar("gallery/allowfullscreen"))): ?> | |||||
| 213 | "allowfullscreen": <?= /* @escapeNotVerified */ $block->getVar("gallery/allowfullscreen") ?>, | |||||
| 214 | <?php endif; ?> | |||||
| 215 | <?php if (($block->getVar("gallery/caption"))): ?> | |||||
| 216 | "showCaption": <?= /* @escapeNotVerified */ $block->getVar("gallery/caption") ?>, | |||||
| 217 | <?php endif; ?> | |||||
| 218 | "width": <?php /* @escapeNotVerified */ echo $image_width; ?>, | |||||
| 219 | "thumbwidth": <?php /* @escapeNotVerified */ echo $thumb_width; ?>, | |||||
| 220 | "thumbheight": <?php /* @escapeNotVerified */ echo $thumb_height; ?>, | |||||
| 221 | <?php if(!$aspect_ratio): ?> | |||||
| 222 | "height": <?php /* @escapeNotVerified */ echo $image_height; ?>, | |||||
| 223 | <?php endif; ?> | |||||
| 224 | <?php if ($block->getVar("gallery/transition/duration")): ?> | |||||
| 225 | "transitionduration": <?= /* @escapeNotVerified */ $block->getVar("gallery/transition/duration") ?>, | |||||
| 226 | <?php endif; ?> | |||||
| 227 | "transition": "<?= /* @escapeNotVerified */ $block->getVar("gallery/transition/effect") ?>", | |||||
| 228 | <?php if (($block->getVar("gallery/navarrows"))): ?> | |||||
| 229 | "navarrows": <?= /* @escapeNotVerified */ $block->getVar("gallery/navarrows") ?>, | |||||
| 230 | <?php endif; ?> | |||||
| 231 | "navtype": "<?= /* @escapeNotVerified */ $block->getVar("gallery/navtype") ?>", | |||||
| 232 | "navdir": "vertical" | |||||
| 233 | }, | |||||
| 234 | "fullscreen": { | |||||
| 235 | "nav": "<?= /* @escapeNotVerified */ $block->getVar("gallery/fullscreen/nav") ?>", | |||||
| 236 | <?php if ($block->getVar("gallery/fullscreen/loop")): ?> | |||||
| 237 | "loop": <?= /* @escapeNotVerified */ $block->getVar("gallery/fullscreen/loop") ?>, | |||||
| 238 | <?php endif; ?> | |||||
| 239 | "navdir": "<?= /* @escapeNotVerified */ $block->getVar("gallery/fullscreen/navdir") ?>", | |||||
| 240 | <?php if ($block->getVar("gallery/transition/navarrows")): ?> | |||||
| 241 | "navarrows": <?= /* @escapeNotVerified */ $block->getVar("gallery/fullscreen/navarrows") ?>, | |||||
| 242 | <?php endif; ?> | |||||
| 243 | "navtype": "<?= /* @escapeNotVerified */ $block->getVar("gallery/fullscreen/navtype") ?>", | |||||
| 244 | <?php if ($block->getVar("gallery/fullscreen/arrows")): ?> | |||||
| 245 | "arrows": <?= /* @escapeNotVerified */ $block->getVar("gallery/fullscreen/arrows") ?>, | |||||
| 246 | <?php endif; ?> | |||||
| 247 | <?php if ($block->getVar("gallery/fullscreen/caption")): ?> | |||||
| 248 | "showCaption": <?= /* @escapeNotVerified */ $block->getVar("gallery/fullscreen/caption") ?>, | |||||
| 249 | <?php endif; ?> | |||||
| 250 | <?php if ($block->getVar("gallery/fullscreen/transition/duration")): ?> | |||||
| 251 | "transitionduration": <?= /* @escapeNotVerified */ $block->getVar("gallery/fullscreen/transition/duration") ?>, | |||||
| 252 | <?php endif; ?> | |||||
| 253 | "transition": "<?= /* @escapeNotVerified */ $block->getVar("gallery/fullscreen/transition/effect") ?>" | |||||
| 254 | }, | |||||
| 255 | "breakpoints": <?= /* @escapeNotVerified */ $block->getBreakpoints() ?> | |||||
| 256 | } | |||||
| 257 | } | |||||
| 258 | } | |||||
| 259 | </script> | |||||
| 260 | <div class="fullwidth-custom-block" style="display: none;"><?php echo $porto_helper->filterContent($_product->getData("custom_block")); ?></div> | |||||
| 261 | <script type="text/javascript"> | |||||
| 262 | require([ | |||||
| 263 | 'jquery' | |||||
| 264 | ], function($){ | |||||
| 265 | $(document).ready(function(){ | |||||
| 266 | $(".product.info.detailed").detach().appendTo($(".product-info-main")); | |||||
| 267 | $(".page-main").after($(".fullwidth-custom-block").show().detach()); | |||||
| 268 | }); | |||||
| 269 | var product_image_box_top = 0; | |||||
| 270 | var product_info_pos = $(".product-info-main").offset().top; | |||||
| 271 | $(window).scroll(function(){ | |||||
| 272 | product_info_pos = $(".product-info-main").offset().top; | |||||
| 273 | if($(window).innerWidth() >= 768) { | |||||
| 274 | $(".product.media").each(function(){ | |||||
| 275 | if(($(window).scrollTop() > product_info_pos - 50) && (product_info_pos + $(".product-info-main").outerHeight()) > ($(window).scrollTop() + $(this).outerHeight() + 50)) { | |||||
| 276 | product_image_box_top = $(window).scrollTop() - product_info_pos + 50; | |||||
| 277 | $(this).css('top',product_image_box_top + 'px'); | |||||
| 278 | } else if ($(window).scrollTop() < product_info_pos) { | |||||
| 279 | product_image_box_top = 0; | |||||
| 280 | $(this).css('top',product_image_box_top + 'px'); | |||||
| 281 | } | |||||
| 282 | }); | |||||
| 283 | } else { | |||||
| 284 | product_image_box_top = 0; | |||||
| 285 | $(".product.media").css('top',product_image_box_top + 'px'); | |||||
| 286 | } | |||||
| 287 | }); | |||||
| 288 | $(window).resize(function(){ | |||||
| 289 | product_info_pos = $(".product-info-main").offset().top; | |||||
| 290 | if($(window).innerWidth() >= 768) { | |||||
| 291 | $(".product.media").each(function(){ | |||||
| 292 | if(($(window).scrollTop() > product_info_pos - 50) && (product_info_pos + $(".product-info-main").outerHeight()) > ($(window).scrollTop() + $(this).outerHeight() + 50)) { | |||||
| 293 | product_image_box_top = $(window).scrollTop() - product_info_pos + 50; | |||||
| 294 | $(this).css('top',product_image_box_top + 'px'); | |||||
| 295 | } else if ($(window).scrollTop() < product_info_pos) { | |||||
| 296 | product_image_box_top = 0; | |||||
| 297 | $(this).css('top',product_image_box_top + 'px'); | |||||
| 298 | } | |||||
| 299 | }); | |||||
| 300 | } else { | |||||
| 301 | product_image_box_top = 0; | |||||
| 302 | $(".product.media").css('top',product_image_box_top + 'px'); | |||||
| 303 | } | |||||
| 304 | }); | |||||
| 305 | }); | |||||
| 306 | </script> | |||||
| 307 | <?php else: ?> | |||||
| 308 | <?php | |||||
| 309 | $images = $block->getGalleryImages()->getItems(); | |||||
| 310 | $mainImage = current(array_filter($images, function ($img) use ($block) { | |||||
| 311 | return $block->isMainImage($img); | |||||
| 312 | })); | |||||
| 313 | if (!empty($images) && empty($mainImage)) { | |||||
| 314 | $mainImage = $block->getGalleryImages()->getFirstItem(); | |||||
| 315 | } | |||||
| 316 | $mainImageData = $mainImage ? | |||||
| 317 | $mainImage->getData('medium_image_url') : | |||||
| 318 | $helper->getDefaultPlaceholderUrl('image'); | |||||
| 319 | ||||||
| 320 | ?> | |||||
| 321 | <div class="gallery-placeholder _block-content-loading" data-gallery-role="gallery-placeholder"> | |||||
| 322 | <img | |||||
| 323 | alt="main product photo" | |||||
| 324 | class="gallery-placeholder__image" | |||||
| 325 | src="<?= /* @noEscape */ $mainImageData ?>" | |||||
| 326 | /> | |||||
| 327 | <div data-role="loader" class="loading-mask"> | |||||
| 328 | <div class="loader"> | |||||
| 329 | <img src="<?php /* @escapeNotVerified */ echo $block->getViewFileUrl('images/loader-1.gif'); ?>" | |||||
| 330 | alt="<?php /* @escapeNotVerified */ echo __('Loading...') ?>"> | |||||
| 331 | </div> | |||||
| 332 | </div> | |||||
| 333 | </div> | |||||
| 334 | <!--Fix for jumping content. Loader must be the same size as gallery.--> | |||||
| 335 | <script> | |||||
| 336 | var config = { | |||||
| 337 | "width": <?php /* @escapeNotVerified */ echo $image_width; ?>, | |||||
| 338 | "thumbheight": <?php /* @escapeNotVerified */ echo $block->getImageAttribute('product_page_image_small', 'height') | |||||
| 339 | ?: $block->getImageAttribute('product_page_image_small', 'width'); ?>, | |||||
| 340 | "navtype": "<?php /* @escapeNotVerified */ echo $block->getVar("gallery/navtype"); ?>", | |||||
| 341 | <?php if (!$aspect_ratio): ?> | |||||
| 342 | "height": <?php /* @escapeNotVerified */ echo $image_height; ?> | |||||
| 343 | <?php endif; ?> | |||||
| 344 | }, | |||||
| 345 | thumbBarHeight = 0, | |||||
| 346 | loader = document.querySelectorAll('[data-gallery-role="gallery-placeholder"] [data-role="loader"]')[0]; | |||||
| 347 | ||||||
| 348 | if (config.navtype === 'horizontal') { | |||||
| 349 | thumbBarHeight = config.thumbheight; | |||||
| 350 | } | |||||
| 351 | ||||||
| 352 | loader.style.paddingBottom = ( config.height / config.width * 100) + "%"; | |||||
| 353 | </script> | |||||
| 354 | <script type="text/x-magento-init"> | |||||
| 355 | { | |||||
| 356 | "[data-gallery-role=gallery-placeholder]": { | |||||
| 357 | "mage/gallery/gallery": { | |||||
| 358 | "mixins":["magnifier/magnify"], | |||||
| 359 | "magnifierOpts": <?= /* @escapeNotVerified */ $block->getMagnifier() ?>, | |||||
| 360 | "data": <?= /* @escapeNotVerified */ $block->getGalleryImagesJson() ?>, | |||||
| 361 | "options": { | |||||
| 362 | "nav": "<?= /* @escapeNotVerified */ $block->getVar("gallery/nav") ?>", | |||||
| 363 | <?php if (($block->getVar("gallery/loop"))): ?> | |||||
| 364 | "loop": <?= /* @escapeNotVerified */ $block->getVar("gallery/loop") ?>, | |||||
| 365 | <?php endif; ?> | |||||
| 366 | <?php if (($block->getVar("gallery/keyboard"))): ?> | |||||
| 367 | "keyboard": <?= /* @escapeNotVerified */ $block->getVar("gallery/keyboard") ?>, | |||||
| 368 | <?php endif; ?> | |||||
| 369 | <?php if (($block->getVar("gallery/arrows"))): ?> | |||||
| 370 | "arrows": <?= /* @escapeNotVerified */ $block->getVar("gallery/arrows") ?>, | |||||
| 371 | <?php endif; ?> | |||||
| 372 | <?php if (($block->getVar("gallery/allowfullscreen"))): ?> | |||||
| 373 | "allowfullscreen": <?= /* @escapeNotVerified */ $block->getVar("gallery/allowfullscreen") ?>, | |||||
| 374 | <?php endif; ?> | |||||
| 375 | <?php if (($block->getVar("gallery/caption"))): ?> | |||||
| 376 | "showCaption": <?= /* @escapeNotVerified */ $block->getVar("gallery/caption") ?>, | |||||
| 377 | <?php endif; ?> | |||||
| 378 | "width": <?php /* @escapeNotVerified */ echo $image_width; ?>, | |||||
| 379 | "thumbwidth": <?php /* @escapeNotVerified */ echo $thumb_width; ?>, | |||||
| 380 | "thumbheight": <?php /* @escapeNotVerified */ echo $thumb_height; ?>, | |||||
| 381 | <?php if(!$aspect_ratio): ?> | |||||
| 382 | "height": <?php /* @escapeNotVerified */ echo $image_height; ?>, | |||||
| 383 | <?php endif; ?> | |||||
| 384 | <?php if ($block->getVar("gallery/transition/duration")): ?> | |||||
| 385 | "transitionduration": <?= /* @escapeNotVerified */ $block->getVar("gallery/transition/duration") ?>, | |||||
| 386 | <?php endif; ?> | |||||
| 387 | "transition": "<?= /* @escapeNotVerified */ $block->getVar("gallery/transition/effect") ?>", | |||||
| 388 | <?php if (($block->getVar("gallery/navarrows"))): ?> | |||||
| 389 | "navarrows": <?= /* @escapeNotVerified */ $block->getVar("gallery/navarrows") ?>, | |||||
| 390 | <?php endif; ?> | |||||
| 391 | "navtype": "<?= /* @escapeNotVerified */ $block->getVar("gallery/navtype") ?>", | |||||
| 392 | "navdir": "<?= /* @escapeNotVerified */ $thumbnail_type ?>" | |||||
| 393 | }, | |||||
| 394 | "fullscreen": { | |||||
| 395 | "nav": "<?= /* @escapeNotVerified */ $block->getVar("gallery/fullscreen/nav") ?>", | |||||
| 396 | <?php if ($block->getVar("gallery/fullscreen/loop")): ?> | |||||
| 397 | "loop": <?= /* @escapeNotVerified */ $block->getVar("gallery/fullscreen/loop") ?>, | |||||
| 398 | <?php endif; ?> | |||||
| 399 | "navdir": "<?= /* @escapeNotVerified */ $block->getVar("gallery/fullscreen/navdir") ?>", | |||||
| 400 | <?php if ($block->getVar("gallery/transition/navarrows")): ?> | |||||
| 401 | "navarrows": <?= /* @escapeNotVerified */ $block->getVar("gallery/fullscreen/navarrows") ?>, | |||||
| 402 | <?php endif; ?> | |||||
| 403 | "navtype": "<?= /* @escapeNotVerified */ $block->getVar("gallery/fullscreen/navtype") ?>", | |||||
| 404 | <?php if ($block->getVar("gallery/fullscreen/arrows")): ?> | |||||
| 405 | "arrows": <?= /* @escapeNotVerified */ $block->getVar("gallery/fullscreen/arrows") ?>, | |||||
| 406 | <?php endif; ?> | |||||
| 407 | <?php if ($block->getVar("gallery/fullscreen/caption")): ?> | |||||
| 408 | "showCaption": <?= /* @escapeNotVerified */ $block->getVar("gallery/fullscreen/caption") ?>, | |||||
| 409 | <?php endif; ?> | |||||
| 410 | <?php if ($block->getVar("gallery/fullscreen/transition/duration")): ?> | |||||
| 411 | "transitionduration": <?= /* @escapeNotVerified */ $block->getVar("gallery/fullscreen/transition/duration") ?>, | |||||
| 412 | <?php endif; ?> | |||||
| 413 | "transition": "<?= /* @escapeNotVerified */ $block->getVar("gallery/fullscreen/transition/effect") ?>" | |||||
| 414 | }, | |||||
| 415 | "breakpoints": <?= /* @escapeNotVerified */ $block->getBreakpoints() ?> | |||||
| 416 | } | |||||
| 417 | } | |||||
| 418 | } | |||||
| 419 | </script> | |||||
| 420 | <script type="text/javascript"> | |||||
| 421 | require([ | |||||
| 422 | 'jquery', | |||||
| 423 | 'Magento_Catalog/js/jquery.zoom.min' | |||||
| 424 | ], function ($) { | |||||
| 425 | var loaded = false; | |||||
| 426 | $(window).load(function(){ | |||||
| 427 | if($('.loading-mask').length)$('.loading-mask').remove(); | |||||
| 428 | }); | |||||
| 429 | $('.product.media .gallery-placeholder').bind("DOMSubtreeModified",function(){ | |||||
| 430 | $('.product.media .fotorama').on('fotorama:ready', function (e, fotorama, extra) { | |||||
| 431 | loaded = false; | |||||
| 432 | $('.product.media .fotorama').on('fotorama:load', function (e, fotorama, extra) { | |||||
| 433 | if(!loaded){ | |||||
| 434 | $('.product.media .fotorama__stage .fotorama__loaded--img').trigger('zoom.destroy'); | |||||
| 435 | $('.product.media .fotorama__stage .fotorama__active').zoom({ | |||||
| 436 | touch:false | |||||
| 437 | }); | |||||
| 438 | loaded = true; | |||||
| 439 | } | |||||
| 440 | }); | |||||
| 441 | $('.product.media .fotorama').on('fotorama:showend', function (e, fotorama, extra) { | |||||
| 442 | $('.product.media .fotorama__stage .fotorama__active').zoom({ | |||||
| 443 | touch:false | |||||
| 444 | }); | |||||
| 445 | }); | |||||
| 446 | $('.fotorama').off('fotorama:fullscreenenter').on('fotorama:fullscreenenter', function (e, fotorama, extra) { | |||||
| 447 | $('.product.media .fotorama__stage .fotorama__loaded--img').trigger('zoom.destroy'); | |||||
| 448 | $('img.zoomImg').remove(); | |||||
| 449 | }); | |||||
| 450 | $('.fotorama').off('fotorama:fullscreenexit').on('fotorama:fullscreenexit', function (e, fotorama, extra) { | |||||
| 451 | $('.product.media .fotorama__stage .fotorama__loaded--img').trigger('zoom.destroy'); | |||||
| 452 | $('img.zoomImg').remove(); | |||||
| 453 | $('img.fotorama__img').not('.fotorama__img--full').each(function(){ | |||||
| 454 | $(this).after($(this).parent().children("img.fotorama__img--full")); | |||||
| 455 | }); | |||||
| 456 | $('.product.media .fotorama__stage .fotorama__active').zoom({ | |||||
| 457 | touch:false | |||||
| 458 | }); | |||||
| 459 | $('.product.media .fotorama').off('fotorama:showend').on('fotorama:showend', function (e, fotorama, extra) { | |||||
| 460 | $('.product.media .fotorama__stage .fotorama__loaded--img').trigger('zoom.destroy'); | |||||
| 461 | $('.product.media .fotorama__stage .fotorama__active').zoom({ | |||||
| 462 | touch:false | |||||
| 463 | }); | |||||
| 464 | }); | |||||
| 465 | }); | |||||
| 466 | }); | |||||
| 467 | }); | |||||
| 468 | }); | |||||
| 469 | </script> | |||||
| 470 | <?php endif; ?> | |||||
| 471 | <?php if ($image_size): ?> | |||||
| 472 | <style type="text/css"> | |||||
| 473 | @media (min-width: 768px) { | |||||
| 474 | .product.media { | |||||
| 475 | width: <?php echo $image_size * 100 / 12 - 2; ?>% !important; | |||||
| 476 | } | |||||
| 477 | .product-info-main { | |||||
| 478 | width: <?php echo (12 - $image_size) * 100 / 12; ?>% !important; | |||||
| 479 | } | |||||
| 480 | } | |||||
| 481 | </style> | |||||
| 482 | <?php endif; ?> |
Araxis Merge (but not the data content of this report) is Copyright © 1993–2019 Araxis Ltd (www.araxis.com). All rights reserved.