Перейти к содержимому


Партнерская программа Kredov

Как запустить форму с фотографиями в действие?

#1 Настя

Настя
  • Пользователь
  • 34 сообщений
  • Репутация: 0
0

Отправлено 29 Май 2012 - 12:49

В моем шаблоне, на странице "about-us" внизу есть форма с фотографиями которые можно листать стрелочками :( Я уже сутра сижу и никак не могу ее заставить работать... В голове, что-то крутиться, какая то идея, но сообразить не могу. Может кто-нибудь подскажет? ;) Я шаблон тут разместила :)

http://narod.ru/disk...site_1.rar.html

 

 

  • 0

#2 Symphony

Symphony
  • Пользователь
  • 636 сообщений
  • Репутация: 54

Отправлено 31 Май 2012 - 01:43

http://rghost.ru/38386625 - думаю, ну вот такое подойдет


на странице "about-us" свои фотки поставишь, думаю разберешься.
  • 1


#3 Настя

Настя
    Topic Starter
  • Пользователь
  • 34 сообщений
  • Репутация: 0

Отправлено 31 Май 2012 - 07:24

Ого! Спасибище! А как у вас получилось? Я просто сама хочу научиться :( Огромное спасибо!
Я так и не смогла найти, куда и что вы добавили ;)
  • 0

#4 Symphony

Symphony
  • Пользователь
  • 636 сообщений
  • Репутация: 54

Отправлено 31 Май 2012 - 10:11

Это всего лишь javaScript.
Обращайся в случае чего.
  • 0


#5 Настя

Настя
    Topic Starter
  • Пользователь
  • 34 сообщений
  • Репутация: 0

Отправлено 31 Май 2012 - 10:41

Да я поняла, что javaScript. :( Просто Мне бы интересно знать в какие страницы вы вставили скрипты и где из найти, что бы мне их перенести в свои страницы ;) Я некорорые нашла, но это видемо не все :) не работает :)
  • 0

#6 Symphony

Symphony
  • Пользователь
  • 636 сообщений
  • Репутация: 54

Отправлено 31 Май 2012 - 12:18

Пожалуйста:
(пиши на "ТЫ")
стили
/* carousel */
.carousel_block {
  position: relative;
  width: 828px;
  padding:0px 35px;
}
.carousel_block img {
  width: 261px;
  height: 179px;
  display: block;
}
.carousel_block .arrow {
  position: absolute;
  top: 70px;
}
.carousel_block .arrow img{
  width:16px !important;
  height:32px !important;
}

.carousel_block .left-arrow {
  left: 7px;
}
.carousel_block .right-arrow {
  right: 20px;
}
.galery {
  width: 828px;
  overflow: hidden;
}
.galery ul {
  height: 179px;
  width: 9999px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.galery ul li {
float: left; padding-right:15px;
}

/* /carousel */

html

		  <div class="carousel_block">
		  <a href="#" class="arrow left-arrow" id="prev"><img alt="&#8249;" src="images/prev.gif" /></a>
		  <div class="galery">
		   <ul id="images">
		   <li><img src="images/image_261x179.gif"></li>
		   <li><img src="images/image_261x179_2.gif"></li>
		   <li><img src="images/image_261x179_3.gif"></li>
		   <li><img src="images/image_261x179_4.gif"></li>
		   <li><img src="images/image_261x179.gif"></li>
		   <li><img src="images/image_261x179_6.gif"></li>
		   <li><img src="images/image_261x179_1.gif"></li>
		   <li><img src="images/image_261x179.gif"></li>
		   <li><img src="images/image_261x179_3.gif"></li>
		   <li><img src="images/image_261x179.gif"></li>
		   </ul>
		  </div>
		  <a href="#" class="arrow right-arrow" id="next"><img alt="&#8250;" src="images/next.gif" /></a>
		  </div>

js

		  <script>
		   var width = 276; // ширина изображения
		   var count = 2; // кол-во изображений
		  
		   var ul = document.getElementById('images');
		   var imgs = ul.getElementsByTagName('li');
		  
		   var position = 0;
		  
		   document.getElementById('prev').onclick = function() {
		   if (position >= 0) return false;
		   position = Math.min(position + width*count, 0)
		   ul.style.marginLeft = position + 'px';
		   return false;
		   }
		  
		   document.getElementById('next').onclick = function() {
		   if (position <= -width*(imgs.length-count)) return false;
		   position = Math.max(position-width*count, -width*(imgs.length-3));
		   ul.style.marginLeft = position + 'px';
		   return false;
		   };
		  
		  </script>

  • 1


#7 Настя

Настя
    Topic Starter
  • Пользователь
  • 34 сообщений
  • Репутация: 0

Отправлено 31 Май 2012 - 13:40

Вот! Теперь у меня все работает! Получилось, но только все работает и без
<div class="carousel_block">
<a href="#" class="arrow left-arrow" id="prev"><img alt="&#8249;" src="images/prev.gif" /></a>
<div class="galery">
<ul id="images">
<li><img src="images/image_261x179.gif"></li>
<li><img src="images/image_261x179_2.gif"></li>
<li><img src="images/image_261x179_3.gif"></li>
<li><img src="images/image_261x179_4.gif"></li>
<li><img src="images/image_261x179.gif"></li>
<li><img src="images/image_261x179_6.gif"></li>
<li><img src="images/image_261x179_1.gif"></li>
<li><img src="images/image_261x179.gif"></li>
<li><img src="images/image_261x179_3.gif"></li>
<li><img src="images/image_261x179.gif"></li>
</ul>
</div>
<a href="#" class="arrow right-arrow" id="next"><img alt="&#8250;" src="images/next.gif" /></a>
</div>

Я так и не нашла куда это вставить, но я так понимаю, что этот код сам образовался после вставки галлереи на страницу, или нет?
  • 0

#8 Symphony

Symphony
  • Пользователь
  • 636 сообщений
  • Репутация: 54

Отправлено 31 Май 2012 - 14:03

этим куском кода нужно заменить похожий после "<h2>Photos Gallery</h2>" в файле "about-us.html"

Лучше, скинь мне, свой уже отредактированный "about-us.html", я сам вставлю куда надо.
  • 0


#9 Настя

Настя
    Topic Starter
  • Пользователь
  • 34 сообщений
  • Репутация: 0

Отправлено 31 Май 2012 - 14:10

Заменила, но вроде не чего не изменилось, или я ошибаюсь?
  • 0

#10 Symphony

Symphony
  • Пользователь
  • 636 сообщений
  • Репутация: 54

Отправлено 31 Май 2012 - 14:15

мне скинь
  • 0


robot

robot
  • Пользователь PRO
  • 2 652 сообщений
  • Репутация: 85


Оформление форума – IPBSkins.ru