Deutsch
Germany.ru → Форумы → Архив Досок→ Вебдизайн и хостинг

Код слайдера

260  
JunonaLu коренной житель17.09.13 22:34
JunonaLu
NEW 17.09.13 22:34 
Последний раз изменено 17.09.13 23:31 (JunonaLu)
(книксен, глазки потупила..)
...нравится... очень...
Может кто-нить подсказать код такого слайдера?
http://focusthemes.com/

т.е. я его вроде как выделила, но он не работает...
(разбила по-быстрому)
пс
чо за хрень.. выдает в цитате не то, что вставляла , поэтому без тегов цитата -
ппс
Всё убрала, потому что всё равно некорректно выдает.
В общем - от самого верха до "конец слайдера"
</div>"
http://pbs.twimg.com/media/B6OS_KhIYAItWB9.jpg:large
#1 
JunonaLu коренной житель17.09.13 23:42
JunonaLu
NEW 17.09.13 23:42 
в ответ JunonaLu 17.09.13 22:34
Пробую ещё раз -
В ответ на:

<div class="container">
<div class="row no_bm">
<div id="slider_holder" class="sixteen columns">
<div class="region region-slider">
<div id="block-layer-slider-1" class="block block-layer-slider">
<div class="content">
<div style="height: 400px;" class="ls-wp-fullwidth-container">
<div style="height: 400px; width: 1583px; left: -281.5px;" class="ls-wp-fullwidth-helper">
<div style="" class="ls-shadow">
<div class="ls-container ls-aqua" id="layerslider_1" style="width: 1583px; height: 400px; margin: 0px auto; visibility: visible;">
<div style="background-color: rgb(23, 69, 90); width: 1583px; height: 400px;" class="ls-inner">
<div style="background-color: rgb(23, 69, 90); width: 1583px; height: 400px;" class="ls-inner">
<div class="ls-layer ls-active" style="width: 1583px; height: 400px; visibility: visible; display: none; left: auto; right: 0px; top: 0px; bottom: auto;">
<img class="ls-s2" src="/sites/default/files/althaina-opencart-theme.png" style="position: absolute; top: 41px; left: 704.5px; width: 590px; height: 320px; padding: 0px; border-width: 0px; margin-left: 0px; margin-top: 0px; display: block;">
<h2 class="ls-s2" style="position: absolute; top: 37px; left: 321.5px; font-size: 29px; white-space: nowrap; width: auto; height: auto; line-height: 45px; padding: 0px 7px; border-width: 0px; margin-left: 0px; margin-top: 0px; display: block;"> Althaina Opencart Theme </h2>
<h5 class="ls-s2" style="position: absolute; top: 99px; left: 321.5px; white-space: nowrap; width: auto; height: auto; font-size: 26px; line-height: 26px; padding: 4px 6px; border-width: 0px; margin-left: 0px; margin-top: 0px; display: block;"> Free & Premium </h5>
<p class="ls-s2" style="position: absolute; top: 149px; left: 321.5px; color: rgb(255, 255, 255); text-shadow: 0px 1px 0px rgba(31, 31, 31, 0.5); white-space: nowrap; width: 80px; height: auto; font-size: 17px; line-height: 27px; padding: 0px; border-width: 0px; margin-left: 0px; margin-top: 0px; display: block;"> Althaina Theme with stylish modern design and it's
created with using the latest HTML5 and CSS3
features. It's extremely customizable, easy to
use and fully responsive.
OpenCart Compatibility: 1.5.3, 1.5.4, 1.5.5, 1.5.6 </p>
<div class="ls-s2" style="position: absolute; top: 295px; left: 327.5px; white-space: nowrap; width: auto; height: auto; font-size: 13px; line-height: 21px; padding: 0px; border-width: 0px; margin-left: 0px; margin-top: 0px; display: block;">
<a href="http://focusthemes.com/althaina/" class="button button_hilite" target="_blank">Demo</a>
<a href="http://focusthemes.com/member/signup/index" class="button button_pale" target="_blank">Download</a> </div></div>
<div class="ls-layer" style="width: 0px; height: 400px; left: 0px; right: auto; top: 0px; bottom: auto; visibility: visible; display: none;">
<img class="ls-s2" src="/sites/default/files/Eventino-opencart-theme.png" style="position: absolute; top: 48px; left: 722.5px; margin-left: 0px; margin-top: -360px; width: 590px; height: 320px; padding: 0px; border-width: 0px; display: block;">
<h2 class="ls-s2" style="position: absolute; top: 39px; left: 320.5px; font-size: 29px; white-space: nowrap; margin-left: -1424.7px; margin-top: 0px; width: auto; height: auto; line-height: 45px; padding: 0px 7px; border-width: 0px; display: block;"> Eventino Opencart Theme </h2>
<h5 class="ls-s2" style="position: absolute; top: 99px; left: 321.5px; white-space: nowrap; margin-left: -1424.7px; margin-top: 0px; width: auto; height: auto; font-size: 26px; line-height: 26px; padding: 4px 6px; border-width: 0px; display: block;"> Fully Customizable </h5>
<p class="ls-s2" style="position: absolute; top: 149px; left: 321.5px; color: rgb(255, 255, 255); white-space: nowrap; margin-left: -1424.7px; margin-top: 0px; width: 80px; height: auto; font-size: 17px; line-height: 27px; padding: 0px; border-width: 0px; display: block;"> The admin panel is intended to allow you to easily
manage colors of theme elements,select 600+
amazing fonts, apply unlimited patterns or backgrounds

and setup hundreds of theme...
OpenCart Compatibility: 1.5.3, 1.5.4, 1.5.5, 1.5.6 </p><p class="ls-s2" style="position: absolute; top: 296px; left: 323.5px; white-space: nowrap; margin-left: -1424.7px; margin-top: 0px; width: 80px; height: auto; font-size: 17px; line-height: 27px; padding: 0px; border-width: 0px; display: block;">
<a href="http://focusthemes.com/eventino/" class="button button_hilite">Demo</a>
<a href="http://focusthemes.com/member/signup/index" class="button button_pale">Download</a>
</p>
</div>
</div>
</div>
<a style="display: none; opacity: 0;" class="prev" href="#">
<span></span>
</a>
<a style="display: none; opacity: 0;" class="next" href="#">
<span></span>
</a>
<div class="ls-bottom-nav-wrapper">
<a class="ls-nav-start ls-nav-start-active" href="#"></a>
<a class="ls-nav-start ls-nav-start-active" href="#"></a>
<span class="ls-bottom-slidebuttons">
<a class="ls-nav-active" href="#"></a>
<a class="" href="#"></a>
<div style="width: 100px; height: 60px;" class="ls-thumbnail-hover">
<div style="visibility: hidden; display: block;" class="ls-thumbnail-hover-inner">
<div class="ls-thumbnail-hover-bg"></div>
<div style="width: 100px; height: 60px;" class="ls-thumbnail-hover-img">
<img style="height: 60px;"></div>
<span></span>
</div>
</div>
<a href="#"></a>
<a href="#"></a>
<div style="width: 100px; height: 60px;" class="ls-thumbnail-hover">
<div style="visibility: hidden; display: block;" class="ls-thumbnail-hover-inner">
<div class="ls-thumbnail-hover-bg"></div>
<div style="width: 100px; height: 60px;" class="ls-thumbnail-hover-img">
<img style="height: 60px;"></div>
<span></span>
</div>
</div>
<div style="width: 100px; height: 60px;" class="ls-thumbnail-hover">
<div style="visibility: hidden; display: block;" class="ls-thumbnail-hover-inner">
<div class="ls-thumbnail-hover-bg"></div>
<div style="width: 100px; height: 60px;" class="ls-thumbnail-hover-img">
<img style="height: 60px;"></div>
<span></span>
</div>
</div>
<div style="width: 100px; height: 60px;" class="ls-thumbnail-hover">
<div style="visibility: hidden; display: block;" class="ls-thumbnail-hover-inner">
<div class="ls-thumbnail-hover-bg"></div>
<div style="width: 100px; height: 60px;" class="ls-thumbnail-hover-img"><img style="height: 60px;"></div>
<span></span>
</div>
</div>
</span>
<a class="ls-nav-stop" href="#"></a>
<span class="ls-bottom-slidebuttons">
<a href="#"></a>
<a href="#"></a>
<div style="width: 100px; height: 60px;" class="ls-thumbnail-hover">
<div style="visibility: hidden; display: block;" class="ls-thumbnail-hover-inner">
<div class="ls-thumbnail-hover-bg"></div>
<div style="width: 100px; height: 60px;" class="ls-thumbnail-hover-img"><img style="height: 60px;"></div>
<span></span>
</div>
</div>
<div style="width: 100px; height: 60px;" class="ls-thumbnail-hover"><div style="visibility: hidden; display: block;" class="ls-thumbnail-hover-inner">
<div class="ls-thumbnail-hover-bg"></div>
<div style="width: 100px; height: 60px;" class="ls-thumbnail-hover-img"><img style="height: 60px;"></div>
<span></span>
</div>
</div>
<div style="width: 100px; height: 60px;" class="ls-thumbnail-hover">
<div style="visibility: hidden; display: block;" class="ls-thumbnail-hover-inner">
<div class="ls-thumbnail-hover-bg"></div>
<div style="width: 100px; height: 60px;" class="ls-thumbnail-hover-img"><img style="height: 60px;"></div>
<span></span>
</div>
</div>
</span>
<a class="ls-nav-stop" href="#"></a>
</div>
<a style="display: none; opacity: 0;" class="prev" href="#"><span></span></a>
<a style="display: none; opacity: 0;" class="next" href="#"><span></span></a>
<div class="ls-bottom-nav-wrapper">
<a class="ls-nav-start ls-nav-start-active" href="#"></a>
<span class="ls-bottom-slidebuttons"><a href="#">
</a>
<a href="#"></a>
<div style="width: 100px; height: 60px;" class="ls-thumbnail-hover">
<div style="visibility: hidden; display: block;" class="ls-thumbnail-hover-inner">
<div class="ls-thumbnail-hover-bg"></div>
<div style="width: 100px; height: 60px;" class="ls-thumbnail-hover-img">
<img style="height: 60px;">
</div>
<span></span>
</div></div>
<div style="width: 100px; height: 60px;" class="ls-thumbnail-hover">
<div style="visibility: hidden; display: block;" class="ls-thumbnail-hover-inner">
<div class="ls-thumbnail-hover-bg"></div>
<div style="width: 100px; height: 60px;" class="ls-thumbnail-hover-img"><img style="height: 60px;"></div>
<span></span>
</div>
</div>
<div style="width: 100px; height: 60px;" class="ls-thumbnail-hover">
<div style="visibility: hidden; display: block;" class="ls-thumbnail-hover-inner">
<div class="ls-thumbnail-hover-bg"></div>
<div style="width: 100px; height: 60px;" class="ls-thumbnail-hover-img"><img style="height: 60px;"></div>
<span></span>
</div>
</div>
</span>
<a class="ls-nav-stop" href="#"></a>
</div>
<div style="height: 0px;" class="ls-shadow"></div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div></div>
здесь Sequence Slider::END
</div>

"Нашей прелести"посвящается - Я спляшу на ТВОЕЙ могиле. Я даже знаю,почему ты всё ещё "здесь"-чтоб насобирать ещё больше плевков себе вслед
http://pbs.twimg.com/media/B6OS_KhIYAItWB9.jpg:large
#2 
Lomonosoff постоялец18.09.13 08:50
Lomonosoff
18.09.13 08:50 
в ответ JunonaLu 17.09.13 22:34, Последний раз изменено 18.09.13 08:58 (Lomonosoff)
Это только HTML, а где Java-скрипт, который все это двигает ? Ты его тоже "стырила" ? Без Java-скрипт это все просто "лежачий камень"
Если ничто другое не помогает, прочтите, наконец, инструкцию! /Аксиома Кана и Орбена/
#3 
JunonaLu коренной житель18.09.13 11:49
JunonaLu
NEW 18.09.13 11:49 
в ответ Lomonosoff 18.09.13 08:50, Последний раз изменено 18.09.13 12:04 (JunonaLu)
У мнУ с явой совсем плохо..
Он ? -
http://pbs.twimg.com/media/B6OS_KhIYAItWB9.jpg:large
#4 
  Posmotrim постоялец18.09.13 17:06
Posmotrim
NEW 18.09.13 17:06 
в ответ JunonaLu 18.09.13 11:49
если не ошибаюсь, это LayerSlider jQuery плагин. стоит 10€.
#5 
JunonaLu коренной житель18.09.13 21:35
JunonaLu
NEW 18.09.13 21:35 
в ответ Posmotrim 18.09.13 17:06
Да я знаю, это и по тексту видно, что оттуда.
Но вот у меня бзик - у меня куча прибамбасов, на которых я могу и слайды и ролики делать. Но Я ХОЧУ ПОНЯТЬ КОД.
http://pbs.twimg.com/media/B6OS_KhIYAItWB9.jpg:large
#6 
  Posmotrim постоялец18.09.13 21:52
Posmotrim
NEW 18.09.13 21:52 
в ответ JunonaLu 18.09.13 21:35
Что-бы понять:
- изучай js
- потом jquery и азы создания плагинов.
- качай плагин и разбирайся.
#7 
JunonaLu коренной житель18.09.13 21:56
JunonaLu
NEW 18.09.13 21:56 
в ответ Posmotrim 18.09.13 21:52
В ответ на:
качай плагин и разбирайся.

Охххх..., посоветуйте хоть самоучитель на данную тему достойный, а то ежели я начну всё подряд читать, у меня каша в голове образуется.
http://pbs.twimg.com/media/B6OS_KhIYAItWB9.jpg:large
#8 
CoDSP посетитель18.09.13 22:48
CoDSP
NEW 18.09.13 22:48 
в ответ JunonaLu 18.09.13 21:56
попробуйте уроки от специалиста, также есть http://net.tutsplus.com/ ну и
http://www.amazon.de/Java-umfassende-Referenzwerk-David-Flanagan/dp/3868991352/ref=sr_1_1?ie=UTF8&qid=1379537276&sr=8-1&keywords=java+referenz
#9 
  Posmotrim постоялец18.09.13 22:53
Posmotrim
NEW 18.09.13 22:53 
в ответ JunonaLu 18.09.13 21:56
если нормально с англ., то я бы посоветовал для старта уроки на Codecademy. У них было несколько бесплатных по JS и JQuery.
#10 
compman местный житель19.09.13 10:10
compman
NEW 19.09.13 10:10 
в ответ JunonaLu 18.09.13 21:35
В ответ на:
Но Я ХОЧУ ПОНЯТЬ КОД.

Если для вас яваскрипт совсем новая тема, то работу такого слайдера вы сходу не поймёте. Если всётаки хотите попробовать, устанавливайте Firebug и штудируйте работу плагина.
#11