Помогите разобраться

Слайдер на jQuery карусель, плагин «carouFredSel»

 
Посетитель
small user social cms
Медаль
Сообщений: 113
есть набор картинок
необходимо сделать слайдер
У самого руки кривые - слайдер ни как не получается
http://followdesign.com/development/2011/11/19/jquery-karuseli-rotatory-i-skrollery-chast-1.html - ссылка на статью

JavaScript
Код PHP:
  1. $("#foo2").carouFredSel({
  2. circular: false,
  3. infinite: false,
  4. auto : false,
  5. prev : {
  6. button : "#foo2_prev",
  7. key : "left"
  8. },
  9. next : {
  10. button : "#foo2_next",
  11. key : "right"
  12. },
  13. pagination : "#foo2_pag"
  14. });
  15.  
HTML
Код PHP:
  1. <div class="image_carousel">
  2. <div id="foo2">
  3. <img src="/examples/images/small/basketball.jpg" alt="basketball" width="140" height="140" />
  4. <img src="/examples/images/small/beachtree.jpg" alt="beachtree" width="140" height="140" />
  5. <img src="/examples/images/small/cupcackes.jpg" alt="cupcackes" width="140" height="140" />
  6. <img src="/examples/images/small/hangmat.jpg" alt="hangmat" width="140" height="140" />
  7. <img src="/examples/images/small/new_york.jpg" alt="new york" width="140" height="140" />
  8. <img src="/examples/images/small/laundry.jpg" alt="laundry" width="140" height="140" />
  9. <img src="/examples/images/small/mom_son.jpg" alt="mom son" width="140" height="140" />
  10. <img src="/examples/images/small/picknick.jpg" alt="picknick" width="140" height="140" />
  11. <img src="/examples/images/small/shoes.jpg" alt="shoes" width="140" height="140" />
  12. <img src="/examples/images/small/paris.jpg" alt="paris" width="140" height="140" />
  13. <img src="/examples/images/small/sunbading.jpg" alt="sunbading" width="140" height="140" />
  14. <img src="/examples/images/small/yellow_couple.jpg" alt="yellow couple" width="140" height="140" />
  15. </div>
  16. <div class="clearfix"></div>
  17. <a class="prev" id="foo2_prev" href="#"><span>prev</span></a>
  18. <a class="next" id="foo2_next" href="#"><span>next</span></a>
  19. <div class="pagination" id="foo2_pag"></div>
  20. </div>
  21.  
CSS
Код PHP:
  1. .image_carousel {
  2. padding: 15px 0 15px 40px;
  3. position: relative;
  4. }
  5. .image_carousel img {
  6. border: 1px solid #ccc;
  7. background-color: white;
  8. padding: 9px;
  9. margin: 7px;
  10. display: block;
  11. float: left;
  12. }
  13. a.prev, a.next {
  14. background: url(../images/miscellaneous_sprite.png) no-repeat transparent;
  15. width: 45px;
  16. height: 50px;
  17. display: block;
  18. position: absolute;
  19. top: 85px;
  20. }
  21. a.prev { left: -22px;
  22. background-position: 0 0; }
  23. a.prev:hover { background-position: 0 -50px; }
  24. a.prev.disabled { background-position: 0 -100px !important; }
  25. a.next { right: -22px;
  26. background-position: -50px 0; }
  27. a.next:hover { background-position: -50px -50px; }
  28. a.next.disabled { background-position: -50px -100px !important; }
  29. a.prev.disabled, a.next.disabled {
  30. cursor: default;
  31. }
  32.  
  33. a.prev span, a.next span {
  34. display: none;
  35. }
  36. .pagination {
  37. text-align: center;
  38. }
  39. .pagination a {
  40. background: url(../images/miscellaneous_sprite.png) 0 -300px no-repeat transparent;
  41. width: 15px;
  42. height: 15px;
  43. margin: 0 5px 0 0;
  44. display: inline-block;
  45. }
  46. .pagination a.selected {
  47. background-position: -25px -300px;
  48. cursor: default;
  49. }
  50. .pagination a span {
  51. display: none;
  52. }
  53. .clearfix {
  54. float: none;
  55. clear: both;
  56. }
  57.  


Помогите пожалуйста, только подробней что и куда.

Заранее спасибо
Посетитель
small user social cms
МедальПочетный донор проектаКубок зрительских симпатий
Сообщений: 513
Да поищите по сайту. По моему очень много готовых решений.
Реклама
cms
Посетитель
small user social cms
Медаль
Сообщений: 113
Так, сделаем проще
Есть код HTML
Код PHP:
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
  2.  
  3. "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
  4. <html xmlns="http://www.w3.org/1999/xhtml">
  5. <head>
  6. <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
  7. <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
  8. <link rel="stylesheet" type="text/css" href="index.css" />
  9. <title>Click Carousel</title>
  10. <script type="text/javascript" src="click-carousel.js"></script>
  11. <script type="text/javascript">
  12. $(function(){
  13. $("#container").clickCarousel({margin: 10});
  14. });
  15. </script>
  16. </head>
  17. <body>
  18.  
  19. <div id="wrapper">
  20. <div id="container">
  21. <img src="img1.jpg" alt="Cuba" />
  22. <img src="img2.jpg" alt="Cuba" />
  23. <img src="img3.jpg" alt="Cuba" />
  24. <img src="img4.jpg" alt="Cuba" />
  25. <img src="img5.jpg" alt="Cuba" />
  26. </div><!-- container -->
  27. <img id="carouselLeft" src="leftArr.jpg" alt="Left Arrow" />
  28. <img id="carouselRight" src="rightArr.jpg" alt="Right Arrow" />
  29. </div><!-- wrapper -->
  30.  
  31. </body>
  32. </html>
Есть модуль вывода картинок

Что где прописывать?
что вписать в tpl модуля, что в template.php
может еще куда что прописать нужно

Сам архив слайдера - http://www.onextrapixel.com/examples/jquery-click-carousel-plugin/clickCarousel.zip


Знающие люди подскажите пожалуйста. У меня выводит набор картинок и кнопки пролистывания за ними и все.
Посетитель
small user social cms
Медаль
Сообщений: 113
Dost:

Да поищите по сайту. По моему очень много готовых решений.

у меня есть модуль который выводит из заказного компонента фотки, вот их и нужно вставить в слайдер
Посетитель
small user social cms
МедальКубок зрительских симпатий
Сообщений: 754
Есть офсайт плагина CarouFredSel
с исходниками , документацией и примерами.
Посетитель
small user social cms
Медаль
Сообщений: 113
oll:

Есть офсайт плагина CarouFredSel
с исходниками , документацией и примерами.

Именно от туда и все делаю, но не хочет работать и все
Посетитель
small user social cms
Медаль
Сообщений: 113
Упростим момент еще
Кто готов за небольшую денежку помочь?
Посетитель
small user social cms
МедальКубок зрительских симпатий
Сообщений: 754
У меня выводит набор картинок и кнопки пролистывания за ними и все.
Значит неработает JS script.Подключи шаблоне add file jscript , а исполняемые функции оберни в literal.На примере других слайдеров легко понять что делать.
Посетитель
small user social cms
Медаль
Сообщений: 113
Ни фига у меня не выходит, работать не хочет и все!
Посетитель
small user social cms
МедальКубок зрительских симпатий
Сообщений: 244
Показывайте сайт, - помогу
Разработка сайтов под ключ. Разработка дополнений. | skype: maga-ingdesign | email: [email protected] | Отзывы | Мой хостинг-провайдер | Магомед
Посетитель
small user social cms
Медаль
Сообщений: 113
IngDesign:

Показывайте сайт, - помогу

serialcenter.ru
новое видео
Посетитель
small user social cms
Медаль
Сообщений: 266
Вам нужно подключить нормально файлы JS и CSS слайдера, я вам написал в чем была проблема, только после этого можно двигаться дальше если не заработает
http://watson-studio.com
Посетитель
small user social cms
Медаль
Сообщений: 113
все файлы которые подключал были доступны, что там и как я делаю не правильно, не понимаю. Не дано просто...Или завтра с нормальной, свежей головой буду ковыряться
Модератор
small user social cms
МедальКубок зрительских симпатий
Сообщений: 251
skotskiy:

все файлы которые подключал были доступны, что там и как я делаю не правильно, не понимаю. Не дано просто...Или завтра с нормальной, свежей головой буду ковыряться

у вас нет вот этого файла - /templates/octopus/js/click-carousel.jsclick-carousel.js. http://www.serialcenter.ru/templates/octopus/js/click-carousel.jsclick-carousel.js выдает 404. либо закинули не туда, либо назвали неправильно.
лучший сервер для Вашего сайта
Посетитель
small user social cms
Медаль
Сообщений: 113
это просто опечатка при последнем изменении, правил столько раз, что уже сам забыл где что правил.

Короче сделать сам не могу, хоть убейте. Кто готов помочь за "100 руб на телефон", дам доступ к сайту.
В начало страницы
Предыдущая темаСледующая тема Перейти на форум:
Быстрый ответ
Чтобы писать на форуме, зарегистрируйтесь или авторизуйтесь.