Skip to content

Carousel injected to webpage by one iframe

License

Notifications You must be signed in to change notification settings

allatrack/js-carousel-injection

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

20 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

js-carousel-injection

Суть. Доработать информер эффектом карусель. Этот эффект используется, например в facebook (http://take.ms/13PoK) Пример нашего виджета, который нужно доработать эффектом http://herbeauty.co/test/carousel.html

<!-- Composite Start -->
    <div id="M135950ScriptRootC120193">
        <div id="M135950PreloadC120193">
            Loading...
        </div>
        <script>
            (function(){
                var D=new Date(),d=document,b='body',ce='createElement',ac='appendChild',st='style',ds='display',n='none',gi='getElementById';
                var i=d[ce]('iframe');i[st][ds]=n;d[gi]("M135950ScriptRootC120193")[ac](i);try{var iw=i.contentWindow.document;iw.open();iw.writeln("<ht"+"ml><bo"+"dy></bo"+"dy></ht"+"ml>");iw.close();var c=iw[b];}
                catch(e){var iw=d;var c=d[gi]("M135950ScriptRootC120193");}var dv=iw[ce]('div');dv.id="MG_ID";dv[st][ds]=n;dv.innerHTML=120193;c[ac](dv);
                var s=iw[ce]('script');s.async='async';s.defer='defer';s.charset='utf-8';s.src="//tmp.dt07.net/mgjs/cjs/r/o/rostytest.com.120193.js?t="+D.getYear()+D.getMonth()+D.getDate()+D.getHours();c[ac](s);})();
        </script>
    </div>
    <!-- Composite End --> 

Описание эффекта Десктоп: Информер размещается на всю ширину контента. Самый правый тизер, который не полностью помещается в родительский блок, нужно при наведении выделять http://take.ms/9L8ZB . Блок mgline нужно делать прозрачным на 60% и показывать right_arrow.svg При клике по такому тизеру, пользователь не переходит на страницу с новостью, а срабатывает карусель. Тизеры виджета сдвигаются влево с шагом в один тизер. Тизер по которому кликнули должен сдвинуться так, что бы стать последним (справа) полностью видимым тизером. То есть он становится последним полностью отображаемым тизером и справа от него только 30% следующего тизера(mgline).

Если навести на тизер, который полностью загружен - его не нужно выделять. При клике по тизеру, который полностью загружен - как и сейчас клик должен вести на сайт с новостью (До клика по правому тизеру http://take.ms/bPcUi . После http://take.ms/99VbX). Следующий тизер отображается на 30%. Теперь есть левый и правый не полностью отображаемых тизера. Логика при наведении такая же, mgline становится прозрачным и появляется left|right_arrow.svg. При клике по "левому", тизеры виджета сдвигаем вправо с тем же шагом.

Мобильный: На мобильном или планшете логики наведения нет. Прокручивать виджет свайпом или при клике по "обрезанному" тизеру с шагом в один тизер. Следующий тизер должен торчать на 30% от ширины.

Важно. Шапка виджета, название и логотип http://take.ms/rMaVP должны быть зафиксированы и не скроллиться. Желательно не менять структуру кода установки.