Сегодня я хотел бы поговорить о стилизации дополнительных изображений товара. По умолчанию magento производит вывод списка изображений подрядят. Если с товаром указывается много фотографий в дизайне это может выглядеть наляписто. Для решения этой проблемы можно использовать слайдер – позволяющий листать изображения в фиксированном боксе. Реализацию данной возможности Я и рассмотрю далее.
Выше представлено изображения окончательного варианта. Я не буду рассматривать тонкости верстки такого блока, единственное что необходимо учитывать это наличие нескольких контейнеров.
На первом этапе производим изменения файла отображения изображений товара. Это файл: app/design/frontend/default/default/template/catalog/product/view/media.phtml
Нас интересует слейдующий кусок кода:
<?php if (count($this->getGalleryImages()) > 0): ?> <div class="more-views"> <h4><?php echo $this->__('More Views') ?></h4> <ul> <?php foreach ($this->getGalleryImages() as $_image): ?> <li> <a href="#" onclick="popWin('<?php echo $this->getGalleryUrl($_image) ?>', 'gallery', 'width=300,height=300,left=50,top=50,location=no,status=yes,scrollbars=yes,resizable=yes'); return false;"><img src="<?php echo $this->helper('catalog/image')->init($this->getProduct(), 'thumbnail', $_image->getFile())->resize(56); ?>" alt="<?php echo $this->htmlEscape($_image->getLabel()) ?>" title="<?php echo $this->htmlEscape($_image->getLabel()) ?>" /></a> </li> <?php endforeach; ?> </ul> </div> <?php endif; ?>
Производим небольшие изменения, добавляем текущую страницу, стрелки вправо/влево, ограничивающий контейнер.
<div class="more-view-page">Страница <span id="img-more-page">1</span> из <?php echo $pageNumber; ?></div> <div class="more-view-arrow step-left-passive" id="more-view-step-left"></div> <div class="more-view-fix"> <ul id="more-view-slider"> <?php $i = 0;foreach ($this->getGalleryImages() as $_image): ?> <li> <a href="#"><img src="<?php echo $this->helper('catalog/image')->init($this->getProduct(), 'thumbnail', $_image->getFile())->resize(51); ?>" alt="<?php echo $this->htmlEscape($_image->getLabel()) ?>" title="<?php echo $this->htmlEscape($_image->getLabel()) ?>" /></a> </li> <?php endforeach; ?> </ul> </div> <div class="more-view-arrow step-right-active" id="more-view-step-right"></div>
Обратите внимание что в стилях необходимо будет для контейнера c классом “more-view-fix” задать фиксированную высоту. И для элементов li указать float: left.
Идея скрола заключается в следующем – мы производим изменение css свойства margin-left для элемента ul в отрицательный диапазон. Для анимации движения я предлагаю использовать библиотеку для prototype animator.js
Производим измение шаблона
<!-- Load animator js lib --> <script src="<?php echo $this->getSkinUrl('js/animator.js');?>" type="text/javascript"></script> <?php // Total number of images $_imageNumber = count($this->getGalleryImages()); // Total number of scroll page $pageNumber = ceil($_imageNumber/5); ?> <script> var startMargin = 0; // Width of one set of images, how change margin from one click var marginStep = 340; var currentPage = 1; // Scroll on left arrow function sLeft() { // Block if first page if (currentPage<=1) { return; } currentPage--; // Hide left arrow if first page if (currentPage<=1) { $('more-view-step-left').removeClassName('step-left-active'); $('more-view-step-left').addClassName('step-left-passive'); } // Show right arrow if not last page if (currentPage< <?php echo $pageNumber;?>) { $('more-view-step-right').removeClassName('step-right-passive'); $('more-view-step-right').addClassName('step-right-active'); } // Change current page number $('img-more-page').innerHTML = currentPage; var scrollElement = $('more-view-slider'); var newMargin = startMargin + marginStep; var animationObject = new Animator(); animationObject.addSubject(new NumericalStyleSubject(scrollElement, 'margin-left', startMargin, newMargin)); animationObject.play(); startMargin = newMargin; } // Click on righ arrow function sRight() { // Block if last page if (currentPage>=<?php echo $pageNumber;?>) { return; } currentPage++; // Hide right arrow for last page if (currentPage>=<?php echo $pageNumber;?>) { $('more-view-step-right').removeClassName('step-right-active'); $('more-view-step-right').addClassName('step-right-passive'); } // Show left arrow if page not first if (currentPage>1) { $('more-view-step-left').removeClassName('step-left-passive'); $('more-view-step-left').addClassName('step-left-active'); } // Change current page - show on of slider $('img-more-page').innerHTML = currentPage; var scrollElement = $('more-view-slider'); var newMargin = startMargin - marginStep; var animationObject = new Animator(); animationObject.addSubject(new NumericalStyleSubject(scrollElement, 'margin-left', startMargin, newMargin)); animationObject.play(); startMargin = newMargin; } document.observe('dom:loaded', function(){ // Add event for click action for our arrow $('more-view-step-left').observe('click', sLeft); $('more-view-step-right').observe('click', sRight); }) </script>
Этот маленький кусок кода позволяет менять текущий номер страницы скролла, изменять состояние стрелок влево/вправо на активная/пассивная. На мой взгляд этого более чем достаточно для реализации скролла. Спасибо за внимание.