Добрый день, стоит задача в разделе НОВОСТЕЙ при клики на новость открывать ее в модальном окне, где несколько фоток будут листатся вправо/влево по стрелкам. Сделали свойство more_photo для загрузок нескольких фото, но имеются косяки:
1. При наведении на стрелку и ее клике - появляется внизу модального окна горизонтальный скролл на 1см примерно
2. После клика на стрелку 1я картинка потом пропадает, а после последней выводится "пустая белая картинка"
Наверняка где то ошибка в цикле и css, прошу помочь разобраться.
Хотел также сделать через фенсибокс , но видимо были конфликты скриптов и тоже не получилось
[B]Если готовы взяться за доведение до рабочего состояния на платной основе, готов обсудить, пишите в личку.[/B]
Код и скриншоты прилагаю
template.php
style.css
result_modifier.php
1. При наведении на стрелку и ее клике - появляется внизу модального окна горизонтальный скролл на 1см примерно
2. После клика на стрелку 1я картинка потом пропадает, а после последней выводится "пустая белая картинка"
Наверняка где то ошибка в цикле и css, прошу помочь разобраться.
Хотел также сделать через фенсибокс , но видимо были конфликты скриптов и тоже не получилось
[B]Если готовы взяться за доведение до рабочего состояния на платной основе, готов обсудить, пишите в личку.[/B]
Код и скриншоты прилагаю
template.php
Скрытый текст |
---|
[CODE] <?if(!defined("B_PROLOG_INCLUDED") || B_PROLOG_INCLUDED!==true)die(); /** @var array $arParams */ /** @var array $arResult */ /** @global CMain $APPLICATION */ /** @global CUser $USER */ /** @global CDatabase $DB */ /** @var CBitrixComponentTemplate $this */ /** @var string $templateName */ /** @var string $templateFile */ /** @var string $templateFolder */ /** @var string $componentPath */ /** @var CBitrixComponent $component */ $this->setFrameMode(true); ?> <?if(count($arResult["ITEMS"])>0):?> <? $arCurView = $arViewStyles['TILE']; foreach ($arResult["ITEMS"] as $arElement) { $this->AddEditAction($arElement['ID'], $arElement['EDIT_LINK'], CIBlock::GetArrayByID($arParams["IBLOCK_ID"], "ELEMENT_EDIT")); $this->AddDeleteAction($arElement['ID'], $arElement['DELETE_LINK'], CIBlock::GetArrayByID($arParams["IBLOCK_ID"], "ELEMENT_DELETE"), array("CONFIRM" => GetMessage('CT_BCS_ELEMENT_DELETE_CONFIRM'))); ?> <div class="col-xs-12 col-sm-6 col-md-4" id="<? echo $this->GetEditAreaId($arElement['ID']); ?>"> <div class="stock-box"> <a href="<? echo $arElement['DETAIL_PAGE_URL']; ?>" class="prev_picture open_window" st yle="vertical-align: top; background-image:url('<? echo $arElement['PREVIEW_PICTURE']['SRC']; ?>');" title="<? echo $arElement['PREVIEW_PICTURE']['TITLE']; ?>"></a> <?if($arParams["DISPLAY_NAME"]!="N" && $arElement["NAME"]):?> <a href="<?echo $arElement["DETAIL_PAGE_URL"]?>"><h3><?echo $arElement["NAME"]?></h3></a> <?endif;?> <?if($arParams["DISPLAY_DATE"]!="N" && $arElement["DISPLAY_ACTIVE_FROM"]):?> <date><?echo $arElement["DISPLAY_ACTIVE_FROM"]?></date> <?endif?> <a href="<? echo $arElement['DETAIL_PAGE_URL']; ?>" class="open_window"></a> <div class="popup_content"> <div class="row"> <div class="carousel" style="height: 24vh; width: 100%;"> <div class="gallery"> <ul class='slidewrapper' data-current=0> <? foreach($arElement["PROPERTIES"]["MORE_PHOTO"]["VALUE"] as $key => $photo): $arImage = CFile::ResizeImageGet($photo, array("width"=>900, "height"=>512), BX_RESIZE_IMAGE_EXACT, true); ?> <li><img src="<?=$arImage["src"]?>" /></li> <?endforeach?> </ul> </div> <a href="#" class="prev">‹</a> <a href="#" class="next">›</a> </div> <div ></div> <div class="row"> <div class="good_desc"> <? echo $arElement['DETAIL_TEXT']; ?> </div> </div> </div> </div> </div> </div> <? } ?> <?if($arParams["DISPLAY_BOTTOM_PAGER"]):?> <div style="padding-left: 24px;" class="col-xs-12"><?=$arResult["NAV_STRING"]?></div> <?endif;?> <div class="overlay" title="окно"></div> <div class="popup"> <div class="close_window"></div> <div class="popup_contain"></div> </div> <sc ript type="text/javascript"> $('.popup .close_window, .overlay').click(function (){ $('.popup, .overlay').css({'opacity': 0, 'visibility': 'hidden'}); }); $('a.open_window').click(function (e){ $('.popup .popup_contain').html($(this).closest('.stock-box').find('.popup_content').html()); $('.popup, .overlay').css({'opacity': 1, 'visibility': 'visible'}); e.preventDefault(); }); $(document).ready(function () { $(document).on('click', '.prev', function () { var currentSlide=parseInt($('.image').data('current')); currentSlide++; $('.image').animate({left: -currentSlide*900},300).data('current',currentSlide); alert(currentSlide); }); }); var slideWidth=900; $(document).on('click', '.prev', function () { var currentSlide=parseInt($('.slidewrapper').data('current')); currentSlide--; if(0<=currentSlide) { $('.slidewrapper').animate({left: -currentSlide*slideWidth},300).data('current',currentSlide); } }) $(document).on('click', '.next', function (){ var currentSlide=parseInt($('.slidewrapper').data('current')); currentSlide++; if(currentSlide<$('.slidewrapper').children().size()) { $('.slidewrapper').animate({left: -currentSlide*slideWidth},300).data('current',currentSlide); } }); /* var sliderTimer; $(function(){ $('.slidewrapper').width($('.slidewrapper').children().size()*slideWidth); sliderTimer=setInterval(nextSlide,1000); $('.gallery').hover(function(){ clearInterval(sliderTimer); },function(){ sliderTimer=setInterval(nextSlide,1000); }); }); */ function nextSlide(){ var currentSlide=parseInt($('.slidewrapper').data('current')); currentSlide++; if(currentSlide>=$('.slidewrapper').children().size()/2) { currentSlide=1; } $('.slidewrapper').animate({left: -currentSlide*slideWidth},300).data('current',currentSlide); } </sc ript> <?endif;?>[/CODE] |
style.css
Скрытый текст |
---|
[CODE] .carousel { padding: 0px 0px; margin: 0; height: 54vh; width: 0vw; } .gallery{ overflow-x: hidden; overflow-y: visible; position: relative; width: 900px; height: 512px; } .slidewrapper{ height: 512px; width: 9999px; list-style: none; position: absolute; left: 0; top: 0; margin: 0; padding: 0; } .slidewrapper li{ } .slidewrapper img { width: 900px; height: 512px; float: left; list-style: none; margin: 0; padding: 0; } /* Slider carousel control */ .prev, .next { position: absolute; top: 35%; margin-top: 0px; width: 30px; height: 30px; text-align: center; background: #4E443C; color: #fff; text-decoration: none; text-shadow: 0 0 1px #000; font: 24px/27px Arial, sans-serif; -webkit-border-radius: 30px; -moz-border-radius: 30px; border-radius: 30px; -webkit-box-shadow: 0 0 4px #F0EFE7; -moz-box-shadow: 0 0 4px #F0EFE7; box-shadow: 0 0 4px #F0EFE7; opacity:0.7; } /* .prev:hover, .next:hover, .prev:focus, .next:focus { opacity:1.0; color:#fff; text-decoration:none; } .prev { left: 0px; } .next { right: 0px; } /* .arrow { position: absolute; top: 256px; padding: 0; background: #ddd; border-radius: 15px; border: 1px solid gray; font-size: 36px; line-height: 50px; color: #444; display: block; } .arrow:focus { outline: none; } .arrow:hover { background: #ccc; cursor: pointer; } */ .prev { left: 7px; } .next { right: 7px; } .prev_picture { display: block; margin-left: auto; margin-right: auto; padding-top: 50%; padding-bottom: 50%; background-repeat: no-repeat; background-size: contain; background-position: 50%; margin: 0 0 -25px; } /* .prev_picture:hover{ -webkit-filter: grayscale(50%); filter: grayscale(50%); -webkit-transition: 0.15s; transition: 0.15s; } */ .good_picture { background-repeat: no-repeat; background-size: cover; height: 512px; weight: 900px; background-position: 50%; } .text { font-size: 16px; text-align: center; height:; } .data { font-size: 13px; padding: 75px ; } .popup_content { display: none; } .good_desc { padding: 20px 40px; font-size: 12px; color: #414042; } .overlay { background-color: rgba(0, 0, 0, 0.7); bottom: 0; cursor: default; left: 0; opacity: 0; position: fixed; right: 0; top: 0; visibility: hidden; z-index: 99999; -webkit-transition: opacity .5s; -moz-transition: opacity .5s; -ms-transition: opacity .5s; -o-transition: opacity .5s; transition: opacity .5s; } .popup { background-color: #fff; display: inline-block; left: 50%; opacity: 0; width: 912px; height: 650px; position: fixed; text-align: justify; top: 50%; visibility: hidden; z-index: 999999; overflow-y: auto; -webkit-transform: translate(-50%, -50%); -moz-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); -o-transform: translate(-50%, -50%); transform: translate(-50%, -50%); -webkit-transition: opacity .5s, top .5s; -moz-transition: opacity .5s, top .5s; -ms-transition: opacity .5s, top .5s; -o-transition: opacity .5s, top .5s; transition: opacity .5s, top .5s; } .popup .close_window { z-index: 10; width: 24px; height: 24px; position: absolute; top: 15px; right: 15px; cursor: pointer; background: url(/bitrix/templates/.default/components/bitrix/news/news_popap/bitrix/news.list/.default/ico_close.png); }[/CODE] |
result_modifier.php
Скрытый текст |
---|
[CODE] <? $arResult["MORE_PHOTO"] = array(); if(isset($arResult["PROPERTIES"]["MORE_PHOTO"]["VALUE"]) && is_array($arResult["PROPERTIES"]["MORE_PHOTO"]["VALUE"])) { foreach($arResult["PROPERTIES"]["MORE_PHOTO"]["VALUE"] as $FILE) { $FILE = CFile::GetFileArray($FILE); if(is_array($FILE)) $arResult["MORE_PHOTO"][]=$FILE; } } ?> [/CODE] |