Отключен JavaScript

У вас отключен JavaScript. Некоторые возможности системы не будут работать. Пожалуйста, включите JavaScript для получения доступа ко всем функциям.

0

Удаление Лишних Маркеров И Пробелов На Jslidernews

Автор Aukvels, 08 авг. 2013 11:29

JSliderNews

Вперед

Авторизуйтесь для ответа в теме

Сообщений в теме: 25

#1 Aukvels

Пользователь

Пользователи
23 сообщений

Отправлено 08 Август 2013 - 11:29

Здравствуйте. Не могу разобраться, нужна ваша помощь

Нужно удалить пробелы и маркеры. В общем, сделать как здесь

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

Спасибо заранее!

Прикрепленные изображения

Наверх

#2 sengun

Активный участник

Модератоpы
1 139 сообщений

ГородНижний Новгород

Отправлено 08 Август 2013 - 12:53

Aukvels (08 Август 2013 - 11:29) писал:

Здравствуйте. Не могу разобраться, нужна ваша помощь

Нужно удалить пробелы и маркеры. В общем, сделать как здесь

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

Спасибо заранее!

Здравствуйте. Изменения надо производить в шаблоне style.css.
Замените код

ul.lof-navigator li{
cursor:hand;
cursor:pointer;
list-style:none;
width:100%;
padding:0;
margin:0;
overflow:hidden;
}

на

ul.lof-navigator li{
cursor:hand;
cursor:pointer;
list-style:none;
width:100%;
padding:0 !important;
margin:0;
overflow:hidden;
background: none !important;
}

Далее в коде

.lof-navigator li div{
background:url(120db.storeland.ru/images/transparent_bg.png);
color:#FFF;
height:100%;
position:relative;
margin-left:15px;
padding-left:15px;
border-top:1px solid #E1E1E1;
}

удалите margin-left:15px;
Теперь в конец файла добавьте такой код

.lof-main-outer ul li {
background: none !important;
padding: 0 !important;
}

И, наконец, в коде

ul.lof-main-wapper{
/* margin-right:auto; */
overflow:hidden;
background:transparent url(120db.storeland.ru/images/load-indicator.gif) no-repeat scroll 50% 50%;
padding:0px;
margin:0;
height:300px;
width:600px;
position:absolute;
overflow:hidden;
}

margin:0; замените на margin:0 !important;

Изменить время смены слайдов можно в шаблоне script.js в строке

interval	  : 4000,

4000 = 4 сек

Наверх

#3 Aukvels

Пользователь

Пользователи
23 сообщений

Отправлено 08 Август 2013 - 14:24

Благодарю! Все получилось...только интервал в данном случае нужно было задавать в main.js , а не в script.js.

Наверх

#4 Aukvels

Пользователь

Пользователи
23 сообщений

Отправлено 08 Август 2013 - 18:14

Снова прошу Вас, мне помочь. Не могу уменьшить слайдер. Как пропорционально изменить размер всех блоков слайдера, чтобы он не выпирал справа? А еще лучше обрезать у правого блока (с миниатюрами) все, что выпирает за блок с товаром. Это был бы самый идеальный вариант.

Я смог уменьшить только общий размер, но тогда блоки наползают друг на друга.

Наверх

#5 sengun

Активный участник

Модератоpы
1 139 сообщений

ГородНижний Новгород

Отправлено 08 Август 2013 - 18:59

Aukvels (08 Август 2013 - 18:14) писал:

Снова прошу Вас, мне помочь. Не могу уменьшить слайдер. Как пропорционально изменить размер всех блоков слайдера, чтобы он не выпирал справа? А еще лучше обрезать у правого блока (с миниатюрами) все, что выпирает за блок с товаром. Это был бы самый идеальный вариант.

Я смог уменьшить только общий размер, но тогда блоки наползают друг на друга.

Попробуйте так. В style.css в коде

.lof-slidecontent{
position:relative;
overflow:hidden;
border:#F4F4F4 solid 1px;
width:892px;
height:300px;
}

width:892px; замените на width:798px;
Далее в коде

.lof-navigator-outer{
position:absolute;
right:0;
top:00px;
z-index:100;
height:300px;
width:310px;
overflow:hidden;
color:#FFF
}

добавьте такую строку

width: 217px !important;

А так же в коде

ul.lof-navigator li{
cursor:hand;
cursor:pointer;
list-style:none;
width:100%;
padding:0 !important;
margin:0;
overflow:hidden;
background: none !important;
}

width:100%; замените на width: 91% !important;
Последнее изменение для того, чтобы текст в правых блоках не выезжал за правую границу. Правда в этом случае текст будет выезжать (и там скрываться) за нижнюю границу.
Решение проблемы вижу в уменьшении размера шрифта в правых блоках слайдера. В коде

.lof-navigator li div{
background:url(120db.storeland.ru/images/transparent_bg.png);
color:#FFF;
height:100%;
position:relative;
padding-left:15px;
border-top:1px solid #E1E1E1;
}

добавьте строку

font-size: 88%;

При таком значении размера шрифта, вроде весь текст умещается.

Наверх

#6 Aukvels

Пользователь

Пользователи
23 сообщений

Отправлено 08 Август 2013 - 19:55

Спасибо!

Наверх

#7 Aukvels

Пользователь

Пользователи
23 сообщений

Отправлено 09 Август 2013 - 23:14

Здравствуйте. Снова ваша помощь нужна. На слайдере нужно сделать ссылки на соответствующие страницы. В html указываю каждому слайду свою уникальную ссылку, но при клике на них они все ведут на ссылку указанную в последнем слайде! Не понимаю как исправить, помогите!

Прикрепленные изображения

Наверх

#8 Vaccina

Активный участник

Модераторы
24 353 сообщений

Отправлено 10 Август 2013 - 00:38

Пришлите пожалуйста код данного слайдера.

Наверх

#9 Aukvels

Пользователь

Пользователи
23 сообщений

Отправлено 10 Август 2013 - 11:25

<!-- Слайдер -->
<div id="lofslidecontent45" class="lof-slidecontent">
<div class="preload"><div></div></div>
<!-- MAIN CONTENT -->
<div class="lof-main-outer">
<ul class="lof-main-wapper">
	 <li>
				 <img src="http://files.storeland.net/f707/114/tracker.jpg" title="Newsflash 2" height="300" width="900">				
								 <div class="lof-main-item-desc">
							 <h3><a target="_parent" title="Newsflash 2" href="http://120db.storeland.ru/page/dostavka">Доставка</a></h3>
							 <p>The one thing about a Web site, it always changes! Joomla! makes it easy to add Articles, content,...</p>
						 </div>
			 </li>
		 <li>
				 <img src="http://files.storeland.net/f707/117/tracker2.jpg" title="Newsflash 1" height="300" width="900">					
								 <div class="lof-main-item-desc">
							 <h3><a target="_parent" title="Newsflash 1" href="http://120db.storeland.ru/page/sposoby-oplaty">Оплата</a></h3>
							 <p>Joomla! makes it easy to launch a Web site of any kind. Whether you want a brochure site or you are...</p>
						 </div>
			 </li>
		 <li>
				 <img src="{ASSETS_IMAGES_PATH}images/641906img1.jpg" title="Newsflash 3" height="300" width="900">			
							 <div class="lof-main-item-desc">
							 <h3><a target="_parent" title="Newsflash 3" href="#">Newsflash 3</a></h3>
							 <p>With a library of thousands of free Extensions, you can add what you need as your site grows. Don't...</p>
						 </div>
			 </li>
			 <li>
				 <img src="{ASSETS_IMAGES_PATH}images/416719news7.jpg" title="Newsflash 5" height="300" width="900">					
								 <div class="lof-main-item-desc">
							 <h3><a target="_parent" title="Newsflash 5" href="#">Newsflash 5</a></h3>
							 <p>Joomla! 1.5 - 'Experience the Freedom'!. It has never been easier to create your own dynamic Web...</p>
						 </div>
			 </li>
		
			 <li>
				 <img src="{ASSETS_IMAGES_PATH}images/416719news7.jpg" title="Newsflash 5" height="300" width="900">					
								 <div class="lof-main-item-desc">
							 <h3><a target="_parent" title="Newsflash 5" href="#">Newsflash 5</a></h3>
							 <p>Joomla! 1.5 - 'Experience the Freedom'!. It has never been easier to create your own dynamic Web...</p>
						 </div>
			 </li>
			 <li>
				 <img src="{ASSETS_IMAGES_PATH}images/416719news7.jpg" title="Newsflash 5" height="300" width="900">					
								 <div class="lof-main-item-desc">
							 <h3><a target="_parent" title="Newsflash 5" href="http://120db.storeland.ru/page/sposoby-oplaty">Все равно сюда переходит</a></h3>
							 <p>Joomla! 1.5 - 'Experience the Freedom'!. It has never been easier to create your own dynamic Web...</p>
						 </div>
			 </li>
		 </ul>
</div>
<!-- END MAIN CONTENT -->
	 <!-- NAVIGATOR -->
<div class="lof-navigator-outer">
	 <ul class="lof-navigator">
					 <li>
						 <div>
								 <img src="{ASSETS_IMAGES_PATH}images/lofthumbs/791902news3.jpg" />
								 <h3> NewsFlash 1 </h3>
								 <span>20.01.2010</span> - In id, mauris viverra asperiores, bibendum in id. Eu molestie. Ac sit eu...
							 </div>
					 </li>
						 <li>
						 <div>
								 <img src="{ASSETS_IMAGES_PATH}images/lofthumbs/435576news10.jpg" />
								 <h3> NewsFlash 2 </h3>
								 <span>20.01.2010</span> -In id, mauris viverra asperiores, bibendum in id. Eu molestie. Ac sit eu. ..
							 </div>
					 </li>
					 <li>
						 <div>
									 <img src="{ASSETS_IMAGES_PATH}images/lofthumbs/641906img1.jpg" />
									 <h3> NewsFlash 3 </h3>
								 <span>20.01.2010</span> - In id, mauris viverra asperiores, bibendum in id. Eu molestie. Ac sit eu. ..
							 </div>
					 </li>
				
				 <li>
						 <div>
									 <img src="{ASSETS_IMAGES_PATH}images/lofthumbs/416719news7.jpg" />
									 <h3> NewsFlash 4</h3>
									 <span>20.01.2010</span> - In id, mauris viverra asperiores, bibendum in id. Eu molestie. Ac sit eu. ..
							 </div>
					 </li>
					 <li>
						 <div>
								 <img src="{ASSETS_IMAGES_PATH}images/lofthumbs/641906img1.jpg" />
								 <h3> NewsFlash 5</h3>
								 <span>20.01.2010</span> -In id, mauris viverra asperiores, bibendum in id. Eu molestie. Ac sit eu. ..
								 </div>
					 </li>
				 <li>
						 <div>
									 <img src="{ASSETS_IMAGES_PATH}images/lofthumbs/416719news7.jpg" />
									 <h3> NewsFlash 6</h3>
								 <span>20.01.2010</span> - In id, mauris viverra asperiores, bibendum in id. Eu molestie. Ac sit eu. ..
							 </div>
					 </li>	
			 </ul>
</div>
</div>
<!-- end Cлайдер-->

Наверх

#10 miyako

Активный участник

Модератоpы
5 372 сообщений

Отправлено 10 Август 2013 - 12:40

Найдите код в style.css -

.lof-main-item-desc{
z-index:100px;
position:absolute;
top:180px;
left:20px;
width:400px;
background:url(120db.storeland.ru/images/transparent_bg.png);
/* filter:0.7(opacity:60) */
}

и замените -

z-index:100px;

на -

z-index:100;

Наверх

#11 Aukvels

Пользователь

Пользователи
23 сообщений

Отправлено 10 Август 2013 - 13:31

Благодарю!

Наверх

#12 Aukvels

Пользователь

Пользователи
23 сообщений

Отправлено 16 Август 2013 - 14:32

Здравствуйте. Снова вопрос по слайдеру: как изменить цвет активной навигационной панели? Все облазил - не могу найти. Помогите пожалуйста!

Прикрепленные изображения

Наверх

#13 sengun

Активный участник

Модератоpы
1 139 сообщений

ГородНижний Новгород

Отправлено 16 Август 2013 - 18:36

Aukvels (16 Август 2013 - 14:32) писал:

Здравствуйте. Снова вопрос по слайдеру: как изменить цвет активной навигационной панели? Все облазил - не могу найти. Помогите пожалуйста!

Здравствуйте. Фон активной навигационной панели слайдера задается в коде

.lof-navigator li.active div{
background:url(120db.storeland.ru/images/grad-bg.gif);
color:#FFF;
}

в файле style.css
Вам надо либо задать фон цветом (background: red; например), либо заменить изображение grad-bg.gif в разделе Сайт-Редактор шаблонов. Кстати, url до изображений раздела Сайт-Редактор шаблонов лучше прописывать через переменную. Т.е. код

background:url({ASSETS_IMAGES_PATH}grad-bg.gif);

будет корректным.

Наверх

#14 Aukvels

Пользователь

Пользователи
23 сообщений

Отправлено 17 Август 2013 - 05:15

Спасибо! Пути изменю на корректные.

Наверх

#15 Aukvels

Пользователь

Пользователи
23 сообщений

Отправлено 15 Сентябрь 2013 - 12:23

Здравствуйте. У меня проблема отображения слайдера в IE 10. Проблема такая: Если открыть сайт впервые, то слайдер не отображается, но если кликнуть на логотип (главная), то слайдер появляется. Далее, если я перехожу на любую страницу, а потом снова на главную, то слайдер снова не отображается, но если повторно кликнуть на лого, то он снова работает. Т.е. чтобы слайдер отображался нужно кликать 2 раза на лого. Для меня очень важно, чтобы он корректно отображался, т.к. на нем информация об акциях, гарантии и доставке. В хроме и мозиле все ОК, но, к сожалению, есть пользователи, которые пользуются именно этим "браузером".
Я удалял/вставлял код

<meta http-equiv="X-UA-Compatible" content="IE=7" /

менял версии ie, но корректного отображения добиться так и не смог. Сейчас код удален. Уповаю на вашу помощь.
Также просьба, если есть такая возможность, посмотреть как в опере отображается таймер на 1м слайде, так как у меня старая версия оперы 12.15 (не могу обновить, т.к. для работы нужна именно эта версия) и в ней таймер уходит за край слайда. Вот сайт

Наверх

#16 Сake

Активный участник

Модератоpы
5 979 сообщений

Отправлено 17 Сентябрь 2013 - 01:32

Для оперы попробуйте сделать следующее - в шаблоне "HTML" найдите

<div class="time" style=" margin: 50px 0 0 230px;z-index: 999;position: absolute;">

и замените на

<div class="time" style="top: 50px; left: 230px; z-index: 999; position: absolute;">

По IE: В данном случае вероятно проблема с отработкой события загрузки изображения браузером. Из-за того что не срабатывает событие onComplete - не убирается визуальный предзагрузчик (.preload). Как вариант - можно добавить дополнительное событие, которое будет принудительно удалять элемент предзагрузки если он не был удален автоматически. Попробуйте добавить в файл main.js следующий код

$(function() {
  setTimeout(function() {
	$('.preload').remove();
  }, 2000);
});

Наверх

#17 Aukvels

Пользователь

Пользователи
23 сообщений

Отправлено 23 Сентябрь 2013 - 09:42

Сake (17 Сентябрь 2013 - 01:32) писал:

Для оперы попробуйте сделать следующее - в шаблоне "HTML" найдите

<div class="time" style=" margin: 50px 0 0 230px;z-index: 999;position: absolute;">

и замените на

<div class="time" style="top: 50px; left: 230px; z-index: 999; position: absolute;">

С оперой не получилось. Даже в обновленном браузере таймер смещен за границу слайда. Помощь по прежнему требуется.

Сake (17 Сентябрь 2013 - 01:32) писал:

По IE: В данном случае вероятно проблема с отработкой события загрузки изображения браузером. Из-за того что не срабатывает событие onComplete - не убирается визуальный предзагрузчик (.preload). Как вариант - можно добавить дополнительное событие, которое будет принудительно удалять элемент предзагрузки если он не был удален автоматически. Попробуйте добавить в файл main.js следующий код

$(function() {
setTimeout(function() {
$('.preload').remove();
}, 2000);
});

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

Наверх

#18 Сake

Активный участник

Модератоpы
5 979 сообщений

Отправлено 24 Сентябрь 2013 - 03:00

Цитата

С оперой не получилось. Даже в обновленном браузере таймер смещен за границу слайда.

Попробуйте еще добавить ширину элементу. Заменив

<div class="time" style="top: 50px; left: 230px; z-index: 999; position: absolute;">

на

<div class="time" style="top: 50px; left: 230px; z-index: 999; position: absolute; width: 370px;">

Цитата

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

Пожалуйста, сообщите в каком браузере подобное проявляется? в IE?