Слайдер На Главной
#1
Отправлено 24 Июль 2012 - 19:58
Только не пнял, что куда запихивать чтобы слайдер появился именно тут, как на картинке?
#2
Отправлено 24 Июль 2012 - 22:02
{%IF index_page%} код слайдера {%ENDIF%}
#3
Отправлено 24 Июль 2012 - 23:11
как можно это все сделать?
у меня в архиве папки :
1) css
2) img - это понятно вроде бы
3) js - тут вообще 3 файла *.js
и еще, можно ли к каждой ссылке прикрепить ссылку для перехода?
Если интересно, то ниже архив
Прикрепленные файлы
#4
Отправлено 25 Июль 2012 - 03:04
Вы предлагаете товар, соответственно вам бы не помешал бы слайдер, где в него входило и описание товара, и возможно перейти на страницу товара, и даже добавить в корзину...
#5
Отправлено 25 Июль 2012 - 14:19
#6
Отправлено 25 Июль 2012 - 14:23
#7
Отправлено 25 Июль 2012 - 14:23
#8
Отправлено 25 Июль 2012 - 14:28
#9
Отправлено 25 Июль 2012 - 14:29
#10
Отправлено 25 Июль 2012 - 14:33
#11
Отправлено 25 Июль 2012 - 14:35
там файл с этой штуковиной выше я выложил)
я имею ввиду я полный ноль вообще в том как этот слайдер вставить на сайт) сделать хотел бы на главной перед этими картинками которые сейчас у меня на сайте www.v1shop.ru
#12
Отправлено 25 Июль 2012 - 14:40
#13
Отправлено 25 Июль 2012 - 14:50
#14
Отправлено 25 Июль 2012 - 15:12
#15
Отправлено 25 Июль 2012 - 15:28
#16
Отправлено 25 Июль 2012 - 15:32
1. Загрузить файлы к себе в админку.
raphael.js
init.js
default.css
2. Подключить файлы в шаблоне HTML...
1. <link rel="stylesheet" href="{ASSETS_STYLES_PATH}default.css" type="text/css" />
2. <script type="text/javascript" src="{ASSETS_JS_PATH}init.js"></script>
<script type="text/javascript" src="{ASSETS_JS_PATH}raphael.js"></script>
И дальше См. картинку....
3. Открываем файл init.js
И внутри его меняем на это:
$(function(){
var li = $('.gallery').find('li'); // Ищем все элементы 'li'
li.each(function(i){
var t = $(this),
img = t.find('img'), // Ищем изображение в элементе 'li'
src = img.attr('src'), // Получаем путь к изображению
width = li.width(), // Получаем ширину 'li'
height = li.height(); // Получаем высоту 'li'
img.hide().after($('<div />').attr('id', 'holder'+i).addClass('holder')); // Скрываем все изображения и создаем контейнеры для объектов Raphael
var r = Raphael('holder'+i, width*2, height*2), // Создаем объекты Raphael
rimg = r.image(src, width/2, height/2, width, height); // Создаем новое изображение с использованием предыдущей переменной
rimg.hover(function() {
this.animate({
scale: 2, // Увеличиваем ваше изображение до нормального размера
rotation : 360
}, 1200, 'elastic');
}, function() {
this.animate({
scale: 1, // Уменьшаем размер изображений
rotation : 0
}, 1200, 'elastic');
});
});
li.hover(function(){
li.css({ 'z-index': 1 }); // Устанавливаем z-index для всех элементов 'li'
$(this).css({ 'z-index': 2 }); // Устанавливаем z-index для элемента, над которым находится курсор мыши
});
});
4. Открываем файл default.css
И меняем на это:
ul.reset,
ul.reset li {
display:block;
list-style:none;
padding:0;
margin:0;
}
.gallery ul li {
width:144px;
height:144px;
margin:0 10px 10px 0;
float:left;
position:relative;
}
.holder {
position:absolute;
top:0;
left:0;
margin:-100px 0 0 -100px;
}
a img {
border:none;
}
5. Как все это проделали, остается теперь только сам код установить, но будете ставить его, чтоб он не мешал никому , т.е не дизайну , ни блокам и т.д. иначе может дизайн сайта съехать. Я Вам там уже уменьшил до 144 px.
Так же не размещайте большие картинки, рекомендуется размещать 400х400 px.
<div class="gallery">
<ul class="reset">
<li><a title="Название" href="Ваша ссылка"><img src="ссылка на картинку" alt="" /></a></li>
<li><a title="Название" href="Ваша ссылка"><img src="ссылка на картинку" alt="" /></a></li>
<li><a title="Название" href="Ваша ссылка"><img src="ссылка на картинку" alt="" /></a></li>
<li><a title="Название" href="Ваша ссылка"><img src="ссылка на картинку" alt="" /></a></li>
<li><a title="Название" href="Ваша ссылка"><img src="ссылка на картинку" alt="" /></a></li>
<li><a title="Название" href="Ваша ссылка"><img src="ссылка на картинку" alt="" /></a></li>
<li><a title="Название" href="Ваша ссылка"><img src="ссылка на картинку" alt="" /></a></li>
<li><a title="Название" href="Ваша ссылка"><img src="ссылка на картинку" alt="" /></a></li>
</ul>
</div>
Если хотите чтоб формат картинок миниатюр был другой, а так же расположение их - то это надо ковырять уже в default.css
#18
Отправлено 25 Июль 2012 - 21:21
#19
Отправлено 25 Июль 2012 - 21:23
Выделить все содержимое, удалить, и вставить что я Вам написал здесь
И еще, прежде чем ковыряться --- не забывайте Создавать бэкапы дизайн-шаблона
#20
Отправлено 25 Июль 2012 - 21:55
Количество пользователей, читающих эту тему: 0
0 пользователей, 0 гостей, 0 анонимных