drakulitkas Опубликовано 5 мая, 2015 Жалоба Поделиться Опубликовано 5 мая, 2015 Здравствуйте, Вставил слайдер в стандартный шаблон Симплы, при изменении стилей (для адаптивности):резиновое масштабирование #slider{ #faded{ max-width:940px; //height:460px; position:relative; img { width: 100%; height: auto; } .pagination{ position:absolute; } } } Весь контент после слайдера прячется за него, подскажите пожалуйста как можно двигать контент ниже/выше в зависимости от высоты слайдера?Если max-width:940px поменять на width:940px и расскоментировать height:460px, контент начинается от слайтера, но пропадает адаптивность. Цитата Ссылка на сообщение Поделиться на другие сайты
ps-simpla Опубликовано 5 мая, 2015 Жалоба Поделиться Опубликовано 5 мая, 2015 Этого "куска" мало, ссылку на сайт предоставьте, так как я не могу предположить какие стили прописаны для контентаКак вариант ниже слайдера вставить -DIV со стилем clear: both Цитата Ссылка на сообщение Поделиться на другие сайты
drakulitkas Опубликовано 5 мая, 2015 Автор Жалоба Поделиться Опубликовано 5 мая, 2015 (изменено) Этого "куска" мало, ссылку на сайт предоставьте, так как я не могу предположить какие стили прописаны для контентаКак вариант ниже слайдера вставить -DIV со стилем clear: both Пробовал и так уже, но это не из-за флоатов, а из-за relativ и absolute позиционирования самого слайдера.Тестирую на локалке, index.tpl ....Шапка сайта </header> <!-- END HEADER Шапка сайта --> <!-- SLIDER сайта --> <slider id="slider"> <div id="faded"> <div> <div class="item"> <a href="#"> <img src="design/{$settings->theme|escape}/images/slider/banner1.jpg" alt="Mountain Bike Trek 8000" title=" Mountain Bike Trek 8000 " width="940" height="460"> </a> </div> <div class="item"> <a href="#"> <img src="design/{$settings->theme|escape}/images/slider/banner2.jpg" alt="Trek speed concept" title=" Trek speed concept " width="940" height="460"> </a> </div> <div class="item"> <a href="#"> <img src="design/{$settings->theme|escape}/images/slider/banner3.jpg" alt="Trek speed concept" title=" Trek speed concept " width="940" height="460"> </a> </div> </div> </div> <script src="design/{$settings->theme|escape}/js/slider/slider-faded.js"></script> <script type="text/javascript"> $(function(){ $("#faded").faded({ speed: 1500, bigtarget: false, autoplay: 5000, autorestart: false, autopagination:true, crossfade:true }); }); </script> </slider> <!-- END SLIDER --> <!-- GALLERY --> <gallery id="gallery"> ....Галлерея Изображений стили Слайдера (SCSS) #slider { #faded { width:940px; height:460px; position:relative; img { width: 100%; height: auto; } .pagination { position:absolute; bottom:72px; left:439px; padding:0; margin:0; z-index:100; li { float:left; width:11px; height:11px; margin-right:14px; a { width:11px; height:11px; display:block; text-indent:-10000px; background:url(../images/slider/pagination.png) no-repeat right top; } a:hover, &.current a { background:url(../images/slider/pagination.png) no-repeat left top; } } } } } Нижеидущий контент - Галлерея (SUSY Сетка) slider#slider { @include pie-clearfix; @include full; } gallery#gallery { @include pie-clearfix;//флоаты сброшены миксином @include full; } .gallery { @include span(8); &:last-child { @include span(8 last); } } Часть кода из <script src="design/{$settings->theme|escape}/js/slider/slider-faded.js"></script> $.fn.extend({ faded: function(options) { var settings = $.extend({}, $.fn.faded.defaults, options); return this.each( function() { if($.fn.jquery < "1.3.1") {return;} var $t = $(this); var $c = $t.children(":nth-child(1)"); //Тут много кода.... )) $c.css({position:"relative"}); $c.children().css({ position:"absolute", top: 0, left: 0, zIndex: 0, display:"none" }); //И тут много кода.... )) Все уже перепробовал, может я что-то упустил в изучении CSS/HTML...Проблемма в том что если ставить фиксированную Высоту слайдера - контент "пляшет" от слайдера все нормально,но слайдер перестает быть резиновым, если убирать position:relativ/absolute - то идут глюки в работе слайдера и пагинации (.pagination), т.к. картинки наложены друг-на-друга,но становится адаптивным, если убрать фиксированные размеры - слайдер перекрывает собой контент, но становится не адаптивным. Изменено 5 мая, 2015 пользователем drakulitkas Цитата Ссылка на сообщение Поделиться на другие сайты
shooroop Опубликовано 5 мая, 2015 Жалоба Поделиться Опубликовано 5 мая, 2015 я юзаю это http://owlgraphic.com/owlcarousel/demos/autoHeight.html Цитата Ссылка на сообщение Поделиться на другие сайты
drakulitkas Опубликовано 5 мая, 2015 Автор Жалоба Поделиться Опубликовано 5 мая, 2015 (изменено) я юзаю это http://owlgraphic.com/owlcarousel/demos/autoHeight.html Спасибо!Но тут дело не в альтернативе, а в решении этой ситуации, для повышения своей практики, т.к. только учусь верстке, хочу рипнуть шаблончик и натянуть на симплу: Тема.Шаблон не адаптивный, я его натягиваю на SUSY. Вроде получается, дошел до слайдера и столкнулся сразу с проблемкой.Слайдеров адаптивных полно, но мне интересно решение, возможно ли ее разрешить средствами CSS/HTML.Вот тыркаюсь уже второй день, хотел своими силами... P.S.: А как выложить макетик в топик? Или это не всем доступно на форуме? Изменено 5 мая, 2015 пользователем drakulitkas Цитата Ссылка на сообщение Поделиться на другие сайты
koteyka Опубликовано 5 мая, 2015 Жалоба Поделиться Опубликовано 5 мая, 2015 Скорее всего Вы слайдер вставляете в какой-то блок сайта у которого (или у контента) прописано overflow: hidden; Поэтому контент и прячется. Найдите и уберите этот стиль. Цитата Ссылка на сообщение Поделиться на другие сайты
drakulitkas Опубликовано 5 мая, 2015 Автор Жалоба Поделиться Опубликовано 5 мая, 2015 Скорее всего Вы слайдер вставляете в какой-то блок сайта у которого (или у контента) прописано overflow: hidden; Поэтому контент и прячется. Найдите и уберите этот стиль.К сожалению... Сейчас добился того, что контент не заезжает за слайдер, но при уменьшения окна браузера по ширине слайдер уменьшается, а контент не поджимается к нему, и между слайдером и контентом снизу остается пустое место, перезагрузка страницы поджимает контент к уменьшеному слайдеру, ну думаю его можно назвать адаптивным. Так же и с увеличением ширины браузера, слайдер расширяется по ширине и высоте и прячется за контент, перезагрузка страница все выравнивает.Выходит что при загрузке страницы на любом устройстве без последующего уменьшения ширины браузера слайдер и контент отображаются нормально. Не идеально, конечно. Есть слайдеры которые реагируют на изменение ширины двигая контент вверх/вниз.Два дня - это много конечно Цитата Ссылка на сообщение Поделиться на другие сайты
koteyka Опубликовано 5 мая, 2015 Жалоба Поделиться Опубликовано 5 мая, 2015 (изменено) перезагрузка страницы поджимает контентЭто как? А до этого что было, не загрузка страницы? Что-то не понятно ничего. Страница грузится за два этапа? Один раз при открытии и второй при перезагрузке? Изменено 5 мая, 2015 пользователем koteyka Цитата Ссылка на сообщение Поделиться на другие сайты
drakulitkas Опубликовано 5 мая, 2015 Автор Жалоба Поделиться Опубликовано 5 мая, 2015 Это как? А до этого что было, не загрузка страницы? Что-то не понятно ничего. Страница грузится за два этапа? Один раз при открытии и второй при перезагрузке? Нет, я имею ввиду что уменьшение слайдера и подтягивание контента происходит как-бы "в режиме реального времени", т.е. тянешь мышкой за правый край браузера влево, и на глаза слайдер меняет размер а контент подтягивается к слайдеру, и обратно при расширении браузера, ну как элементы FlexBox.В моем же случае при уменьшении ширины браузера слайдер уменьшается, но контент остается на месте, после перезагрузки страницы уменьшеного браузера, контент подтягивается к слайдеру, и наоборот.Вроде так понятнее. Могу в картинках )) Цитата Ссылка на сообщение Поделиться на другие сайты
koteyka Опубликовано 5 мая, 2015 Жалоба Поделиться Опубликовано 5 мая, 2015 Так значит адаптивный у тебя только слайдер, а сам сайт - псевдо-адаптив. Верстай шаблон. Цитата Ссылка на сообщение Поделиться на другие сайты
drakulitkas Опубликовано 5 мая, 2015 Автор Жалоба Поделиться Опубликовано 5 мая, 2015 (изменено) Исходный размер После сужения После обновления окна браузера Расширение браузера (Слайдер прячется за контент, но при перезагрузке, все становится как на Рис.1.) P.S.: 3 картинки ниже слайдера к нему не относятся. Это уже контент. Изменено 5 мая, 2015 пользователем drakulitkas Цитата Ссылка на сообщение Поделиться на другие сайты
drakulitkas Опубликовано 5 мая, 2015 Автор Жалоба Поделиться Опубликовано 5 мая, 2015 Так значит адаптивный у тебя только слайдер, а сам сайт - псевдо-адаптив. Верстай шаблон.Сетка адаптивная, по ширине все реагирует на изменение размера браузера, вот по высоте под слайдер не лезет контент без перезагрузки.Меню доколупал почти, сейчас буду делать список товаров, там тоже кривовато пока Цитата Ссылка на сообщение Поделиться на другие сайты
Simplamarket Опубликовано 5 мая, 2015 Жалоба Поделиться Опубликовано 5 мая, 2015 Исходный размер После сужения После обновления окна браузера Расширение браузера (Слайдер прячется за контент, но при перезагрузке, все становится как на Рис.1.) P.S.: 3 картинки ниже слайдера к нему не относятся. Это уже контент. Я так понимаю, что там на скриптах сделано вычисление размеров слайдера, в зависимости от ширины экрана при загрузке страницы. Поэтому когда тянешь мышкой, то появляются косяки, а когда перезагружаешь, то пропадают. В принципе это не критично, так как обычный пользователь увидит этот косяк очень редко, разве что загрузит в мобильном устройстве в ландшафтном режиме, а затем перевернет в портретный. Но если хочется идеала, то лучше переделать. Цитата Ссылка на сообщение Поделиться на другие сайты
drakulitkas Опубликовано 5 мая, 2015 Автор Жалоба Поделиться Опубликовано 5 мая, 2015 разве что загрузит в мобильном устройстве в ландшафтном режиме, а затем перевернет в портретный... и наоборот. С осваиванием JavaScript пока туговато дело идет, но потихоньку пытаюсь понять.Ну HTML и CSS на 60% думаю освоил. Цитата Ссылка на сообщение Поделиться на другие сайты
chocolate_moles Опубликовано 5 мая, 2015 Жалоба Поделиться Опубликовано 5 мая, 2015 (изменено) http://jsfiddle.net/d54961s6/1/ Изменено 5 мая, 2015 пользователем chocolate_moles Цитата Ссылка на сообщение Поделиться на другие сайты
drakulitkas Опубликовано 6 мая, 2015 Автор Жалоба Поделиться Опубликовано 6 мая, 2015 Да, нужно что-то такоеВот так не получается <script> $('.slider-img').resize(function(){ $('#slider-wrapper').css('height', $(this).height()) }) </script> Нужно отслеживать ширину/высоту картинки слайдера <img class="slider-img" src="..."> и присваивать параметры блоку который не уменьшается <div id="slider-wrapper">Тут нюанс еще: в консоли браузера показывается что этому диву передаются значения из скрипта: if(typeof jQuery != "undefined") { jQuery(function($) { $.fn.extend({ faded: function(options) { var settings = $.extend({}, $.fn.faded.defaults, options); return this.each( function() { if($.fn.jquery < "1.3.1") {return;} var $t = $(this); var $c = $t.children(":nth-child(1)"); var o = $.metadata ? $.extend({}, settings, $t.metadata()) : settings; var total = $c.children().size(); var next = 0, prev = 0, number = 0, currentitem = 0, restart = 0, restartinterval = 0; var loaded,active,imgSrc,clicked,current; if (o.random) { $.fn.reorder = function(callback) { function randOrd() { return(Math.round(Math.random())-0.5); } return($(this).each(function() { var $this = $(this); var $children = $this.children(); var childCount = $children.length; if (childCount > 1) { $children.hide(); var indices = new Array(); for (i=0;i<childCount;i++) { indices[indices.length] = i; } indices = indices.sort(randOrd); $.each(indices,function(j,k) { var $child = $children.eq(k); var $clone = $child.clone(true); $clone.show().appendTo($this); if (callback !== undefined) { callback($child, $clone); } $child.remove(); }); } })); }; $c.reorder(); } function pause() { clearInterval(autoplay); clearTimeout(restart); restart = setTimeout(function() { autoplay = setInterval(function(){ animate("next"); },o.autoplay); },o.autorestart); } $c.css({position:"relative"}); $c.children().css({ position:"absolute", top: 0, left: 0, zIndex: 0, display:"none" }); if (o.autoheight) { $c.animate({height: $c.children(":eq(0)").outerHeight()},o.autoheight); } if (o.pagination) { if (o.autopagination) { $t.append("<ul class="+o.pagination+"></ul>"); $c.children().each(function(){ $("."+o.pagination+"",$t).append("<li><a rel="+number+" href=\"#\" >"+(number+1)+"</a></li>"); number++; }); } $("."+o.pagination+" li a:eq(0)",$t).parent().addClass("current"); $("."+o.pagination+" li a",$t).click(function(){ current = $("."+o.pagination+" li.current a",$t).attr("rel"); clicked = $(this).attr("rel"); if (current != clicked) {animate("pagination",clicked,current);} if(o.autoplay){pause();} return false; }); } if (o.sequentialloading&&$c.children()[0].tagName=="IMG") { $c.css({background:"url("+o.loadingimg+") no-repeat 50% 50%"}); imgSrc = $("img:eq(0)",$c).attr("src"); $("img:eq(0)",$c).attr("src", imgSrc).load(function() { $(this).fadeIn(o.speed,function(){ loaded = true; }); }); } else { $c.find(":eq(0)").fadeIn(o.speed,function(){ loaded = true; }); } if (o.bigtarget) { $c.css({"cursor":"pointer"}); $c.click(function(){ animate("next"); if(o.autoplay){ if (o.autorestart) { pause(); } else { clearInterval(autoplay); } } return false; }); } if (o.autoplay) { autoplay = setInterval(function(){ animate("next"); },o.autoplay); pause(); } $("."+o.nextbtn,$t).click(function(){ animate("next"); if(o.autoplay){ if (o.autorestart) { pause(); } else { clearInterval(autoplay); } } return false; }); $("."+o.prevbtn,$t).click(function(){ animate("prev"); if(o.autoplay){ if (o.autorestart) { pause(); } else { clearInterval(autoplay); } } return false; }); function animate(dir,clicked,current){ if (!active&&loaded) { active=true; switch(dir) { case "next": prev = next; next = currentitem*1+1; if (total === next) { next = 0; } break; case "prev": prev = next; next = currentitem*1-1; if (next === -1) { next = total-1; } break; case "pagination": next = clicked; prev = current; break; } if (o.pagination) { $(".pagination li.current",$t).removeClass("current"); $(".pagination li a:eq("+next+")",$t).parent().addClass("current"); } if (o.crossfade) { $c.children(":eq("+next+")").css({zIndex:10}).fadeIn(o.speed,function(){ $c.children(":eq("+prev+")").css({display:"none",zIndex:0}); $(this).css({zIndex:0}); currentitem = next; active = false; }); } else { $c.children(":eq("+prev+")").fadeOut(o.speed,function(){ if (o.autoheight) { $c.animate({height: $c.children(":eq("+next+")").outerHeight()},o.autoheight,function(){ $c.children(":eq("+next+")").fadeIn(o.speed); }); } else { $c.children(":eq("+next+")").fadeIn(o.speed); } currentitem = next; active = false; }); } } } } ); } }); $.fn.faded.defaults = { speed: 300, crossfade: false, bigtarget: false, sequentialloading: false, autoheight: true, pagination: "pagination", autopagination: true, nextbtn: "next", prevbtn: "prev", loadingimg: false, autoplay: false, autorestart: false, random: false }; }); } Параметр autoheight: trueНо все равно что-то не так... Цитата Ссылка на сообщение Поделиться на другие сайты
drakulitkas Опубликовано 7 мая, 2015 Автор Жалоба Поделиться Опубликовано 7 мая, 2015 (изменено) http://jsfiddle.net/d54961s6/1/ Ура получилось, спасибо ))То что доктор прописал )) мдяяя...JS классная штука оказывается, без него в веб-дизайне никак Изменено 7 мая, 2015 пользователем drakulitkas Цитата Ссылка на сообщение Поделиться на другие сайты
cernos Опубликовано 8 мая, 2015 Жалоба Поделиться Опубликовано 8 мая, 2015 я юзаю это http://owlgraphic.com/owlcarousel/demos/autoHeight.htmlКстати очень хорошая и удачная карусель с множеством настроек! Цитата Ссылка на сообщение Поделиться на другие сайты
Рекомендуемые сообщения
Присоединяйтесь к обсуждению
Вы можете написать сейчас и зарегистрироваться позже. Если у вас есть аккаунт, авторизуйтесь, чтобы опубликовать от имени своего аккаунта.