| Главная » Файлы » Прочие скрипты » jQuery |
3D облако информеров by Apocalypse для uCoz
| 23.06.14, 11:37:04 | |
 Ещё одна моя разработка, которую я всё-таки решил выложить в паблик. Данное 3D облако состоит из 4-информеров, которые открываются модальном окне с затемнением заднего плана: Лучшие пользователи сайта, последние зарегистрированные пользователи, Последние сообщения форума и Самые популярные фотографии. Вы можете подставить свои собственные информеры, количество информеров так же не ограничено. Я покажу вам пример а уж вы сами переделаете под себя Особенности: 1) Облако автоматически вращается при загрузке страницы 2) Вращение управляется курсором мышки 3) В составе 4 уникальных вида информеров 4) Все информеры открываются в модальных окнах с затемнением заднего плана Минусы: 1) Некорректное отображение картинок в браузере IE Установка: В любое место любого глобального блока вставляйте: Код <div id="staticinfolusers" style="display:none;" class="window" align="center"> <table width="700" height="400" cellspacing="0" border="0"> <tr><td> <center> <script type="text/javascript" src="http://www.apocalypse.ucoz.kz/informer/13"></script> </center> </td></tr> </table> </div> <div id="staticinfolphotos" style="display:none;" class="window" align="center"> <table width="700" height="400" cellspacing="0" border="0"> <tr><td> <center> <script type="text/javascript" src="http://www.apocalypse.ucoz.kz/informer/18"></script> </center> </td></tr> </table> </div> <div id="staticinfolforums" style="display:none;" class="window" align="center"> <table width="700" height="400" cellspacing="0" border="0"> <tr><td> <center> <script type="text/javascript" src="http://www.apocalypse.ucoz.kz/informer/17"></script> </center> </td></tr> </table> </div> <div id="staticinfobusers" style="display:none;" class="window" align="center"> <table width="700" height="400" cellspacing="0" border="0"> <tr><td> <center> <script type="text/javascript" src="http://www.apocalypse.ucoz.kz/informer/3"></script> </center> </td></tr> </table> </div> <div id="mask"></div> <script> $(document).ready(function() { $('a[name=modal]').click(function(e) { e.preventDefault(); var top = $(this).offset().top var id = $(this).attr('href'); var maskHeight = $(document).height(); var maskWidth = $(window).width(); $('#mask').css({ 'width':maskWidth, 'height':maskHeight }); $('#mask').css('opacity', 0).show(); $('#mask').fadeTo(1000,0.90); var winH = $(window).height(); var winW = $(window).width(); $(id).css('top', winH/2-$(id).height()/2); $(id).css('left', winW/2-$(id).width()/2); $(id).fadeIn(1000); }); $('.window .close').click(function (e) { e.preventDefault(); $('#mask').fadeOut(1000); $('.window').fadeOut(500); }); $('#mask').click(function () { $(this).fadeOut(1000); $('.window').fadeOut(500); }); }); </script> <?if($USER_AGENT$='ie')?> <style> #mask { position:absolute; left:0; top:0; z-index:9000; background-color:#000; display:none; } .window { position:absolute; left:0; top:0; z-index:9999; } </style> <?else?> <style> #mask { position:absolute; left:0; top:0; z-index:9000; background-color:#000; display:none; } .window { opacity:0.8; position:fixed; left:0; top:0; z-index:9999; } </style> <?endif?> Не забудьте поменять все 4 ссылки на информеры на свои: http://www.apocalypse.ucoz.kz/informer/13 - последние зарегистрированные пользователи http://www.apocalypse.ucoz.kz/informer/18 - самые популярные фото http://www.apocalypse.ucoz.kz/informer/17 - последние сообщения форума http://www.apocalypse.ucoz.kz/informer/3 - лучшие пользователи сайта Переходим к самим информерам: 1) Последние зарегистрированные пользователи Настройка информера: [ Пользователи · Материалы · Дата регистрации D · Материалы: 16 · Колонки: 4 ] Шаблон: Код <table align="center" border="0" cellpadding="0" cellspacing="0"> <tr><td width="104"> <table border="0" cellpadding="0" cellspacing="0"> <tbody><tr> <td width="17" background="http://www.apocalypse.ucoz.kz/border/1.png" height="17"> </td> <td background="http://www.apocalypse.ucoz.kz/border/2.png" height="17"> </td> <td width="17" background="http://www.apocalypse.ucoz.kz/border/3.png" height="17"> </td> </tr> <tr> <td width="17" background="http://www.apocalypse.ucoz.kz/border/4.png"> </td> <td> <?if($AVATAR_URL$)?><a title="Клик для просмотра профиля $USERNAME$" href="$PROFILE_URL$"><img src="$AVATAR_URL$" height="70" border="0"></a><?else?><a title="Клик для просмотра профиля $USERNAME$" href="$PROFILE_URL$"><img src="http://www.apocalypse.ucoz.kz/images/noavatar.png" height="70"></a><?endif?> </td> <td width="17" background="http://www.apocalypse.ucoz.kz/border/5.png"> </td> </tr> <tr> <td width="17" background="http://www.apocalypse.ucoz.kz/border/6.png" height="17"> </td> <td background="http://www.apocalypse.ucoz.kz/border/7.png" height="17"> </td> <td width="17" background="http://www.apocalypse.ucoz.kz/border/8.png" height="17"> </td> </tr> </tbody></table> </td><td align="left"> <a title="Репутация пользователя: $REPUTATION$"><img style="cursor:pointer;padding:2 0 2 0;" src="http://www.apocalypse.ucoz.kz/images/informer/rep.png" width="12" border="0"></a></br> <a title="Комментариев: $COM_POSTS$"><img style="cursor:pointer;padding:2 0 2 0;" src="http://www.apocalypse.ucoz.kz/images/informer/answers.png" width="12" border="0"></a></br> <a title="Сообщений на форуме: $FORUM_POSTS$"><img style="cursor:pointer;padding:2 0 2 0;" src="http://www.apocalypse.ucoz.kz/images/informer/posts.png" width="12" border="0"></a></br> <a title="Добавлено файлов: $LOAD_POSTS$"><img style="cursor:pointer;padding:2 0 2 0;" src="http://www.apocalypse.ucoz.kz/images/informer/files.png" width="12" border="0"></a></br> <a title="Добавлено фотографий: $PHOTO_POSTS$"><img style="cursor:pointer;padding:2 0 2 0;" src="http://www.apocalypse.ucoz.kz/images/informer/photos.png" width="12" border="0"></a></br> </td></tr></table> 2) Самые популярные фото Настройка информера: [ Фотоальбомы · Материалы · Количество просмотров D · Материалы: 20 · Колонки: 4 ] Шаблон: Код <table align="center" border="0" cellpadding="0" cellspacing="0"> <tr><td width="134"> <table border="0" cellpadding="0" cellspacing="0"> <tbody><tr> <td width="17" background="http://www.apocalypse.ucoz.kz/border/1.png" height="17"> </td> <td background="http://www.apocalypse.ucoz.kz/border/2.png" height="17"> </td> <td width="17" background="http://www.apocalypse.ucoz.kz/border/3.png" height="17"> </td> </tr> <tr> <td width="17" background="http://www.apocalypse.ucoz.kz/border/4.png"> </td> <td> <a title="Название: $PHOTO_NAME$" href="$PHOTO_URL$">$PHOTO$</a> </td> <td width="17" background="http://www.apocalypse.ucoz.kz/border/5.png"> </td> </tr> <tr> <td width="17" background="http://www.apocalypse.ucoz.kz/border/6.png" height="17"> </td> <td background="http://www.apocalypse.ucoz.kz/border/7.png" height="17"> </td> <td width="17" background="http://www.apocalypse.ucoz.kz/border/8.png" height="17"> </td> </tr> </tbody></table> </td><td align="left"> <a title="Рейтинг: $RATING$"><img style="cursor:pointer;padding:2 0 2 0;" src="http://www.apocalypse.ucoz.kz/images/informer/rep.png" width="12" border="0"></a></br> <a title="Комментариев: $COMMENTS_NUM$"><img style="cursor:pointer;padding:2 0 2 0;" src="http://www.apocalypse.ucoz.kz/images/informer/answers.png" width="12" border="0"></a></br> <a href="$PROFILE_URL$" title="Добавил: $USER$"><img style="cursor:pointer;padding:2 0 2 0;" src="http://www.apocalypse.ucoz.kz/images/informer/posts.png" width="12" border="0"></a></br> <a href="$CAT_URL$" title="Категория: $CAT_NAME$"><img style="cursor:pointer;padding:2 0 2 0;" src="http://www.apocalypse.ucoz.kz/images/informer/category.png" width="12" border="0"></a></br> <a title="Материал добавлен: $DATE$ [$TIME$]"><img style="cursor:pointer;padding:2 0 2 0;" src="http://www.apocalypse.ucoz.kz/images/informer/files.png" width="12" border="0"></a></br> <a title="Размеры: $PHOTO_SIZE$ [$PHOTO_WEIGHT$КБ]"><img style="cursor:pointer;padding:2 0 2 0;" src="http://www.apocalypse.ucoz.kz/images/informer/forum.png" width="12" border="0"></a></br> </td></tr></table> 3) Последние сообщения форума Настройка информера: [ Форум · Материалы · Последние обновленные темы · Материалы: 10 · Колонки: 2 ] Шаблон: Код <form> <fieldset> <legend> <b>[$NUMBER$]</b> </legend> <a href="$LAST_POST_URL$" title="<center>Клик для перехода к последнему сообщению<hr>Название темы: <i>$THREAD_TITLE$</i><hr>Раздел: <i>$FORUM$</i></center>"><img src="http://apocalypse.ucoz.kz/images/informer/forum.png" border="0"></a> <hr> <img title="Автор темы" src="http://apocalypse.ucoz.kz/images/informer/author.png" border="0"> <span title="Клик для просмотра профиля">$AUTHOR$</span><br> <img title="Последний отклик оставил" src="http://apocalypse.ucoz.kz/images/informer/answer.png" border="0"> <span title="Клик для просмотра профиля">$POST_USER$</span><br> <img title="Всего ответов" src="http://apocalypse.ucoz.kz/images/informer/answers.png" border="0"> <a title="Клик для перехода на форум <i>$THREAD_TITLE$</i>" href="$THREAD_URL$">$REPLIES$</a> </fieldset> </form><br> 4) Лучшие пользователи сайта Настройка информера: [ Пользователи · Материалы · Репутация · Материалы: 12 · Колонки: 3 ] Шаблон: Код <table align="center" border="0" cellpadding="0" cellspacing="0"> <tr><td width="104"> <table border="0" cellpadding="0" cellspacing="0"> <tbody><tr> <td width="17" background="http://www.apocalypse.ucoz.kz/border/1.png" height="17"> </td> <td background="http://www.apocalypse.ucoz.kz/border/2.png" height="17"> </td> <td width="17" background="http://www.apocalypse.ucoz.kz/border/3.png" height="17"> </td> </tr> <tr> <td width="17" background="http://www.apocalypse.ucoz.kz/border/4.png"> </td> <td> <?if($AVATAR_URL$)?><a title="Клик для просмотра профиля $USERNAME$" href="$PROFILE_URL$"><img src="$AVATAR_URL$" height="70" border="0"></a><?else?><a title="Клик для просмотра профиля $USERNAME$" href="$PROFILE_URL$"><img src="http://www.apocalypse.ucoz.kz/images/noavatar.png" height="70"></a><?endif?> </td> <td width="17" background="http://www.apocalypse.ucoz.kz/border/5.png"> </td> </tr> <tr> <td width="17" background="http://www.apocalypse.ucoz.kz/border/6.png" height="17"> </td> <td background="http://www.apocalypse.ucoz.kz/border/7.png" height="17"> </td> <td width="17" background="http://www.apocalypse.ucoz.kz/border/8.png" height="17"> </td> </tr> </tbody></table> </td><td align="left"> <a title="Репутация пользователя: $REPUTATION$"><img style="cursor:pointer;padding:2 0 2 0;" src="http://www.apocalypse.ucoz.kz/images/informer/rep.png" width="12" border="0"></a></br> <a title="Комментариев: $COM_POSTS$"><img style="cursor:pointer;padding:2 0 2 0;" src="http://www.apocalypse.ucoz.kz/images/informer/answers.png" width="12" border="0"></a></br> <a title="Сообщений на форуме: $FORUM_POSTS$"><img style="cursor:pointer;padding:2 0 2 0;" src="http://www.apocalypse.ucoz.kz/images/informer/posts.png" width="12" border="0"></a></br> <a title="Добавлено файлов: $LOAD_POSTS$"><img style="cursor:pointer;padding:2 0 2 0;" src="http://www.apocalypse.ucoz.kz/images/informer/files.png" width="12" border="0"></a></br> <a title="Добавлено фотографий: $PHOTO_POSTS$"><img style="cursor:pointer;padding:2 0 2 0;" src="http://www.apocalypse.ucoz.kz/images/informer/photos.png" width="12" border="0"></a></br> </td></tr></table> Последний этап - в то место, где будет облако вставляйте: Код <link rel="stylesheet" type="text/css" href="http://apocalypse.ucoz.kz/css/demo.css" /> <script type="text/javascript" src="http://apocalypse.ucoz.kz/js/script.js"></script> <div id="stage"> <center> <div class="btn digg"><div class="bcontent"><a href="#staticinfolusers" name="modal"><img title="Последние зарегистрированные" src="http://apocalypse.ucoz.kz/images/informer/last_users.png" border="0"></a></div></div> <div class="btn tweetmeme"><div class="bcontent"><a href="#staticinfolphotos" name="modal"><img title="Самые популярные фотографии" src="http://apocalypse.ucoz.kz/images/informer/last_photos.png" border="0"></a></div></div> <div class="btn dzone"><div class="bcontent"><a href="#staticinfolforums" name="modal"><img title="Последние сообщения форума" src="http://apocalypse.ucoz.kz/images/informer/last_forums.png" border="0"></a></div></div> <div class="btn facebook"><div class="bcontent"><a href="#staticinfobusers" name="modal"><img title="Лучшие пользователи" src="http://apocalypse.ucoz.kz/images/informer/best_users.png" border="0"></a></div></div> </center> </div> <div id="share-label"></div> Всё! Все файлы, из которых состоит данный скрипт, я прикрепляю в архиве При копировании данного материала указывайте автора Apocalypse и источник http://apocalypse.ucoz.kz Материал подготовлен Apocalypse | |
| Просмотров: 463 | Загрузок: 0 | | |
| Всего комментариев: 0 | |
|
| |