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

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


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

Демо-сайт
Делаем автоматическую смену фона сайта без перезагрузки | Красивая, анимированная страница с 404й ошибкой
Комментарии (18)
santi 27 октября 2011 в 05:41 0
очень эффектно листаются, красиво получилось...
santi 27 октября 2011 в 05:43 +1
замеченный косяк.
выпадающее меню открывается, но когда проводишь мышкой по нему, оно исчезает (выпадающее меню)...
iron_cam 27 октября 2011 в 05:51 0
Такс...
Убрал пока ссылку на демо-сайт, а на саом сайте всё вернул.
Щас буду думать...
iron_cam 27 октября 2011 в 23:19 0
Проблема решена.
Надо было с css сайта, поменять значение z-index менюшки, на 9999.
PrazdNik 27 октября 2011 в 05:52 0
может я чего не понял, но у меня не листается...просто картинка статичная висит
iron_cam 27 октября 2011 в 05:54 0
На демо-сайте она и есть статичная.
Решаю проблему с выпадающим меню.
iron_cam 27 октября 2011 в 05:57 0
http://co167.ru/slaid-demo.html
Вот, тут пример.
Но выпадающее меню не пашет...
NickSolver 27 октября 2011 в 10:33 0
<script type="text/javascript" src="/includes/jquery/jquery.js"></script> - удалите и запащет
iron_cam 27 октября 2011 в 15:41 0
Не помогло.
iron_cam 27 октября 2011 в 06:16 0
Голова уже совсем не варит.
Буду думать завтра.
Если есть предложения, пишите!
santi 27 октября 2011 в 07:51 0
так а если его (слайдер) поместить в div и на самый нижний уровень ввынести (пускай -100), а слайдер в div поместить на самый наивысший (+1000), мош получится... или это я усмничал? :))
santi 27 октября 2011 в 07:54 0
не так панисал...
а меню на наивысший (+1000)
просто я смотрю что в css слайдера стоит z-index: 1000;, мош он поэтому и ползет поверх всех.
iron_cam 27 октября 2011 в 15:42 0
Не понял...
Как это в коде должно выглядеть?
lezginka.ru 27 октября 2011 в 07:09 0
+
а эффекты менять нельзя?
NickSolver 27 октября 2011 в 07:48 0
попробуйте не подключать jquery без архива, сам не проверял, мне данный хак не нужен, но ду маю поможет
imprint 27 октября 2011 в 18:04 +3
нужно такую штуку к галереи подключить...
GarikKR 9 ноября 2011 в 01:27 +1
нужно такую штуку к галереи подключить...Может кто знает как?Может поделится
BlondinkO 16 августа 2012 в 17:17 0
Спасибо, именно то, что было нужно =)