Question

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

Answer 1

Вижу у вас слайдер выводится кодом:

<div class="carousel-images" style="position: relative;"> 
 <img alt="Test Image 1" src="http://log-line.ru/_pu/0/46383748.png" style="display: inline; left: 55.75px; top: 66.8975px; visibility: visible; position: absolute; z-index: 2; opacity: 0.09375; overflow: hidden; width: 108.134px; height: 151.142px;"> 
 </div>

есть предложение как это автоматизировать. Создайте информер Каталога статей - Материалы - дата добавления D, отредактируйте шаблон и замените все содержимое на:

 <?if($IMG_URL$)?><a href="$ENTRY_URL$"><img alt="$TITLE$" src="$IMG_URL$" style="display: inline; left: 55.75px; top: 66.8975px; visibility: visible; position: absolute; z-index: 2; opacity: 0.09375; overflow: hidden; width: 108.134px; height: 151.142px;"></a>
 <?endif?> 

после на сайте где установлен ваш слайдер, между кода:

<div class="carousel-images" style="position: relative;"> Здесь</div>

установите ваш код $MYINF_1$ где вместо 1 номер вашего слайдера, должно получиться.

Comments

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

---

FaN DarK,

Откройте на редактирование файл стилей - http://log-line.ru/3D-Slider/local.css строка номер 4:

#waterwheel-carousel-default {
  width:940px;
  background-color:#CCC;
  border:1px solid #222;
  height:250px;
  font-family: Arial;
  font-size:14px;
  position:relative;
  clear:both;
}

выделил выше, первое это фон и второе это рамка, удалите.

Чтобы добавлять слайды, смотрите как я выше описал, у вас прописано много фото таким методом:

<img alt="Test Image 1" src="http://log-line.ru/_pu/0/46383748.png" style="display: inline; left: 55.75px; top: 66.8975px; visibility: visible; position: absolute; z-index: 2; opacity: 0.09375; overflow: hidden; width: 108.134px; height: 151.142px;">

каждое новое, это новые слайды, чтобы при клике на фото переходить на нужный товар, код выше заверните в код:

<a href="ссылка на товар">здесь код фото как в примере выше</a>

---

Yuri_Geruk,

Вообще не вижу слайдера, проверьте что я не правильно сделал? 

---

FaN DarK,

Не знаю, что вы там правили, но фото перестали работать - http://log-line.ru/_pu/0/46383748.png редактировали, удалялил.

---

Yuri_Geruk,

Удалил в CSS как вы сказали. Вот весь код слайдера:

 

 <!-- <основной блок слайдера> --> 
<div id="waterwheel-carousel-default" style="margin:0px auto;"> 
 <!-- <блок стрелок> --> 
 <div class="carousel-controls"> 
 <div class="carousel-prev"><a href="#">< Назад</a></div> 
 <div class="carousel-next"><a href="#">> Вперёд</a></div> 
 </div> 
 <!-- </блок стрелок> --> 
 <!-- <блок материалов> --> 
 <div class="carousel-images"> 
<a href="http://log-line.ru/publ/ehlementy_pitanija/spec_ehlementy/batarejka_kosmos_cr123_1bl/22-1-0-18"><img alt="Test Image 1" src="http://log-line.ru/_pu/0/46383748.png" style="display: inline; left: 55.75px; top: 66.8975px; visibility: visible; position: absolute; z-index: 2; opacity: 0.09375; overflow: hidden; width: 108.134px; height: 151.142px;"></a>
<a href="http://log-line.ru/publ/ehlementy_pitanija/spec_ehlementy/batarejka_kosmos_cr123_1bl/22-1-0-18"><img alt="Test Image 2" src="http://log-line.ru/_pu/0/46383748.png" style="display: inline; left: 55.75px; top: 66.8975px; visibility: visible; position: absolute; z-index: 2; opacity: 0.09375; overflow: hidden; width: 108.134px; height: 151.142px;"></a>
<a href="http://log-line.ru/publ/ehlementy_pitanija/spec_ehlementy/batarejka_kosmos_cr123_1bl/22-1-0-18"><img alt="Test Image 3" src="http://log-line.ru/_pu/0/46383748.png" style="display: inline; left: 55.75px; top: 66.8975px; visibility: visible; position: absolute; z-index: 2; opacity: 0.09375; overflow: hidden; width: 108.134px; height: 151.142px;"></a>
<a href="http://log-line.ru/publ/ehlementy_pitanija/spec_ehlementy/batarejka_kosmos_cr123_1bl/22-1-0-18"><img alt="Test Image 4" src="http://log-line.ru/_pu/0/46383748.png" style="display: inline; left: 55.75px; top: 66.8975px; visibility: visible; position: absolute; z-index: 2; opacity: 0.09375; overflow: hidden; width: 108.134px; height: 151.142px;"></a>

 </div> 
 <!-- </блок материалов> --> 
</div> 
<!-- </основной блок слайдера> --> 
<!-- <скрипты и стили слайдера> --> 
<link type="text/css" rel="stylesheet" href="/3D-Slider/local.css"/> 
<script type="text/javascript" src="/3D-Slider/jquery-1.5.min.js"></script> 
<script type="text/javascript" src="/3D-Slider/jquery.waterwheelCarousel.js"></script> 
<script type="text/javascript"> 
$jqNew = jQuery.noConflict(true); 
$jqNew(document).ready(function () { 
$jqNew("#waterwheel-carousel-default").waterwheelCarousel(); 
}); 
</script> 
<!-- </скрипты и стили слайдера> -->

 

---

FaN DarK,

Не в стилях проблема, вы по ссылкам на фото перейдите, что вы прописал, все они отдают 404 ошибку. Вы их удалили как я понимаю.

---

Yuri_Geruk,

По поводу фото, я сам не понял как так получилось фото я точно не удалял. Еще вопрос! Сам слайдер чуточку кривит в сторону мне кажется, потому что я не вижу стрелку "вперед". Вообщем прикрепил скриншот как мне сделать такие переключатели товаров по середине слайдера !? Вместо <назад и вперед> (вперед который куда то улетел)

---

FaN DarK,

Находим выше код:

<div class="carousel-prev"><a href="#">< Назад</a></div>
<div class="carousel-next"><a href="#">> Вперёд</a></div>

где вместо выделенного вставляем <img src="ссылка на кнопку">  вот и все, проставите ссылки на фото иконок назад и вперед и будет как вам нужно.

---

Yuri_Geruk,

Как картинки вперед и назад, сместить по середине как на скриншоте выше !? они разбросаны так же, и стрелочку вперед так же не видно.

---

FaN DarK,

Замените содержимое - http://log-line.ru/3D-Slider/local.css на следующее:

/***********************
 * WATERWHEEL CAROUSEL *
 ***********************/
#waterwheel-carousel-default {
  width:940px;
  height:250px;
  font-family: Arial;
  font-size:14px;
  position:relative;
  clear:both;
}
#waterwheel-carousel-default a {
  color:#222;
}
#waterwheel-carousel-default .carousel-images img {
  visibility:hidden;
  cursor:pointer;
}
#waterwheel-carousel-default .carousel-controls .carousel-prev {
  position:absolute;
  bottom:30px;
}
#waterwheel-carousel-default .carousel-controls .carousel-next {
  position:absolute;
  bottom:30px;
  right: 14%;
}

---

Yuri_Geruk,

А как сделать что бы название с ценой на товар под картинкой бралось автоматически? Ну то есть я указал ссылку и картинку на товар, и что бы она внизу прописалась название и цена.

---

FaN DarK,

Здесь уже нужно писать скрипт, увы, здесь я уже не помощьник.

---

Yuri_Geruk,

А хотя бы название можно под ними выводить? Если не автоматически то может в ручную?

---

FaN DarK,

Вы уснули там?

---

FaN DarK,

Наверное уснули и такое может быть D:)). Выше в коде слайдера ищем подобное:

<a href="ссылка">фото слайдера</a>

попробуйте сразу же после этого кода добавить:

<br /><p>ваш текст к слайду</p>

и так для каждого слайда.

---

Yuri_Geruk,

Вроде сделал как вы сказали. 

---

FaN DarK,

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