Russian TYPO3 community - Typo3 6.0 - будущее настало или нет?

Цитата:

Сообщение от dmartynenko (Сообщение 35641)

А тут user_content_image->main, получается, вы полностью сделали свою логику обработки IMAGE ?

Запостите сюда для народа

Да - и еще пару моментов - на заметку - что бы не забыть в первую очередь - т.к. думаю что это будет обмен опытом...

1. которого я так долго ждал: я ушел от папки fileadmin - т.е. я больше не использую ее для хранения шаблонов сайта, функций и всего прочего: - она у меня осталась чистой - только для "tree" (я ее так называю) - т.е. по чпу она у меня копирует содержимое сайта...

Например есть раздел:
http://studsovet-life.ru/projects/zkp-42/
соответственной в fileadmin есть
fileadmin/projects/zkp-42/ - где хранятся фотки для данного раздела и материалы zip , rar - если они есть , в данном проекте фоновое изображение!

и в настоящем я готов убить любого - кто перемещает данную логику расфасовки материала! - :o

Стараюсь закрывать все на index кроме fileadmin, uploads (хотя данную папку я тоже стараюсь не использовать т.к. она дублирует контент - а это лишний объем и основного сайта !

2. момент - никогда не использую javascript и style в html-коде - все выношу во внешние файлы (исключение metrika) - таким образом получается начистейший код
- ну и так как ext-у меня только самый минимум - html кода и php-кода лишнего нет - в т.ч. extbase...

в данном проекте логика построения systemdir Такая:
depo.css - основной стиль дизайна
content.css - стили контента
content.m.css - стили контента (переписывают content.css)
content.p.css - стили контента (переписывают content.css)
для мобильных используются специальный jquery mobile css

--
document-ready.js - запуск проекта
document-ready.m.js - запуск проекта мобильный

хотя в больших проектах
document-ready.js - собирается из различных кусочков
в данном проекте document-ready.js один...

3. момент - ну это касательно таблиц pages и tt_content - данный проект построен исключительно на страницах - а вообще страницы использую по минимуму - в основном на них работают плагины - которые создают виртуальный страницы и содержимое (возможно без виртуальных страниц).... а tt_content предлагает создать контент (картинка, изображение, текст, файл) - для упрощенных проектов это вполне приемлемо - но создавать страницы по такому набору в больших проектах - это очень не удобно) - и это к вопросу о данном расширении: http://forum.typo3.biz/showthread.php?t=6697

Для редакторов сайта как вижу нужно задавать жесткую форму (где уже скрипт сам автоматически расставит элементы)...
Вот если посмотреть http://newsland.com/news/detail/id/1125491/
то здесь каждая новость имеет жесткий набор параметров (заголовок, фото с права, комментарии, текст)
таким образом - одна новость = одна запись в БД
а с http://forum.typo3.biz/showthread.php?t=6697 - одна новость = несколько записей в БД
Причем фото с права вставляется не через визуальный редактор - а через специальное поле для этого - уверен на 110%!

4. ну и по поводу css_styled_content (примеры):

ХОЧУ ПОДЧЕРКНУТЬ ОДИН МОМЕНТ - очень важный на мой взгляд для понимания - typo3 через css_styled_content - пытается стандартизировать то, что в принципе не возможно стандартизировать - т.к. это зависит от проекта - поэтому перешел на user->main()

Картинки images.php:

PHP код:


		
			
<?php

//Элемент контента - а) список изображений  (cType image) б) изображения с текстом (cType textpic)

class user_content_image {

    var $cObj;



    function main($content, $conf) {

        

    

        //Разбиваем загруженные изображения, а также стили к ним и подписи

        $allStyle = explode(chr(10) , $this->cObj->data['imageorient']);

        $allTitle = explode(chr(10) , $this->cObj->data['imagecaption']);

        $allImage = explode("," , $this->cObj->data['tx_emreferences_filereferences']);

        for ($i = 0; $i < count ($allImage); $i ++)

        {

            //imageorient  (стандартный-ничего не трогаем | half 191c - половинчатое изображение | wide широкий | wide text широкий с текстом)

            //Создаем уменьшенную копию изображения

            $arrImgParams['file'] = 'fileadmin/'.$allImage[$i];

            $arrImgParams['file.']['width'] = (trim($allStyle[$i]) == "wide" || trim($allStyle[$i]) == "wide text") ? '404c' : '120c';

            $arrImgParams['alttext'] = str_replace("|>" , false, $allTitle[$i]); //удаляем "самовведенный тэг" перевода строки

            $arrImgParams['titleText'] = str_replace("|>" , false, $allTitle[$i]); //удаляем "самовведенный тэг" перевода строки

            $img = $this->cObj->IMG_RESOURCE($arrImgParams);

            

            

            //Удаляем атрибуты width и height

            //$img = preg_replace("/(width=\".+?\"|height=\".+?\")/", null,$img); 

            

            $img = "/".$img;

            

            

            //Узнаем размеры временного изображения, что бы вписать их в style div

            preg_match('/src=([\'"])?((?(1).+?|[^\s>]+))(?(1)\1)/is', $img, $basename);

            $size = getimagesize ($basename[2]); 

            

            

            //параметры для моб. версии сайта

            $jquerymobile = 'rel="external"'; // data-something="something'.$i.'" data-another-thing="anotherthing'.$i.'"

            

            //css-класс для больших 100% и маленьких 33%-изображений

            $cssClassImage = ($arrImgParams['file.']['width'] == '404c') ? 'width100' : 'width33' ;

            

            

            //Вариант №2 - с подписью и при условии, что подпись существует

            if (trim($allStyle[$i]) == "wide text" AND strlen (trim($allTitle[$i])) > 0 )

            {

                $content .= '<div class="imageBox"><div class="imageFrame text '.$cssClassImage.'" style="width: '.$size[0].'px; height: '.$size[1].'px;">

                <a class="imageZoom" title="'.$arrImgParams['titleText'].'" href="/fileadmin/'.$allImage[$i].'" '.$jquerymobile.'><img src="'.$img.'" alt="'.$arrImgParams['titleText'].'" border="0"></a></div>';

                

                //Если существует текст и cType textpic

                if ($this->cObj->data['CType'] == "textpic")

                {

                    $this->cObj->data['bodytext'] = $this->cObj->parseFunc($this->cObj->data['bodytext'],$GLOBALS['TSFE']->tmpl->setup['lib.']['parseFunc_RTE.']);

                    $content .= '<div class="textAlt">'.$this->cObj->data['bodytext'].'</div></div>';

                }

                else

                $content .= '<div class="textAlt">'.str_replace("|>" , "<br />", $allTitle[$i]).'</div></div>';

            }

        

            //Вариант №1 - без подписи

            else

            $content .= '<div class="imageFrame text '.$cssClassImage.'" style="width: '.$size[0].'px; height: '.$size[1].'px;">

            <a class="imageZoom" title="'.$arrImgParams['titleText'].'" href="/fileadmin/'.$allImage[$i].'" '.$jquerymobile.'><img src="'.$img.'" alt="'.$arrImgParams['titleText'].'" border="0"></a></div>';

        }



        return '<center><div class="imageWrap">'.$content.'</div></center><br class="clearall" style="clear: left;">';

    }



}





?>

Слайдер sliderz.php

PHP код:


		
			
<?php

//Наполнение слайдера в шапке изображениями



class user_sliderz {

    var $cObj;



    function main($content, $conf) {

        

        $handle = opendir (PATH_site."fileadmin/def-studsovet-x/systemdir/images/slider/");

        

            //Собираем массив с файлами слайда

            while($file = readdir($handle))

            if (is_file(PATH_site."fileadmin/def-studsovet-x/systemdir/images/slider/".$file))

            {

                $path_parts = pathinfo( PATH_site."fileadmin/def-studsovet-x/systemdir/images/slider/".$file ); 

                $sliderlement[ $path_parts["filename"] ] = $file;

            }

            

            //Сортируем массив

            ksort ($sliderlement);

            

            //Выводим содержимое (собираем контент)

            foreach ($sliderlement as $key => $val):

            

                $content .= "<div class='element'><img src='";

                $content .= "/fileadmin/def-studsovet-x/systemdir/images/slider/".$val;

                $content .= "'></div>\n";

            

            endforeach;

        

        return  $content;

    }



}





?>

при подобном подходе можно применять очень служную логику - "шаблон > фотографии > поля для ввода"
Но как вижу - задача программиста ни в том, что бы создавать сложную логику (это опять же к вопросу того, что обсуждалось на форуме - где-то писалось что создать такой же магазин как у битрикса очень сложно - ссылаясь на то, что там очень много зависимостей - самый сложный участок - это интеграция с 1С или другой системой, да и вообще в любых задачах - а в остальном терпимо!) а в том, что бы создать формы для ввода данных - что бы ее потом могли легко заполнить отдел секретарей - и ничего не сломать...

5. момент sitemap.xml и robots.txt - Генрятся через TS

и если еще что-то вспомну - напишу красненьким сюда же...

http://studsovet-life.ru/fileadmin/d...storage-fe.png
http://studsovet-life.ru/fileadmin/d...e-settings.png
http://studsovet-life.ru/fileadmin/d...-structure.png

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&amp;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({ });

           

           

    });



});