|
Senior Member
Регистрация: 18.01.2013
Адрес: Russia , Moscow
Сообщений: 796
|
document-ready.js
Код HTML:
$(function() {
//*****************************************************************//
//-1. Скрипт для эффектирования банера на главной странице
//*****************************************************************//
$("#information").hide();
$("#information").slideDown(1000);
$('#information .container').click(function(){
var nowposition = $(this).css('backgroundPosition');
switch (nowposition)
{
case '0px 0px': $(this).css('backgroundPosition', '0px -180px'); break;
case '0px -180px': $(this).css('backgroundPosition', '0px -360px'); break;
case '0px -360px': $(this).css('backgroundPosition', '0px -540px'); break;
case '0px -540px': $(this).css('backgroundPosition', '0px -720px'); break;
case '0px -720px': $(this).css('backgroundPosition', '0px -900px'); break;
default: $(this).css('backgroundPosition', '0px 0px'); break;
}
//$(this).css('backgroundPosition', '0 bottom');
});
//*****************************************************************//
//0. Скрипт для главной страницы -
// а) - создает 11 картинок по 42px
//*****************************************************************//
//Проверяем - если существует специальный контейнер на главной
if ( $('.jquery-11-42-slide').length )
{
//сохраняем высоту
var heightcontent = $('#content').height();
var menuhoverblock = 0; //блокировать ли выпадение меню?
//a) Скрываем основное содержимое
$('.globalwrap').hide();
$('.jquery-11-42-slide').css("visibility", "hidden");
//b) Создаем 11 слайдов по 42px; и кнопку переключения №1
var content11 = '<div id="index11">';
for (var k = 1; k <= 11; k ++){
if (k <= 10)
content11 += '<div class="element default" style="background-image: url(fileadmin/def-studsovet-x/systemdir/images/index-bg-images/'+k+'.png);"></div>';
else
content11 += '<div class="element last" style="background-image: url(fileadmin/def-studsovet-x/systemdir/images/index-bg-images/'+k+'.png);"></div>';
}
content11 += '<br class="clearall"><div class="abutton open"></div></div>';
$("#primary").after(content11);
//с) Создаем кнопку переключения №2
$("#content img").after('<br /><br /><br /><div class="abutton close"></div>');
//d) анимация для кнопки перюключения (открыть|запрыть)...
$('.abutton.open').click(function(){
menuhoverblock = 1; //блокируем выпадение меню
$(this).animate({ left: "48px" }, 150 )
.animate({ left: "380px" }, 150 );
$('#index11').slideUp(1000, function () {
$('.globalwrap').slideDown(1000, function () {
$('.jquery-11-42-slide').css("visibility", "visible").hide().fadeIn(1000);
menuhoverblock = 0; //разблокировка меню
});
});
});
$('.abutton.close').click(function(){
menuhoverblock = 1; //блокируем выпадение меню
$(this).animate({ left: "28px" }, 50 )
.animate({ left: "48px" }, 50 );
$('.jquery-11-42-slide').fadeOut(1000, function(){
$('#content').height( heightcontent + 48 );
$('.globalwrap').slideUp(1000, function(){
$('#index11').slideDown(1000, function(){
menuhoverblock = 0; //разблокировка меню
});
});
});
//$('.globalwrap').css("visibility", "hidden").hide().slideUp(1000, function () {
//$('#index11').slideDown(1000);
//});
});
//e) создаем анимацию к 11 слайдам
$("#index11 .element").css({ opacity: 0.1 });
$('#index11 .element').animate({ opacity: 1 }, 1500);
$('#index11 .element').hover(function(){
//$('#index11 .element').css({ opacity: 0.3 });
$(this).stop(true, true).animate({ opacity: 1 }, 1500);
},
function(){
$(this).stop(true, true).animate({ opacity: 0.3 }, 1500);
});
}
//*****************************************************************//
//1. Настройка выпадающего меню
// подгоняем под размеры выпадающее меню
//*****************************************************************//
$("#navmenu div.level-2").hide();
$('#navmenu ul.level-1 li a').click(function(){ $("#navmenu div.level-2").hide()});
$('#navmenu ul.level-1 li').hover(function(){
//Если выпадение меню запблокировано в коде пропраммы
if (menuhoverblock == 1)
return false;
//Узнаем высоту контента и подгоняем высоту меню под его размер
//Устанавливаем максимальюную высоту для наших выпадающих меню 2-уровня
var heightcontent = $('.resize').height();
$(this).find("div.level-2").css( { 'max-height' : (heightcontent-66+182)+'px' } );
$(this).find("div.level-2").stop(true, true).slideDown(420);
},
function(){
$(this).find("div.level-2").hide();
return false;
});
//*****************************************************************//
//2. Кнопка на верх
//*****************************************************************//
if ( $(document).height() > 1800)
{
//Если высота документа большая, показываем кнопку "наверх"
$('p.topscroll').show().click(function(){
//$(document).scrollTop( 0 );
$('html, body').animate({scrollTop:0}, 'slow');
return false;
});
}
//*****************************************************************//
//3. Кнопка назад (нужна на 404-старнице)
//*****************************************************************//
$("p.backlink").click(function(event) {
event.preventDefault();
history.back(1);
});
//*****************************************************************//
//4. Слайдер в шапке
//*****************************************************************//
var sliderzAllElement = $("#sliderz .content .element").size(); //Узнаем количетсов элементов в слайдере
var sliderzNowPosition = 1; //Текущяя позиция слайдера
var sliderzAppendContent; //HTML-Контент с дотами
var sliderzAutoPlay = 1; //1-играть, 0-пауза
$('#sliderz .element').hide(); //Скрываем все элементы
$('#sliderz .element:eq(0)').fadeIn(1800); //Показываем анимационно 1-вый div
$(".bredo").show(1);
$(".bredo").click(function(){
/* Анимация кнопки (начало) */
$( ".bredo" ).animate({ left: "-48px" }, 100 )
.animate({ left: "-18px" }, 100 )
.animate({ left: "-32px" }, 100 )
//Скрываем все элементы
$('#sliderz .element').hide();
//Вычесляем что показать
if (sliderzNowPosition <= 1) sliderzNowPosition = sliderzAllElement;
else sliderzNowPosition --;
//Показываем анимационно нужный div
$('#sliderz .element:eq('+(sliderzNowPosition - 1)+')').fadeIn(1000);
//Выделяем нужный дот
$('#sliderz .navelement a').removeClass('act'); //удаляем все активне классы
$('#sliderz .navelement a:eq('+(sliderzNowPosition - 1)+')').addClass('act');
});
$(".bnext").show(1);
$(".bnext").click(function(){
/* Анимация кнопки */
$( ".bnext" ).animate({ right: "-48px" }, 100 )
.animate({ right: "-18px" }, 100 )
.animate({ right: "-32px" }, 100 )
//Скрываем все элементы
$('#sliderz .element').hide();
//Вычесляем что показать
if (sliderzNowPosition >= sliderzAllElement) sliderzNowPosition = 1;
else sliderzNowPosition ++;
//Показываем анимационно нужный div
$('#sliderz .element:eq('+(sliderzNowPosition - 1)+')').fadeIn(1000);
//Выделяем нужный дот
$('#sliderz .navelement a').removeClass('act'); //удаляем все активне классы
$('#sliderz .navelement a:eq('+(sliderzNowPosition - 1)+')').addClass('act');
});
$('.bgoto').live('click', function() {
//Позиция к которой прокрутить слайдер
var gotox = $(this).attr('slidenum');
sliderzNowPosition = gotox - 1;
//Скрываем все элементы
$('#sliderz .element').hide();
//Вычесляем что показать
if (sliderzNowPosition >= sliderzAllElement) sliderzNowPosition = 1;
else sliderzNowPosition ++;
//Показываем анимационно нужный div
$('#sliderz .element:eq('+(sliderzNowPosition - 1)+')').fadeIn(1000);
//Выделяем нужный дот
$('#sliderz .navelement a').removeClass('act'); //удаляем все активне классы
$('#sliderz .navelement a:eq('+(sliderzNowPosition - 1)+')').addClass('act');
});
//Создаем список дотов ul li
contentAppendSliderz = '<div class="navelement"><ul><li><a class="act bgoto" slidenum="1"></a></li>';
for (var i = 2; i <= sliderzAllElement; i ++)
contentAppendSliderz += '<li><a class="bgoto" slidenum="'+(i)+'"></a></li>';
contentAppendSliderz += '</ul></div>';
$("#sliderz").append(contentAppendSliderz);
//Автопрокрутка
var refreshId = setInterval(function(){
if (sliderzAutoPlay == 0)
return false;
//Скрываем все элементы
$('#sliderz .element').hide();
//Вычесляем что показать
if (sliderzNowPosition >= sliderzAllElement) sliderzNowPosition = 1;
else sliderzNowPosition ++;
//Показываем анимационно нужный div
$('#sliderz .element:eq('+(sliderzNowPosition - 1)+')').fadeIn(1000);
//Выделяем нужный дот
$('#sliderz .navelement a').removeClass('act'); //удаляем все активне классы
$('#sliderz .navelement a:eq('+(sliderzNowPosition - 1)+')').addClass('act');
}, 7200);
//Приостановка таймера
$('#sliderz').hover(function(){ sliderzAutoPlay = 0; /* пауза */ },
function(){ sliderzAutoPlay = 1; /* играть */ });
//*****************************************************************//
//5.Скрыть/развернуть блок с контентом (переключатель)
//*****************************************************************//
$('p.green, p.red').next().hide(); //по умолчанию контент скрыт
$('p.blockContent').not('p.grey').click(function(){ /* not('p.grey')-исключаем его, т.к. он заблокированным считается */
//Создаем переключатель в зависимости от класса
if ($(this).hasClass('active'))
{
$(this).removeClass("active")
$(this).next().hide();
}
else
{
$(this).addClass("active");
$(this).next().fadeIn(750);
}
});
//*****************************************************************//
//6. Увеличение изображений по клику на них
//*****************************************************************//
var imageInLink; //оригинал изображения в гиперссылке
var documentScroll; //на сколько прокручен документ
var imageUrl; //Путь новой картинки (которую увеличиваем)
//Пользователь нажал на нужную нам картинку
$('a.imageZoom').click(function(){
//Собараем контент для всплывающего окошка
imageInLink = $(this).children("img"); //маленькое изображение в гиперссылке
imageUrl = $(this).attr('href'); //Путь картинки
documentScroll = $(document).scrollTop();
//скрываем изображение - т.самым показываем глобус
imageInLink.css("visibility", "hidden");
//Прежде чем показать окно, ждем пока загрузиться изображение
var tmpImg = new Image();
tmpImg.src = imageUrl;
if (tmpImg.complete)
{
$('#main').hide(); //Скрываем основной документ
//Создаем окно с изображением
$("body").append('<table class="windowdialog" width="100%" height="100%" border="0" cellspacing="10" cellpadding="15">\
<tr><td align="center" valign="middle"><img id="zoomImageResult" src="'+imageUrl+'"></td></tr></table>');
//Подгоняем изображение под размер окна
//Т.е. уменьшаем ширину, до тех пор, пока не будет подогнано под нужны размер окна браузера
var returnWidth = $('#zoomImageResult').width();
var returnHeight = $('#zoomImageResult').height();
while (1)
{
//Здесь 72 - это cellspacing="10" cellpadding="15" , а также padding 8px к img
if ( returnWidth > $(window).width() - 72 || returnHeight > $(window).height() - 72 )
{
returnWidth = returnWidth - (returnWidth/100);
returnHeight = returnHeight - (returnHeight/100);
//alert( "Размер окна:" + $(window).width() + "Размер подогнанного изображения" + returnWidth);
}
else
break;
}
$('#zoomImageResult').width( returnWidth );
}
else
tmpImg.onload = function() {
/* $('#main').hide(); //Скрываем основной документ
//Если размеры изображения больше размером окна - присваиваем им соответствующий размер
if ( tmpImg.width > $(window).width() )
var returnWidth = 'width="'+($(window).width()-250)+'"';
//Создаем окно с изображением
$("body").append('<table class="windowdialog" width="100%" height="100%" border="0" cellspacing="10" cellpadding="15">\
<tr><td align="center" valign="middle"><img '+returnWidth+' src="'+imageUrl+'"></td></tr></table>');
*/
$('#main').hide(); //Скрываем основной документ
//Создаем окно с изображением
$("body").append('<table class="windowdialog" width="100%" height="100%" border="0" cellspacing="10" cellpadding="15">\
<tr><td align="center" valign="middle"><img id="zoomImageResult" src="'+imageUrl+'"></td></tr></table>');
//Подгоняем изображение под размер окна
//Т.е. уменьшаем ширину, до тех пор, пока не будет подогнано под нужны размер окна браузера
var returnWidth = $('#zoomImageResult').width();
var returnHeight = $('#zoomImageResult').height();
while (1)
{
//Здесь 72 - это cellspacing="10" cellpadding="15" , а также padding 8px к img
if ( returnWidth > $(window).width() - 72 || returnHeight > $(window).height() - 72 )
{
returnWidth = returnWidth - (returnWidth/100);
returnHeight = returnHeight - (returnHeight/100);
//alert( "Размер окна:" + $(window).width() + "Размер подогнанного изображения" + returnWidth);
}
else
break;
}
$('#zoomImageResult').width( returnWidth );
} ;
return false;
});
//Пользователь закрывает окно с увеличенной картинкой
$('table.windowdialog').live('click', function() {
imageInLink.addClass("visited"); //Показываем изображение в гиперссылке | затемняем его как просмотренное
$('a.imageZoom img').css("visibility", "visible"); //Исправляем небольшй баг, если жмется несколько картинок...
$('table.windowdialog').remove(); //Удаляем созданное окно
$('#main').show(); //Показываем основной документ
$(document).scrollTop( documentScroll ); //Возвращяем скроллинг страницы
return false;
});
//Пользователь приближает окно
//Используется lib/jquery.mousewheel-3.0.4.pack.js
/*
$('table.windowdialog img').live('mousewheel', function(event, delta) {
//var dir = delta > 0 ? 'Up' : 'Down',
//Вычесляем %-на который нужно увеличить/уменишьть
var percent = $(this).width()
if (delta > 0)
$(this).width( $(this).width() + 50 );
else
$(this).width( $(this).width() - 50 );
return false;
}); */
});
tpl.html
Код HTML:
<!DOCTYPE html>
<html>
<head>
<title>Untitled</title>
<link rel="stylesheet" type="text/css" href="depo.css" media="all">
</head>
<body>
<!-- ###DOCUMENT_BODY### -->
<div id="main" class="###seasons###">
<div class="sepborder-open">
<div id="syslinks">
<!-- ###syslinks### -->
<img src="/fileadmin/def-studsovet-x/systemdir/images/syslinks/print.png"> Версия для печати |
<img src="/fileadmin/def-studsovet-x/systemdir/images/syslinks/phone.png"> мобильная версия |
<img src="/fileadmin/def-studsovet-x/systemdir/images/syslinks/sitemap.png"> карта сайта
<!-- ###syslinks### -->
</div>
</div>
<div class="sepborder"></div>
<div id="header"><div class="logo"><!-- ###linkindex### --><a href="/"></a><!-- ###linkindex### --></div></div>
<div class="sepborder"></div>
<div id="sliderz">
<div class="bredo"></div>
<div class="bnext"></div>
<div class="content">
<!-- ###sliderz### -->
<div class="element"><img src="/fileadmin/def-studsovet-x/systemdir/images/slider/1.jpg"></div>
<div class="element"><img src="/fileadmin/def-studsovet-x/systemdir/images/slider/2.jpg"></div>
<div class="element"><img src="/fileadmin/def-studsovet-x/systemdir/images/slider/3.jpg"></div>
<div class="element"><img src="/fileadmin/def-studsovet-x/systemdir/images/slider/4.jpg"></div>
<!-- ###sliderz### -->
</div>
</div>
<div class="sepborder"></div>
<div id="navmenu"><!-- ###navMenu### -->Меню<!-- ###navMenu### --></div>
<div class="sepborder" style="display: none;"></div>
<div id="promotion" style="display: none;"><div class="wrap">
<!-- ###promotion### -->
<img src="/fileadmin/def-studsovet-x/systemdir/promotion.png">
<!-- ###promotion### -->
</div></div>
<div class="resize"><!--для определения размера содержимого (нужно для меню)-->
<div id="primary" class="sepborder"></div>
<div class="globalwrap">
<div id="content" class="###contentClass###" style="background-image: url(###bgfonImage###);">
<div class="wrap" style="padding-top: ###contentPadding###px;">
<div id="breadcrumb"><!-- ###breadcrumb### -->Навигационная цепочка<!-- ###breadcrumb### --></div>
<!-- ###content### -->Содержимое<!-- ###content### -->
<!--данная кнопка регилуруется jquery-->
<p class="topscroll"><span>Наверх</span></p>
<!--<p align="center">« предудыщая страница | следующая страница »</p>-->
</div>
</div>
</div>
</div>
<div class="sepborder short"></div>
<div id="information"><div class="container"><span>Студенческая жизнь - это время для новых знаний и открытий.
Миссия совета: продвижение и развитие личности студента.
Задача совета: укрепление позиций студенческой корпорации.</span></div></div>
<div class="sepborder"></div>
<div id="banner">
<!--###menubanners###-->
<div class="wrap left"></div>
<div class="wrap center"></div>
<div class="wrap right"></div>
<!--###menubanners###-->
</div>
<div class="sepborder"></div>
<div id="footer"></div>
<div class="sepborder"></div>
<div class="sepborder-close">
<div id="syslinks2">
<!-- ###syslinks2### --><a>Версия сайта: 4.48 |
copyright © 2012 |
обмен ссылками |
powered by TYPO3</a>
<!-- ###syslinks2### -->
</div>
</div>
<div id="metrika">
<!-- Yandex.Metrika informer -->
<a href="http://metrika.yandex.ru/stat/?id=19455046&from=informer"
target="_blank" rel="nofollow"><img src="//bs.yandex.ru/informer/19455046/2_1_FFFFFFFF_EFEFEFFF_0_uniques"
style="width:80px; height:31px; border:0;" alt="Яндекс.Метрика" title="Яндекс.Метрика: данные за сегодня (уникальные посетители)" onclick="try{Ya.Metrika.informer({i:this,id:19455046,type:0,lang:'ru'});return false}catch(e){}"/></a>
<!-- /Yandex.Metrika informer -->
</div>
</div>
<!-- Yandex.Metrika counter -->
<script type="text/javascript">
(function (d, w, c) {
(w[c] = w[c] || []).push(function() {
try {
w.yaCounter19455046 = new Ya.Metrika({id:19455046,
webvisor:true,
clickmap:true,
trackLinks:true,
accurateTrackBounce:true,
trackHash:true});
} catch(e) { }
});
var n = d.getElementsByTagName("script")[0],
s = d.createElement("script"),
f = function () { n.parentNode.insertBefore(s, n); };
s.type = "text/javascript";
s.async = true;
s.src = (d.location.protocol == "https:" ? "https:" : "http:") + "//mc.yandex.ru/metrika/watch.js";
if (w.opera == "[object Opera]") {
d.addEventListener("DOMContentLoaded", f, false);
} else { f(); }
})(document, window, "yandex_metrika_callbacks");
</script>
<noscript><div><img src="//mc.yandex.ru/watch/19455046" style="position:absolute; left:-9999px;" alt="" /></div></noscript>
<!-- /Yandex.Metrika counter -->
<!-- ###DOCUMENT_BODY### -->
<!-- ###DOCUMENT_BODY_PRINT### -->
<table width="100%" align="center" border="0" id="print" class="print">
<tr><td align="right"><i>Версия страницы сайта для печати</i><br /><center><img align="center" vspace="20" src="/fileadmin/def-studsovet-x/tree/bank/corp/logo-200x52.png"></center></td></tr>
<tr><td id="breadcrumb"><!-- ###breadcrumb### -->Навигация<!-- ###breadcrumb### --></td></tr>
<tr><td id="content"><!-- ###content### -->Содержимое<!-- ###content### --></td></tr>
<tr><td id="footer">Официальный сайт Студенческого совета НОУ ВПО «Академии МНЭПУ»<br />
Информационный центр совета - сайт создан в 2010 году<br />
Сайт модернзирован в 2012 году</td></tr>
</table>
<!-- ###DOCUMENT_BODY_PRINT### -->
<!-- ###DOCUMENT_BODY_MOBILE### -->
<div id="welcome" data-role="page" class="document">
<div data-role="header">
###button_back###
<center><img align="center" hspace="20" vspace="42" src="/fileadmin/def-studsovet-x/tree/bank/corp/logo-200x52-white.png"></center>
###button_home###
</div><!-- /header -->
<div data-role="content" class="content">
<div data-role="collapsible" data-theme="a" data-content-theme="c">
<h2><!-- ###breadcrumb### -->Навигация<!-- ###breadcrumb### --></h2>
<ul data-role="listview">
<!-- ###navMenu### -->Меню основное<!-- ###navMenu### -->
###button_up### <!--кнопочка назад (появляется только когда не на главной)-->
</ul>
</div>
<!-- ###content### -->Содержимое<!-- ###content### -->
</div><!-- /content -->
<div data-role="footer">
<div data-role="navbar">
<ul data-theme="a" data-dividertheme="c">
<!-- ###navMenuFooter### -->
<li><a href="#index" data-direction="reverse">Полная версия</a></li>
<li><a href="http://www.google.com/" data-rel="external">Google Me</a></li>
<li><a href="http://www.hongkiat.com/" data-rel="external">условаия перепечатки материалов</a></li>
<li><a href="/" data-rel="external">обмен ссылками</a></li>
<li><a href="/sitemap/" data-rel="external" data-transition="pop" class="ui-btn-active ui-state-persist">карта сайта</a></li>
<!-- ###navMenuFooter### -->
</ul>
</div>
<h5 style="font-size: 14px;">Официальный сайт Студенческого совета НОУ ВПО «Академии МНЭПУ»<br />
Информационный центр совета - сайт создан в 2010 году<br />
Сайт модернзирован в 2012 году</h5>
</div><!-- /header -->
</div><!-- /page -->
<!-- ###DOCUMENT_BODY_MOBILE### -->
</body>
</html>
document-ready.m.js
Код HTML:
//Выстрелил в конце концов загрузки страницы и переходы. - только так это получилось поставить...
//Это исправляет этот баг - 3. при загрузке моб. версии сайта при первом посещении страницы (без кэша - не открывается увеличивание картинок...)
//на ссылках обязательно должен стоять rel="external
//+ обязателен порядок подключения файов klass.min - code.photoswipe-3.0.5.min - document-ready.m
$(document).bind('pagechange', function(e) {
//это тоже обязательно
$('div.content').each(function(){
var myPhotoSwipe = $("a.imageZoom").photoSwipe({ });
});
});
|