Аниме слайдер с проекта Аниме Магия - Форум о сайтостроении


  • Страница 1 из 1
  • 1
Форум о сайтостроении » Форум аниме клона » Яваскрипты - Фреймворки - Слайдеры и прочие фени » Аниме слайдер с проекта Аниме Магия
Аниме слайдер с проекта Аниме Магия
Alexiya Дата: Вторник, 20.05.2014, 13:16 | Сообщение # 1
Группа: Администраторы
Сообщений: 180
Репутация: 11
Статус: Offline
Сегодня мы будем рассматривать функциональный слайдер с проекта Аниме Магика.

Слайдер оформлен с помощью двойного информера и отображает три последние новости по порядку.
Теперь давайте рассмотрим разметку слайдера
Код
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.5.3/jquery-ui.min.js" ></script>
<div align="center"><div id="featured"><ul class="ui-tabs-nav">   
<li class="ui-tabs-nav-item ui-tabs-selected" id="nav-fragment-$ID$$CID$$UID$"><a href="#fragment-$CID$">   
<img src="http://animagica.moy.su/animagiki.jpg" alt="" class="mimijpg" height="60" width="62">   
<span>Аниме онлайн смотреть</span></a></li>
<script type="text/javascript" src="http://animagica.moy.su/informer/3"></script>
</ul>   
<!-- Content -->   
<div id="fragment-$CID$" class="ui-tabs-panel" style="">   
<img src="http://animagica.moy.su/animagi.jpg" alt="" height="300" width="651">   
<div class="info"><h2><a href="$ENTRY_URL$">$TITLE$</a></h2>   
<a href="http://animagica.moy.su/publ"><h2 style="margin-left:26px;margin-top:16px;font-size:24px;">Аниме онлайн</h2></a><p></p>   
</div></div>
<script type="text/javascript" src="http://animagica.moy.su/informer/4"></script>
</div>   
<script type="text/javascript">   
$(document).ready(function(){   
$("#featured > ul").tabs({fx:{opacity: "toggle"}};).tabs("rotate", 5000, true);   
};);   
</script></div>


аниме топ сайтов + статья о вашем сайте
Оставь на форуме 50 сообщений и получи анкорную ссылку в подписи!
 
Alexiya Дата: Вторник, 20.05.2014, 13:21 | Сообщение # 2
Группа: Администраторы
Сообщений: 180
Репутация: 11
Статус: Offline
Теперь давайте рассмотрим код "внутренностей" слайдера


Код
<li class="ui-tabs-nav-item" id="nav-fragment-$ID$$CID$$UID$"><a href="#fragment-$ID$$CID$$UID$">  
<img src="$OTHER1$" alt="" class="mimijpg" height="60" width="62">
<span>аниме <?substr($TITLE$,0,88)?> ...</span></a></li>
Такой код содержится в информере под номером 3.

А в информере номер 4 вот такой код

Код
<div id="fragment-$ID$$CID$$UID$" class="ui-tabs-panel ui-tabs-hide" style="">  
<img src="$OTHER1$" alt="" class="mimijpg" height="300" width="651">  
<div id="GoD" class="intro">  
<a href="$ENTRY_URL$">аниме $TITLE$</a> <a href="$ENTRY_URL$">смотреть онлайн</a>
</div>  
</div>
Оба информера настроены следующим образом:
Тип данных: Материалы
Способ сортировки: Дата добавления материала D
Количество материалов: 3
Количество колонок: 1
Дополнительные опции: нет


аниме топ сайтов + статья о вашем сайте
Оставь на форуме 50 сообщений и получи анкорную ссылку в подписи!
 
Alexiya Дата: Вторник, 20.05.2014, 13:26 | Сообщение # 3
Группа: Администраторы
Сообщений: 180
Репутация: 11
Статус: Offline
Теперь мы посмотрим код стилей слайдера, вам код стилей очень пригодится, если вы будете адаптировать этот слайдер для своего сайта.
вы можете посмотреть эти стили слайдера в отдельном файле css слайдера

Код
<link type="text/css" rel="StyleSheet"  href="http://animagica.moy.su/style_1.css" />
Я выражаю огромную признательность администратору сайта Аниме Магика  в предоставлении материалов для освещения темы слайдера.
Вот рабочий пример слайдера

Если у вас возникнут вопросы по установке слайдера, то пишите в тему happy


аниме топ сайтов + статья о вашем сайте
Оставь на форуме 50 сообщений и получи анкорную ссылку в подписи!
 
animagica Дата: Среда, 21.05.2014, 20:48 | Сообщение # 4
Группа: Пользователи
Сообщений: 17
Репутация: 0
Статус: Offline
приятно видеть свой слайдер biggrin
Sasuke-free Дата: Суббота, 19.07.2014, 21:04 | Сообщение # 5
Группа: Пользователи
Сообщений: 5
Репутация: 0
Статус: Offline
Запарился я с этим вашим слайдером wacko
Я хочу справа у слайдера убрать всё и оставить только левую сторону но даже если я копирую весь код то у меня вместо слайдера вылезают просто картинки и ничего не происходит, пробую уже в третий раз помогите плиз cry
http://anime-music-naruto.narod.ru/news/anime_v_onlajne/1-0-2
Alexiya Дата: Среда, 23.07.2014, 11:07 | Сообщение # 6
Группа: Администраторы
Сообщений: 180
Репутация: 11
Статус: Offline
Sasuke-free, я смотрю вы уже разобрались, правда забыли сообщить об этом surprised

аниме топ сайтов + статья о вашем сайте
Оставь на форуме 50 сообщений и получи анкорную ссылку в подписи!
 
Форум о сайтостроении » Форум аниме клона » Яваскрипты - Фреймворки - Слайдеры и прочие фени » Аниме слайдер с проекта Аниме Магия
  • Страница 1 из 1
  • 1
Поиск:



Copyright Аниме Клон © 2024

Привет!
Меню пользователя
Пятница, 19.04.2024, 19:46

Приветствую Вас Гость

Главная | Регистрация | Вход | RSS