Изменение слайд-шоу для одновременного отображения всех изображений на небольших экранах/мобильных устройствах.

Здравствуйте, у меня есть портфолио фотографий, которое я создал много лет назад, чтобы показывать каждую галерею в виде слайд-шоу почти на весь экран.

В какой-то момент я придумал, как настроить его для мобильных устройств и окон меньшего размера, отключить слайд-шоу и вместо этого показывать все изображения сразу в вертикальной строке.



В итоге я отключил эту опцию на некоторое время, потому что у меня были некоторые проблемы с перекрытием меню на определенных планшетах, но теперь я хочу реализовать ее снова и не могу понять, куда я сделал резервную копию этого кода или как его реплицировать! Кто-нибудь будет настолько любезен, чтобы сказать мне, как настроить мой код, чтобы он делал это для медиа-запросов? Насколько я помню, это было не так уж и сложно сделать, но в этот раз я просто не могу в этом разобраться.

Ниже я включил 4 набора кода: общий CSS слайд-шоу, общий CSS медиа-запроса сайта, полный CSS-шаблон сайта и CSS-модуль слайд-шоу.

СЛАЙДШОУ

 .tab-content .row-fluid .span0, .tab-content .row-fluid .span3, .tab-content .row-fluid .span6, .tab-content .row-fluid .span9, .tab-content .row-fluid .span12 {


width:100%;


}


.tab-content .form-vertical {


background: #f0f0f0;


border:2px solid #ddd;


margin-top:40px;


padding:20px;


}


.info-labels + div {


background: none repeat scroll 0 0 #EEEEEE;


color: #000000;


font-size: 110%;


font-style: italic;


font-weight: normal;


margin: 15px 0 30px;


padding: 15px 10px 10px 20px;


}

Код (разметка): МЕДИА-ЗАПРОСЫ САЙТА

 /** RESET **/ /* normalise les marges et les remplissages */ body, div, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, form, fieldset, input, p, blockquote { margin: 0; padding : 0; } /* supprime list-style pour les listes */ ul { list-style : none; } /* supprime les bordures dans les lments fieldset et img */ fieldset, img { border : 0; } .clearfix:before, .clearfix:after { display: table; content: ""; line-height: 0; } .clearfix:after { clear: both; } article, footer, header, hgroup, nav, section { display: block; } html { font-size: 100%; } /** Hide the outline **/ *:hover, *:active, *:focus, input:focus, textarea:focus { outline:none !important; } /** resize image **/ img, .scale { /* Part 1: Set a maxium relative to the parent */ max-width:100%; /* Part 2: Scale the height according to the width, otherwise you get stretching */ height:auto; vertical-align: middle; border: 0; box-sizing: border-box; } /***************************************** SITE ******************************************/ html, body { height: 100%; } body { position:relative; padding: 0; margin: 0; } body.content-black { background-color : #101010; color: #f0f0f0; font-size: 13px; } p { color: #f0f0f0; font-size: 13.5px; font-family: Arial; margin: 0px 0 14px 0; line-height: 20px; } p.homepg { color: #f0f0f0; font-size: 13.5px; font-family: Arial; width: 60%; margin-bottom: 0; } p.narrow { color: #f0f0f0; font-size: 13.5px; font-family: Arial; width: 60%; padding-bottom: 10px; } p.specials { color: #f0f0f0; font-size: 14px; font-family: Arial; margin: 0px 0 27px 0; line-height: 20px; } p.wide { color: #f0f0f0; font-size: 13.5px; font-family: Arial; width: 70%; padding-bottom: 10px; } .hide-class { display:none; } .zindex1 { z-index:1; } .zindex2 { z-index:2; } .zindex3 { z-index:3; } /******************************************************************************** COLUMN MENU **********************************************************************************/ #column-menu { position:fixed; top:0; left:0; min-height:100%; } #main-column-menu { position:relative; padding: 36px 36px 65px 36px; z-index:20; } .logo { position:relative; padding: 0 0 15px 0; margin: 0 20px 0 -20px; z-index:10; } .logo a, .logo a:hover { text-decoration:none; outline:none; } p.customlogo { color: #000; font-size: 13px; font-family: Verdana; padding: 0; margin: 2px 0 0 30px; } h4.customlogo { color: #000; font-size: 26px; padding: 0; margin-right: -30px; font-weight: normal; } /** Main menu **/ .drop-down { position:relative; margin-left:-36px; z-index:10; margin-top: 25px; } .drop-down span.title_menu { display: none; } /** Search **/ #column-menu .search-module { position:relative; clear:both; margin : 35px 0 8px -36px; } /** Sidebar footer **/ .sidebar-footer { position : absolute; bottom:0; left:0; padding: 0 32px 24px 36px ; z-index:10; } /** social icons **/ .social-links { clear:both; list-style:none; padding:0; margin: 0 0 0 28px; } .social-links li { display:inline-block; width:23px; padding-right:3px; list-style:none; } .social-links li a img { width:23px; opacity : 0.5 ; border:none; } .social-links li a:hover img { opacity : 1 ; } /******************************************************************************** CONTENT BOX **********************************************************************************/ #column-content { position:relative; min-height:100%; } .no_min_height { min-height:0 !important ; } #column-content > .top { position: absolute; top:30px; right:30px; /* Part 1: Set a maxium relative to the parent */ max-width:90%; /* Part 2: Scale the height according to the width, otherwise you get stretching */ height:auto; vertical-align: middle; border: 0; box-sizing: border-box; } #column-content > .top .all-content { margin-bottom:30px; } #column-content > .bottom { position: absolute; bottom:30px; right:30px; /* Part 1: Set a maxium relative to the parent */ max-width:90%; /* Part 2: Scale the height according to the width, otherwise you get stretching */ height:auto; vertical-align: middle; border: 0; box-sizing: border-box; } #column-content > .full_width { position:relative; width:100% !important; } #column-content > .top .all-content, #column-content > .bottom .all-content { padding:20px; } #column-content > .full_width .all-content { padding: 30px 40px 30px 40px ; } .white0, .white0 .drop-down li ul { background-color: #fff ; } .white1, .white1 .drop-down li ul { background: transparent url(../images/white-93.png) 0 0 repeat; } .white2, .white2 .drop-down li ul { background: transparent url(../images/white-88.png) 0 0 repeat; } .white3, .white3 .drop-down li ul { background: transparent url(../images/white-80.png) 0 0 repeat; } .white4, .white4 .drop-down li ul { background: transparent url(../images/white-70.png) 0 0 repeat; } .white5, .white5 .drop-down li ul { background: transparent url(../images/white-55.png) 0 0 repeat; } .white6, .white6 .drop-down li ul { background: transparent url(../images/white-40.png) 0 0 repeat; } .white7, .white7 .drop-down li ul { background: transparent url(../images/white-25.png) 0 0 repeat; } .white8, .white8 .drop-down li ul { background: transparent url(../images/white-16.png) 0 0 repeat; } .white9, .white9 .drop-down li ul { background: transparent url(../images/white-08.png) 0 0 repeat; } .white10, .black10, .white10 .drop-down li ul, .black10 .drop-down li ul { background-color:transparent; } /** Content **/ .content { position:relative; overflow:hidden; padding: 0; z-index:1; } .main_component { position:relative; overflow:hidden; z-index:1; } /** Header Class **/ h1 { display: block; font-size: 26px; margin: -15px 0 14px 0; padding:10px 0 5px 0; letter-spacing:0px; color: #7fbdb9; font-family: 'Open Sans'; font-weight: normal; line-height:1.4; } h3 { padding:10px 0 5px 0; font-size: 14px; font-weight:bold; color: #7fbdb9; font-family: 'Open Sans'; line-height:1.4; } /******************************************************************************** Footer (only for mobiles) **********************************************************************************/ .website-footer { position:relative; padding: 8px 0 16px 0; } /** Social links & address **/ .website-footer .social-links { text-align:center; } /******************************************************************************** OTHERS **********************************************************************************/ hr { border:none; border-bottom: 1px solid #999; border-color : #444; margin: 18px 0; } img.floatright { float: right; margin: 0; padding-left: 10px; padding-right: 2px; padding-top: 4px; } img.floatleft { float: left; margin: 0; padding: 2px 15px 20px 0; } img.floatmid { vertical-align: middle; margin: 4px; } img.rates { padding-bottom: 40px; } a, a:visited { color: #fef7b8; text-decoration: none; } a:hover { color: #7fbdb9; text-decoration: none; } .one-half { float:left; margin: 5px 10px 5px 0; width:45%; } .last { margin-right: 0 !important; width:30%; } .last + * { clear:both; } .one-third { float:left; margin: 2px 12px 5px 0; width:19%; } .two-third { margin-top: 7px; width:80%; min-height: 140px; }

Код (разметка): ОБЩИЙ CSS САЙТА

 /** Disable Minimum width of no responsive mode **/ #column-content { min-width : 0; } .hidden { display: none; visibility: hidden; } .visible-phone { display: none !important; } .visible-tablet { display: none !important; } .hidden-desktop { display: none !important; } .visible-desktop { display: block !important; } /* Portrait tablet to landscape and desktop */ @media screen and (max-width: 1024px) { .hidden-desktop { display: block !important; } .visible-desktop { display: none !important ; } .visible-tablet { display: block !important; } .hidden-tablet { display: none !important; } } /* Phone and little tablet */ @media screen and (max-width: 767px) { .hidden-desktop { display: block !important; } .visible-desktop { display: none !important; } .visible-tablet { display: none !important; } .hidden-tablet { display: block !important; } .visible-phone { display: block !important; } .hidden-phone { display: none !important; } } /** MAIN MENU ** ** you can change the value for max-width below ( don't forget to put the same value in "css/ie8-responsive.css" and "css/ie7-responsive.css" ) **/ @media screen and (max-width: 1024px) { .drop-down { position: relative; float: none; margin:0; padding:0; width: auto; height:auto; z-index: 10; } /* Disable position fixed for header */ .website-header { height:auto; } .website-header.fixed { position:relative; top:0; } .website-top.fixed { position:relative; top:0; } .website-top.fixed.with-header { top:0px; } .website-middle.fixed { margin-top: -150px; padding-top:0; } } @media screen and (max-width: 1024px) { .website-footer.footer-home-page { position : relative; top:0; left:0; width:auto; } .empty-space-home-page { height:100%; } /** remove the fixed width of Google map **/ div[id*="googlemap"] { width:auto !important; } /** Video and Google map **/ .module_video { margin-top: 0; padding-bottom: 60px; position:relative !important; height: 400px !important; min-height:400px !important; } .module_google_map { margin-top: 0; position:relative !important; height: 50% !important; min-height:50% !important; } /** Column menu **/ #column-menu { position:relative; min-height:0; } .menu-white #column-menu { background-color : #8C001A; } .menu-black #column-menu { background-color : #000; } #main-column-menu { padding: 10px; background-color : #8C001A; } #column-menu, .nav_main, .search-module { width:auto; } .logo { padding:0 0 0 40px; margin: 0; float:left; } .logo span { line-height:48px; } .logo img { max-height : 55px; } h4.customlogo { color: #fff; text-align: left; width: 300px; } p.customlogo { color: #fff; text-align: left; } #translate { position: absolute; bottom: -30px; right: 35px; } .social-links li a img { width:20px; } /** Column content **/ #column-content { position:relative; min-height : 0; margin:0; } .module_google_map, .module_video { padding-left: 0; } #column-content > .top, #column-content > .bottom, #column-content > .full_width { position: relative; top:0; left:0; max-width:100%; } #column-content > .top .all-content { margin-bottom:0px; } #column-content #main-column-content .all-content { padding: 50px 16px 14px 16px; min-height:600px; /** second condition if height > 800px line 390 in this file **/ } .shadow-corner > .bottom { min-height:0px; background-image : none; padding:0; } .shadow-corner > .top { min-height:0px; background-image : none; padding:0; top:0; } /** CONTENT **/ .left_column, .right-module-position, .top-module-position, .bottom-module-position { float:none; padding: 12px 0 12px 0; margin:0; background-image:none; border:none; width : auto ; clear:both; } .left_column > div, .right-module-position > div { background-image:none; padding:0; } .right_column { overflow:visible; } .left_column .moduletable > div, .right-module-position .moduletable > div { clear:both; border:1px solid #ddd; margin:0 ; background: transparent url(../images/black-03.png) 0 0 repeat; } .white-text .left_column .moduletable > div, .white-text .right-module-position .moduletable > div { border:1px solid #666; } .main_component { padding: 0 6px; } } /* To display the background on all screen if tablet with portrait mode */ /* First condition if height < 800px line 266 in this file */ @media screen and (max-width: 1024px) { #column-content #main-column-content .all-content { min-height:900px; } } /* Phone and little tablet */ @media screen and (max-width: 767px) { .logo { padding-left :0px; } .top_menu li { padding: 4px 2px 0 2px; } .user1, .user2, .user3, .user4, .user5, .user6, .right-module-position { float:none; padding:12px 0; margin:0; width : 100% !important; clear:both; } .user1, .user2, .user3, .user4, .user5, .user6 { margin : 8px 0 0 0; } .top-module-position .border > div, .bottom-module-position .border > div, .user1 .border > div, .user2 .border > div, .user3 .border > div, .user4 .border > div, .user5 .border > div, .user6 .border > div, .address .border > div, .translate .border > div, .search .border > div, top_menu .border > div, .bottom_menu .border > div { margin-bottom:8px; } .moduletable.shadow > div { margin-bottom:0 !important; } /********** Column layouts *********/ .one-half, .one-third, .two-third, .one-fourth, .two-fourth, .three-fourth, .one-fifth, .two-fifth, .three-fifth, .four-fifth { float: none; width:auto; margin : 10px 0; } }

Код (разметка): МОДУЛЬ СЛАЙДШОУ CSS

  #supersized-loader { position:absolute; top:65%; left:50%; z-index:0; width:60px; height:60px; margin:-30px 0 0 -30px; text-indent:-999em; background:url(../../../images/supersized/progress.gif) no-repeat center center; } #supersized { bottom: 0; height: 100%; left: 285px; /* same distance as left menu width */ overflow: hidden; position: fixed; right: 0; /* use instead of width 100% - will go no further than right edge of browser window */ top: 0; /*width: 100%; removed by dsonesuk using 100% with left 285px will make width 100% + 285px;*/ z-index: 1; } .images {margin: 1px 0 4px 0;} @media screen and (max-width: 1024px) { #supersized { position:fixed; left:0; top:0; overflow:hidden; z-index: 1; height:100%; width: 100%; } } #supersized img { width:auto; height:auto; position:relative; max-width : none; display:none; outline:none; border:none; } /*Quality*/ #supersized a { background: none repeat scroll 0 0 #111; display: block; height: 100%; left: 285px; /* same distance as left menu width */ overflow: hidden; position: fixed; right: 0; /* use instead of width 100% - will go no further than right edge of browser window */ top: 0; /*width: 100%; removed by dsonesuk using 100% with left 285px will make width 100% + 285px;*/ z-index: -30; } @media screen and (max-width: 1024px) { #supersized a { z-index:-30; position:fixed; overflow:hidden; top:0; left:0; width:100%; height:100%; background:#111; display:block; } } #supersized a.prevslide { z-index: -20; } #supersized a.activeslide { z-index:-10; } #supersized a.image-loading { background:#111 url(../../../images/supersized/progress.gif) no-repeat center center; width:100%; height:100%; } #supersized a.prevslide img, #supersized a.activeslide img { display:inline; } /** Prev / Next slide **/ #prevslide, #nextslide { position:absolute; z-index:60; overflow: hidden; width: 25%; height: 100%; top: 0; opacity: .5; } #nextslide { left: 75%; cursor: url('img/forward.png'), move; } #prevslide { left: 285px; cursor: url('img/back.png'), move; } @media screen and (max-width: 1024px) { #prevslide { left: 0; cursor: url('img/back.png'), move; } }

Код (разметка):

Ух ты... ладно, я уважаю ваши сильные чувства по этому поводу, но я просил элементарной помощи, а не гневной критики всего моего сайта.

Да, сайт довольно старый.

Он использует Joomla и шаблон, который я купил много лет назад и сам многое настроил, поэтому я уверен, что там много устаревших вещей.

Но дело в том, что он работает отлично, работает быстро и плавно во всех браузерах, а также на многих мобильных устройствах.

Это очень упрощенный сайт, который делает именно то, что мне нужно, и, как я уже сказал, я смог получить опцию реагирования на медиа-запросы (изменение слайд-шоу на все изображения, отображаемые вертикально на мобильных устройствах и в окнах меньшего размера) без особых усилий.

работать раньше.

Это был довольно простой фрагмент кода медиа-запроса, который просто менял способ отображения изображений при определенных размерах окна.

Прошло совсем немного времени, и я совершенно забыл, как это делалось.

Затем покажите разметку.

CSS без HTML практически бессмысленен.

Мы понятия не имеем, какова ваша структура, как CSS нацелен на эту структуру, или любую другую значимую информацию, которая может вам помочь.



... и если представленный вами код разбирается, это потому, что 1) мы предполагаем, 2) судя по тому, что представлено, он, скорее всего, НЕ работает хорошо во всех браузерах и мобильных устройствах, как вы утверждаете - возможно, это говорит о большом количестве пользователи должны уйти, и 3) у него есть признаки того, что на самом деле может быть проще переписать с нуля, чем пытаться «исправить», чтобы делать то, что вы хотите.

Последняя часть может показаться нелогичной, но зачастую устаревший или плохой код — это такая развалина, с которой невозможно работать, БЫСТРЕЕ выбросить его в мусорное ведро и начать все сначала.

Тем не менее, мы не можем сказать вам, так ли это, без HTML и, возможно, некоторых примеров изображений, чтобы мы могли увидеть, что у вас уже есть.

В противном случае все, что вам говорят, является ГРУБОЕ ПРЕДПОЛОЖЕНИЕ. CSS без HTML === «Вот почему мы не можем вам помочь!» - и живая демонстрация того, что у вас есть, поможет гораздо, гораздо больше.

Я не уверен, что тут можно подвергать сомнению.

Сайт работает должным образом во всех браузерах, в которых я его тщательно тестировал, а также на многочисленных мобильных устройствах.

А даже если бы и нет, я не знаю, почему вы, ребята, такие недружелюбные.

Я не прошу отзывов о качестве кодирования всего сайта.

Даже если вы чувствуете, что весь код — беспорядок, это совершенно не имеет отношения к тому, о чем я спрашиваю.

Если у меня когда-нибудь будет время переделать это или деньги, чтобы нанять кого-нибудь для этого, я уверен, что так и сделаю.

Но до тех пор он делает то, что мне нужно, и все, что мне нужно, — это элементарная помощь в настройке слайд-шоу для отображения в виде вертикального блока изображений.

Но поскольку кажется, что вы предпочитаете вести себя снобистски и грубо, неважно.

Очевидно, я обратился за помощью не к тому месту.

Я постараюсь разобраться в этом сам, проведя несколько недель методом проб и ошибок.

Очень ценю вашу поддержку; Приятно осознавать, что существует такой приятный и гостеприимный форум, куда люди могут обратиться, если у них есть вопросы.

Мне нужно было бы увидеть страницу вживую.

поскольку CSS без HTML, к которому он применен, - это тарабарщина, но ваш код выдает ТАК много предупреждающих флажков.

Clearfix, как будто это все еще 2003 год, абсолютное и фиксированное позиционирование, вероятно, делает его далеким от мобильных устройств, гораздо менее удобным для настольных компьютеров, бесконечные бессмысленные расплывчатые презентационные классы, навязывание стиля с помощью !important...

Дайте угадаю, вы использовали одну из этих грязных хищнических невежественных «фреймворков» для создания сайта, не так ли? Ну, это твоя проблема.

В тот момент, когда я вижу такие классы, как «tab-content» или «row-fluid», пора выбросить всю эту катастрофу в корзину и начать все сначала.

Но тогда «полноэкранное слайд-шоу» ИМХО == эпический /FAIL/ в веб-разработке, учитывая, что изображения, достаточно большие для полноэкранного просмотра, обычно слишком велики, чтобы вообще иметь какой-либо бизнес на веб-сайте.

ДАЖЕ для фотопортфолио.

Просто скажите «нет» глупой анимированной чуши, которая скорее разозлит посетителей, чем впечатлит их.