Красивое слайд-шоу на главной странице(в модуле "Добро пожаловать")

+21
1.86K
А я продолжаю свои эксперименты с JQuery, на этот раз добрался до модуля "Добро пожаловать". Он скучный. И я решил сделать там слайд-шоу(не автоматическое).
Иллюстрация

Делается это легко.
Файлы из архива заливаем в Ваш шаблон.
В папку news кидаем фотки с названием 1.jpg, 2.jpg, 3.jpg, 4.jpg, 5.jpg.
Они и будут показываться.
Далее, открываем редактирование модуля "Добро пожаловать", нажимаем "Источник", и вводим следующий код:
  1. <head>
  2. <link rel="stylesheet" media="screen" type="text/css" href="/templates/_default_/css/spacegallery.css" />
  3. <link rel="stylesheet" media="screen" type="text/css" href="/templates/_default_/css/custom.css" />
  4. <script type="text/javascript" src="/templates/_default_/js/jquery.js"></script>
  5. <script type="text/javascript" src="/templates/_default_/js/eye.js"></script>
  6. <script type="text/javascript" src="/templates/_default_/js/spacegallery.js""></script>
  7. <script type="text/javascript" src="/templates/_default_/js/layout.js"></script>
  8. </head>
  9. <body>
  10. <div class="wrapper">
  11. <ul class="navigationTabs">
  12. <a></a><ul></ul>
  13.  
  14. <div id="myGallery" class="spacegallery">
  15. <img src="/templates/_default_/images/news/5.jpg" alt="" />
  16. <img src="/templates/_default_/images/news/4.jpg" alt="" />
  17. <img src="/templates/_default_/images/news/3.jpg" alt="" />
  18. <img src="/templates/_default_/images/news/2.jpg" alt="" />
  19. <img src="/templates/_default_/images/news/1.jpg" alt="" />
  20. </div>
  21. </div>
  22. <div class="tab">
  23. </body>
Меняем _default_ на название Вашего шаблона.
Далее в вашем style.css, находим:
  1. #topmenu ul li ul li ul {
  2. display:none;
  3. position: relative;
  4. margin-top:-155px;
  5. left:200px;
  6. width: 200px;
  7. background: #E9E9E9;
  8. color: #000;
  9. padding:0px;
  10. z-index:1000;
  11. box-shadow:1px 1px 3px #000;
  12. -moz-box-shadow:1px 1px 3px #000;
И меняем значение z-index, на 9999. Должно получится вот так:
  1. #topmenu ul li ul li ul {
  2. display:none;
  3. position: relative;
  4. margin-top:-155px;
  5. left:200px;
  6. width: 200px;
  7. background: #E9E9E9;
  8. color: #000;
  9. padding:0px;
  10. z-index:9999;
  11. box-shadow:1px 1px 3px #000;
  12. -moz-box-shadow:1px 1px 3px #000;
И вуаля!
Советы и примечания:
1. Файлы показываются в обратном порядке(начиная с последнего, и по убыванию).
2. Если Ваши фотографии меньше 500px высотой, то измените значение
  1. height: 500px;
В custom.css
3. Автор кода не я, я его немного поменял. Но вот чего я не понял, так это почему после удаления
  1. <a></a><ul></ul>
из кода, слайдер перестает работать...

Демо-сайт
0
santi santi 10 лет назад #
очень эффектно листаются, красиво получилось...
+1
santi santi 10 лет назад #
замеченный косяк.
выпадающее меню открывается, но когда проводишь мышкой по нему, оно исчезает (выпадающее меню)...
0
iron_cam iron_cam 10 лет назад #
Такс...
Убрал пока ссылку на демо-сайт, а на саом сайте всё вернул.
Щас буду думать...
0
iron_cam iron_cam 10 лет назад #
Проблема решена.
Надо было с css сайта, поменять значение z-index менюшки, на 9999.
0
PrazdNik PrazdNik 10 лет назад #
может я чего не понял, но у меня не листается...просто картинка статичная висит
0
iron_cam iron_cam 10 лет назад #
На демо-сайте она и есть статичная.
Решаю проблему с выпадающим меню.
0
iron_cam iron_cam 10 лет назад #
http://co167.ru/slaid-demo.html
Вот, тут пример.
Но выпадающее меню не пашет...
0
NickSolver NickSolver 10 лет назад #
<script type="text/javascript" src="/includes/jquery/jquery.js"></script> - удалите и запащет
0
iron_cam iron_cam 10 лет назад #
Не помогло.
0
iron_cam iron_cam 10 лет назад #
Голова уже совсем не варит.
Буду думать завтра.
Если есть предложения, пишите!
0
santi santi 10 лет назад #
так а если его (слайдер) поместить в div и на самый нижний уровень ввынести (пускай -100), а слайдер в div поместить на самый наивысший (+1000), мош получится... или это я усмничал? :))
0
santi santi 10 лет назад #
не так панисал...
а меню на наивысший (+1000)
просто я смотрю что в css слайдера стоит z-index: 1000;, мош он поэтому и ползет поверх всех.
0
iron_cam iron_cam 10 лет назад #
Не понял...
Как это в коде должно выглядеть?
0
lezginka.ru lezginka.ru 10 лет назад #
+
а эффекты менять нельзя?
0
NickSolver NickSolver 10 лет назад #
попробуйте не подключать jquery без архива, сам не проверял, мне данный хак не нужен, но ду маю поможет
+3
imprint imprint 10 лет назад #
нужно такую штуку к галереи подключить...
+1
GarikKR GarikKR 10 лет назад #
нужно такую штуку к галереи подключить...Может кто знает как?Может поделится
0
BlondinkO BlondinkO 9 лет назад #
Спасибо, именно то, что было нужно =)

Еще от автора

Красивая, анимированная страница с 404й ошибкой
И опять продолжение моих экспериментов с jQuery. На этот раз я добрался до ошибки 404.
Делаем автоматическую смену фона сайта без перезагрузки
Это мой первый пост, так что прошу сильно не пинать. Расскажу я о том, как сделать автоматическую смену фона сайта, БЕЗ перезагрузки страницы.
Используя этот сайт, вы соглашаетесь с тем, что мы используем файлы cookie.