Помощник
|
Галерея в шапку сайта |
Jazzzz
|
Сообщение
#1
|
||
|
|
||
|
|||
Tigor.v |
10.3.2011, 14:55;
Ответить: Tigor.v
Сообщение
#2
|
|
Можешь использовать. Легко разобраться и отредактировать любые параметры
Автопрокрутка есть, есть переключение фото, можно убрать.. в общем все что хочешь. |
|
|
Jazzzz
|
Сообщение
#3
|
|
Большое спасибо. Но нельзя ли все это с html страничкой в тандеме? Боюсь, что могу некорректно прикрутить все это к существующей странице.
|
|
|
Tigor.v |
10.3.2011, 15:54;
Ответить: Tigor.v
Сообщение
#4
|
|
<link href="style.css" rel="stylesheet" type="text/css" /> <link href="js/twirlie.css" rel="stylesheet" type="text/css" /> <script src="js/jquery-1.3.2.min.js" type="text/javascript"></script> <script src="js/jquery.twirlie-1.1.js" type="text/javascript"></script> <script type="text/javascript"> // The code you need to run Twirlie $(document).ready(function() { $('#slider').twirlie({ transtime: 700 }); }); </script> <div id="slider"> <ul> <li><img src="images/pictures/powerful.png" /></li> <li><img src="images/pictures/mini-tree.png" /></li> <li><img src="images/pictures/girl.png" /></li> </ul> </div> <a class="prev" href="#"></a> <a class="next" href="#"></a> Тут по сути прикручивать нечего) css и js ставиш между тегами <head></head> все остальное в <body> </body> размер задаешь в twirlie.css (стоит 500х200) картинки должны соответствоать этому размеру Вот тебе пример работающий |
|
|
Jazzzz
|
Сообщение
#5
|
|
Спасибо. Но опять же.... картинки я успешно выдрал из примера. Чтоб посмотреть, как работает локально. Но ведь я так понимаю нужны еще и стрелочки направо/налево? И еще: мне ведь помимо прочего нужна кликабельность на каждую картинку... И было бы здорово, если вместо одной широкоформатной картинки были штук 5 меньшего размера. В такой-же ленте. И было бы вообще здорово, если бы эта лента ползла сама, без нажатия на стрелки. Стрелки вообще не обязательны. А по наведению на ленту - она прекращает ползти. и кликабельны картинки, которые видимы в данный момент. Такое у кого-нибудь есть? Заранее спасибо
|
|
|
Tigor.v |
11.3.2011, 12:14;
Ответить: Tigor.v
Сообщение
#6
|
|
|
|
|
Tigor.v |
11.3.2011, 12:39;
Ответить: Tigor.v
Сообщение
#7
|
|
Вот твой html, скрипты в архиве [attachment=37577:carouFredSel.rar]
<script type="text/javascript" language="javascript" src="jquery.js"></script> <script type="text/javascript" language="javascript" src="jquery.carouFredSel-3.0.2-packed.js"></script> <script type="text/javascript" language="javascript"> $(function() { $('ul#basic_config').carouFredSel(); $('ul#user_interaction').carouFredSel({ items: { visible : 'variable' }, auto: false, prev: "#prev1", next: "#next1" }); }); </script> <style type="text/css" media="all"> html, body { padding: 0; margin: 0; height: 100%; } body, div, p { font-family: Arial, Helvetica, Verdana; color: white; } h1 { font-size: 60px; } a, a:link, a:active, a:visited { color: white; text-decoration: underline; } a:hover { color: #999; } #wrapper { background-color: black; width: 600px; margin: auto; min-height: 100%; } #content { padding: 50px; } .list_carousel { margin: 0 0 30px 60px; width: 360px; } .list_carousel ul { background-color: #333; margin: 0; padding: 0; list-style: none; display: block; } .list_carousel li { font-size: 40px; color: #666; text-align: center; background-color: #f0f0f0; border: 5px solid #999; width: 50px; height: 50px; padding: 0; margin: 6px; display: block; float: left; } .clearfix { float: none; clear: both; } </style> <div id="wrapper"> <div id="content"> <div class="list_carousel"> <ul id="basic_config"> <li>c</li> <li>a</li> <li>r</li> <li>o</li> <li>u</li> <li>F</li> <li>r</li> <li>e</li> <li>d</li> <li>S</li> <li>e</li> <li>l</li> <li> </li> </ul> </div> </div> </div> Только не останавливается при наведении, нужно функцию добавить в скрипт |
|
|
Jazzzz
|
Сообщение
#8
|
|
Спасибо еще раз. В принципе, такая карусель подойдет, но... разительно отличаются данный пример с примером на странице http://caroufredsel.frebsite.nl/#footer (тот, который "default configuration"), верхний из двух. И код под спойлерами там другой. Как добиться идентичности с примером на сайте?
|
|
|
Jazzzz
|
Сообщение
#9
|
|
Не мужики, не катит carouFredSel... Объясню почему. В примере на сайте все картинки одинаковой ширины и высоты. Поэтому все четко. А у меня все картинки разной ширины (уж высоты-то их я подогнал, но от пропорций не убежишь...). Я разобрался, как сделать так, чтобы нормально отображались разной ширины картинки. Но при попадании в фокус картинок, превышающих определенный размер, карусель естественно удлиняется в правую сторону. А это некрасиво. Я попытался даже подобрать сумму ширин картинок первой пятерки к сумме ширин второй пятерки, но нихрена не получается. Он же заполняет карусель картинками по списку. И выходит, что карусель постоянно но сужается, то расширяется для вмещения картинок целиком.... Что делать, мужики? Посоветуйте еще какой-нибудь скрипт?
|
|
|
Jazzzz
|
Сообщение
#10
|
|
Кажись понял, что нифига не получится. Либо я их (изображения) заквадрачиваю, либо использую другую галерею, в которой выводится по одному изображению. Картинки заквадратил. Теперь вопрос по галерее carouFredSel: Где в коде увеличить задержку между сменой слайдов, и выставить количество показываемых слайдов (они в ленте по пять штук, а мне нужно три)? Предполагаю, что это где-то в js файлах. Заранее спасибо.
|
|
|
|
Похожие темы
Тема | Ответов | Автор | Просмотров | Последний ответ | |
---|---|---|---|---|---|
Какой % отказов нормален для сайта? | 14 | Aloof | 3384 | 23.4.2024, 13:50 автор: Vmir |
|
Быстрая индексация страниц сайта и обратных ссылок - 2Index | 39 | 2Index | 6740 | 22.4.2024, 16:16 автор: 2Index |
|
SiteAnalyzer - бесплатная программа для аудита и анализа сайта | 77 | Chaser | 74282 | 9.4.2024, 11:36 автор: Chaser |
|
Нужен кодер, чтобы пофиксить ошибку Wordpress после переноса сайта | 0 | Alex-777 | 952 | 7.4.2024, 18:05 автор: Alex-777 |
|
Продвижение молодого сайта | 30 | maxmer | 6601 | 26.3.2024, 21:49 автор: c4p1t4l15t |
Текстовая версия | Сейчас: 25.4.2024, 10:28 |