Перейти к содержанию
Официальный форум поддержки Simpla

Рекомендуемые сообщения

Здравствуйте, 

Вставил слайдер в стандартный шаблон Симплы, при изменении стилей (для адаптивности):

резиновое масштабирование
#slider{
    
    #faded{
        max-width:940px;
        //height:460px;
        position:relative;
        img {
            width: 100%;
            height: auto;
        }
        .pagination{
            position:absolute;
        }
    }
}

Весь контент после слайдера прячется за него, подскажите пожалуйста как можно двигать контент ниже/выше в зависимости от высоты слайдера?

Если max-width:940px поменять на width:940px и расскоментировать height:460px, контент начинается от слайтера, но пропадает адаптивность.

 
 
 
 
 
 
 
 
 
 
Ссылка на сообщение
Поделиться на другие сайты

Этого "куска" мало, ссылку на сайт предоставьте, так как я не могу предположить какие стили прописаны для контента
Как вариант ниже слайдера вставить -DIV со стилем clear: both

Ссылка на сообщение
Поделиться на другие сайты

Этого "куска" мало, ссылку на сайт предоставьте, так как я не могу предположить какие стили прописаны для контента

Как вариант ниже слайдера вставить -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), т.к. картинки наложены друг-на-друга,

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

Изменено пользователем drakulitkas
Ссылка на сообщение
Поделиться на другие сайты

 

Спасибо!

Но тут дело не в альтернативе, а в решении этой ситуации, для повышения своей практики, т.к. только учусь верстке, хочу рипнуть шаблончик и натянуть на симплу: Тема.

Шаблон не адаптивный, я его натягиваю на SUSY. Вроде получается, дошел до слайдера и столкнулся сразу с проблемкой.

Слайдеров адаптивных полно, но мне интересно решение, возможно ли ее разрешить средствами CSS/HTML.

Вот тыркаюсь уже второй день, хотел своими силами...

 

P.S.: А как выложить макетик в топик? Или это не всем доступно на форуме?

Изменено пользователем drakulitkas
Ссылка на сообщение
Поделиться на другие сайты

Скорее всего Вы слайдер вставляете в какой-то блок сайта у которого (или у контента) прописано overflow: hidden; Поэтому контент и прячется. Найдите и уберите этот стиль.

Ссылка на сообщение
Поделиться на другие сайты

Скорее всего Вы слайдер вставляете в какой-то блок сайта у которого (или у контента) прописано overflow: hidden; Поэтому контент и прячется. Найдите и уберите этот стиль.

К сожалению...

 

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

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

Два дня - это много конечно  :wacko:

Ссылка на сообщение
Поделиться на другие сайты

перезагрузка страницы поджимает контент

Это как? А до этого что было, не загрузка страницы? Что-то не понятно ничего. Страница грузится за два этапа? Один раз при открытии и второй при перезагрузке? :D

Изменено пользователем koteyka
Ссылка на сообщение
Поделиться на другие сайты

Это как? А до этого что было, не загрузка страницы? Что-то не понятно ничего. Страница грузится за два этапа? Один раз при открытии и второй при перезагрузке? :D

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

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

Вроде так понятнее. Могу в картинках ))

Ссылка на сообщение
Поделиться на другие сайты

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

Ссылка на сообщение
Поделиться на другие сайты

Исходный размер

 

 

После сужения

 

После обновления окна браузера

 

Расширение браузера (Слайдер прячется за контент, но при перезагрузке, все становится как на Рис.1.)

 

P.S.: 3 картинки ниже слайдера к нему не относятся. Это уже контент.

Изменено пользователем drakulitkas
Ссылка на сообщение
Поделиться на другие сайты

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

Сетка адаптивная, по ширине все реагирует на изменение размера браузера, вот по высоте под слайдер не лезет контент без перезагрузки.

Меню доколупал почти, сейчас буду делать список товаров, там тоже кривовато пока  :wacko:

Ссылка на сообщение
Поделиться на другие сайты

Исходный размер

 

 

После сужения

 

После обновления окна браузера

 

Расширение браузера (Слайдер прячется за контент, но при перезагрузке, все становится как на Рис.1.)

 

P.S.: 3 картинки ниже слайдера к нему не относятся. Это уже контент.

 

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

 

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

Ссылка на сообщение
Поделиться на другие сайты

 разве что загрузит в мобильном устройстве в ландшафтном режиме, а затем перевернет в портретный

... и наоборот.

 

С осваиванием JavaScript пока туговато дело идет, но потихоньку пытаюсь понять.

Ну HTML и CSS на 60% думаю освоил.

Ссылка на сообщение
Поделиться на другие сайты

Да, нужно что-то такое

Вот так не получается

<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

Но все равно что-то не так...

Ссылка на сообщение
Поделиться на другие сайты

 

Ура получилось, спасибо ))

То что доктор прописал ))

 

мдяяя...

JS классная штука оказывается, без него в веб-дизайне никак  :)

Изменено пользователем drakulitkas
Ссылка на сообщение
Поделиться на другие сайты

Кстати очень хорошая и удачная карусель с множеством настроек!

Ссылка на сообщение
Поделиться на другие сайты

Присоединяйтесь к обсуждению

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

Гость
Ответить в этой теме...

×   Вставлено с форматированием.   Вставить как обычный текст

  Разрешено использовать не более 75 эмодзи.

×   Ваша ссылка была автоматически встроена.   Отображать как обычную ссылку

×   Ваш предыдущий контент был восстановлен.   Очистить редактор

×   Вы не можете вставлять изображения напрямую. Загружайте или вставляйте изображения по ссылке.

Загрузка...
×
×
  • Создать...