Найти на сайте

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

+21
2.15K
  2. Блоги
  3. Красивое слайд-шоу на главной странице(в модуле "Добро пожаловать")
А я продолжаю свои эксперименты с 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>
из кода, слайдер перестает работать...

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

Еще от автора

Красивая, анимированная страница с 404й ошибкой

Красивая, анимированная страница с 404й ошибкой

И опять продолжение моих экспериментов с jQuery. На этот раз я добрался до ошибки 404.
3
Делаем автоматическую смену фона сайта без перезагрузки

Делаем автоматическую смену фона сайта без перезагрузки

Это мой первый пост, так что прошу сильно не пинать. Расскажу я о том, как сделать автоматическую смену фона сайта, БЕЗ перезагрузки страницы.
25

InstantCMS Team

Связь с нами
Email dev@instantcms.ru

Делаем полезные Интернет проекты с 2008 года 💫

О проекте

Поддержка

Дополнения

Используя этот сайт, вы соглашаетесь с тем, что мы используем файлы cookie.