Если у вас есть вопросы по статье или нужна помощь в создании сайта, пишите нам в чат на сайте или Вконтакте. Не забудьте оставить свой e-mail и мы ответим в самое ближайшее время.
HOSTCMS v.6. Внедряем coin-slider
Для работы coin-slider на сайте под HostCMS возьмем XSL шаблон Информационной системы и укажем для блока вывода информационного элемента идентификатор «games»:
<?xml version= «1.0» encoding= «utf-8»?> <!DOCTYPE xsl:stylesheet> <xsl:stylesheet version= «1.0» xmlns:xsl= «http://www.w3.org/1999/XSL/Transform»> <xsl:output xmlns= «http://www.w3.org/TR/xhtml1/strict» doctype-public=»-//W3C//DTD XHTML 1.0 Strict//EN» encoding= «utf-8» indent= «yes» method= «html» omit-xml-declaration= «no» version= «1.0» media-type= «text/xml»/> <!-- СписокЭлементовИнфосистемы → <xsl:template match=»/»> <xsl:apply-templates select=»/informationsystem»/> </xsl:template> <xsl:template match=»/informationsystem»> <!-- Получаем ID родительской группы и записываем в переменную $group → <xsl:variable name= «group» select= «group»/> <!-- Обработка выбранных тэгов → <!-- Отображение записи информационной системы → <xsl:choose> <xsl:when test=»/informationsystem/group=1»> <xsl:value-of disable-output-escaping= «yes» select= «description»/> </xsl:when> <xsl:otherwise> <div id= «games»> <xsl:apply-templates select= «informationsystem_item[active=1]»/> </div> </xsl:otherwise> </xsl:choose> </xsl:template> <!-- ======================== → <!-- Данные об инф. элементах → <!-- ======================== → <xsl:template match= «informationsystem_item»> <xsl:if test= «image_small!=''»> <a href=»{property_value/links}» target=»_parent»> <img src=»{dir}{image_small}» width= «740» height= «230» alt=»{name}»/> <span> <xsl:value-of disable-output-escaping= «yes» select= «name»/> <xsl:value-of disable-output-escaping= «yes» select= «description»/> </span> </a> </xsl:if> </xsl:template> </xsl:stylesheet>
В шаблоне основного макета сайта (либо в макете Главной страницы) размещаем необходимые CSS стили
.coin-slider { overflow: hidden; zoom: 1; position: relative; } .coin-slider a{ text-decoration: none; outline: none; border: none; } .cs-buttons { font-size: 0px; padding: 10px; float: left; } .cs-buttons a { margin-left: 5px; height: 10px; width: 10px; float: left; border: 1px solid #B8C4CF; color: #B8C4CF; text-indent: -1000px; } .cs-active { background-color: #B8C4CF; color: #FFFFFF; } .cs-title { width: 545px; padding: 10px; background-color: #000000; color: #FFFFFF; } .cs-prev, .cs-next { background-color: #000000; color: #FFFFFF; padding: 0px 10px; }
Далее в <head> размещаем ссылку на javascript
<script type= «text/javascript» src= «coin-slider.js»></script> А это сам javascript (размеры слайдера меняются в самом конце скрипта):
/** * Coin Slider — Unique jQuery Image Slider * @version: 1.0 — (2010/04/04) * @requires jQuery v1.2.2 or later * @author Ivan Lazarevic * Examples and documentation at: http://workshop.rs/projects/coin-slider/ * Licensed under MIT licence: * http://www.opensource.org/licenses/mit-license.php **/ (function ($) { var params = new Array; var order = new Array; var images = new Array; var links = new Array; var linksTarget = new Array; var titles = new Array; var interval = new Array; var imagePos = new Array; var appInterval = new Array; var squarePos = new Array; var reverse = new Array; $.fn.coinslider= $.fn.CoinSlider = function (options){ init = function (el){ order[el.id] = new Array (); // order of square appereance images[el.id] = new Array (); links[el.id] = new Array (); linksTarget[el.id] = new Array (); titles[el.id] = new Array (); imagePos[el.id] = 0; squarePos[el.id] = 0; reverse[el.id] = 1; params[el.id] = $.extend ({}, $.fn.coinslider.defaults, options); // create images, links and titles arrays $.each ($ ('#'+el.id+' img'), function (i,item){ images[el.id][i] = $ (item).attr ('src'); links[el.id][i] = $ (item).parent ().is ('a')? $ (item).parent ().attr ('href'): ''; linksTarget[el.id][i] = $ (item).parent ().is ('a')? $ (item).parent ().attr ('target'): ''; titles[el.id][i] = $ (item).next ().is ('span')? $ (item).next ().html (): ''; $ (item).hide (); $ (item).next ().hide (); }); // set panel $ (el).css ({ 'background-image':'url ('+images[el.id][0]+')', 'width': params[el.id].width, 'height': params[el.id].height, 'position': 'relative', 'background-position': 'top left' }).wrap (»<div class='coin-slider' id='coin-slider-»+el.id+»' /> «); // create title bar $ ('#'+el.id).append (»<div class='cs-title' id='cs-title-»+el.id+»' style='position: absolute; bottom:0; left: 0; z-index: 1000;'></div> «); $.setFields (el); if (params[el.id].navigation) $.setNavigation (el); $.transition (el,0); $.transitionCall (el); } // squares positions $.setFields = function (el){ tWidth = sWidth = parseInt (params[el.id].width/params[el.id].spw); tHeight = sHeight = parseInt (params[el.id].height/params[el.id].sph); counter = sLeft = sTop = 0; tgapx = gapx = params[el.id].width — params[el.id].spw*sWidth; tgapy = gapy = params[el.id].height — params[el.id].sph*sHeight; for (i=1;i ≤ params[el.id].sph;i++){ gapx = tgapx; if (gapy > 0){ gapy--; sHeight = tHeight+1; } else { sHeight = tHeight; } for (j=1; j ≤ params[el.id].spw; j++){ if (gapx > 0){ gapx--; sWidth = tWidth+1; } else { sWidth = tWidth; } order[el.id][counter] = i+''+j; counter++; if (params[el.id].links) $ ('#'+el.id).append (»<a href='»+links[el.id][0]+»' class='cs-»+el.id+»' id='cs-»+el.id+i+j+»' style='width:»+sWidth+ «px; height:»+sHeight+ «px; float: left; position: absolute;'></a> «); else $ ('#'+el.id).append (»<div class='cs-»+el.id+»' id='cs-»+el.id+i+j+»' style='width:»+sWidth+ «px; height:»+sHeight+ «px; float: left; position: absolute;'></div> «); // positioning squares $ (»#cs-»+el.id+i+j).css ({ 'background-position': -sLeft +'px '+ (-sTop+'px'), 'left': sLeft, 'top': sTop }); sLeft += sWidth; } sTop += sHeight; sLeft = 0; } $ ('.cs-'+el.id).mouseover (function (){ $ ('#cs-navigation-'+el.id).show (); }); $ ('.cs-'+el.id).mouseout (function (){ $ ('#cs-navigation-'+el.id).hide (); }); $ ('#cs-title-'+el.id).mouseover (function (){ $ ('#cs-navigation-'+el.id).show (); }); $ ('#cs-title-'+el.id).mouseout (function (){ $ ('#cs-navigation-'+el.id).hide (); }); if (params[el.id].hoverPause){ $ ('.cs-'+el.id).mouseover (function (){ params[el.id].pause = true; }); $ ('.cs-'+el.id).mouseout (function (){ params[el.id].pause = false; }); $ ('#cs-title-'+el.id).mouseover (function (){ params[el.id].pause = true; }); $ ('#cs-title-'+el.id).mouseout (function (){ params[el.id].pause = false; }); } }; $.transitionCall = function (el){ clearInterval (interval[el.id]); delay = params[el.id].delay + params[el.id].spw*params[el.id].sph*params[el.id].sDelay; interval[el.id] = setInterval (function () { $.transition (el) }, delay); } // transitions $.transition = function (el,direction){ if (params[el.id].pause == true) return; $.effect (el); squarePos[el.id] = 0; appInterval[el.id] = setInterval (function () { $.appereance (el,order[el.id][squarePos[el.id]]) },params[el.id].sDelay); $ (el).css ({ 'background-image': 'url ('+images[el.id][imagePos[el.id]]+')' }); if (typeof (direction) == «undefined») imagePos[el.id]++; else if (direction == 'prev') imagePos[el.id]--; else imagePos[el.id] = direction; if (imagePos[el.id] == images[el.id].length) { imagePos[el.id] = 0; } if (imagePos[el.id] == -1){ imagePos[el.id] = images[el.id].length-1; } $ ('.cs-button-'+el.id).removeClass ('cs-active'); $ ('#cs-button-'+el.id+»-»+ (imagePos[el.id]+1)).addClass ('cs-active'); if (titles[el.id][imagePos[el.id]]){ $ ('#cs-title-'+el.id).css ({ 'opacity': 0 }).animate ({ 'opacity': params[el.id].opacity }, params[el.id].titleSpeed); $ ('#cs-title-'+el.id).html (titles[el.id][imagePos[el.id]]); } else { $ ('#cs-title-'+el.id).css ('opacity',0); } }; $.appereance = function (el,sid){ $ ('.cs-'+el.id).attr ('href',links[el.id][imagePos[el.id]]).attr ('target',linksTarget[el.id][imagePos[el.id]]); if (squarePos[el.id] == params[el.id].spw*params[el.id].sph) { clearInterval (appInterval[el.id]); return; } $ ('#cs-'+el.id+sid).css ({ opacity: 0, 'background-image': 'url ('+images[el.id][imagePos[el.id]]+')' }); $ ('#cs-'+el.id+sid).animate ({ opacity: 1 }, 300); squarePos[el.id]++; }; // navigation $.setNavigation = function (el){ // create prev and next $ (el).append (»<div id='cs-navigation-»+el.id+»'></div> «); $ ('#cs-navigation-'+el.id).hide (); $ ('#cs-navigation-'+el.id).append (»<a href='#' id='cs-prev-»+el.id+»' class='cs-prev'>prev</a> «); $ ('#cs-navigation-'+el.id).append (»<a href='#' id='cs-next-»+el.id+»' class='cs-next'>next</a> «); $ ('#cs-prev-'+el.id).css ({ 'position' : 'absolute', 'top' : params[el.id].height/2 — 15, 'left' : 0, 'z-index' : 1001, 'line-height': '30px', 'opacity' : params[el.id].opacity }).click (function (e){ e.preventDefault (); $.transition (el,'prev'); $.transitionCall (el); }).mouseover (function (){ $ ('#cs-navigation-'+el.id).show () }); $ ('#cs-next-'+el.id).css ({ 'position' : 'absolute', 'top' : params[el.id].height/2 — 15, 'right' : 0, 'z-index' : 1001, 'line-height': '30px', 'opacity' : params[el.id].opacity }).click (function (e){ e.preventDefault (); $.transition (el); $.transitionCall (el); }).mouseover (function (){ $ ('#cs-navigation-'+el.id).show () }); // image buttons $ (»<div id='cs-buttons-»+el.id+»' class='cs-buttons'></div> «).appendTo ($ ('#coin-slider-'+el.id)); for (k=1;k<images[el.id].length+1;k++){ $ ('#cs-buttons-'+el.id).append (»<a href='#' class='cs-button-»+el.id+»' id='cs-button-»+el.id+»-»+k+»'> «+k+»</a> «); } $.each ($ ('.cs-button-'+el.id), function (i,item){ $ (item).click (function (e){ $ ('.cs-button-'+el.id).removeClass ('cs-active'); $ (this).addClass ('cs-active'); e.preventDefault (); $.transition (el,i); $.transitionCall (el); }) }); $ ('#cs-navigation-'+el.id+' a').mouseout (function (){ $ ('#cs-navigation-'+el.id).hide (); params[el.id].pause = false; }); $ (»#cs-buttons-»+el.id).css ({ 'left' : '50%', 'margin-left' : -images[el.id].length*15/2-5, 'position' : 'relative' }); } // effects $.effect = function (el){ effA = ['random','swirl','rain','straight']; if (params[el.id].effect == '') eff = effA[Math.floor (Math.random ()* (effA.length))]; else eff = params[el.id].effect; order[el.id] = new Array (); if (eff == 'random'){ counter = 0; for (i=1;i ≤ params[el.id].sph;i++){ for (j=1; j ≤ params[el.id].spw; j++){ order[el.id][counter] = i+''+j; counter++; } } $.random (order[el.id]); } if (eff == 'rain') { $.rain (el); } if (eff == 'swirl') $.swirl (el); if (eff == 'straight') $.straight (el); reverse[el.id] *= -1; if (reverse[el.id] > 0){ order[el.id].reverse (); } } // shuffle array function $.random = function (arr) { var i = arr.length; if (i == 0) return false; while (--i) { var j = Math.floor (Math.random () * (i + 1)) ; var tempi = arr[i]; var tempj = arr[j]; arr[i] = tempj; arr[j] = tempi; } } //swirl effect by milos popovic $.swirl = function (el){ var n = params[el.id].sph; var m = params[el.id].spw; var x = 1; var y = 1; var going = 0; var num = 0; var c = 0; var dowhile = true; while (dowhile) { num = (going==0 || going==2)? m: n; for (i=1;i≤num;i++){ order[el.id][c] = x+''+y; c++; if (i!=num){ switch (going){ case 0: y++; break; case 1: x++; break; case 2: y--; break; case 3: x--; break; } } } going = (going+1)%4; switch (going){ case 0: m--; y++; break; case 1: n--; x++; break; case 2: m--; y--; break; case 3: n--; x--; break; } check = $.max (n,m) — $.min (n,m); if (m≤check && n≤check) dowhile = false; } } // rain effect $.rain = function (el){ var n = params[el.id].sph; var m = params[el.id].spw; var c = 0; var to = to2 = from = 1; var dowhile = true; while (dowhile){ for (i=from;i≤to;i++){ order[el.id][c] = i+''+parseInt (to2-i+1); c++; } to2++; if (to < n && to2 < m && n<m){ to++; } if (to < n && n>=m){ to++; } if (to2 > m){ from++; } if (from > to) dowhile= false; } } // straight effect $.straight = function (el){ counter = 0; for (i=1;i ≤ params[el.id].sph;i++){ for (j=1; j ≤ params[el.id].spw; j++){ order[el.id][counter] = i+''+j; counter++; } } } $.min = function (n,m){ if (n>m) return m; else return n; } $.max = function (n,m){ if (n<m) return m; else return n; } this.each ( function (){ init (this); } ) ; }; // default values $.fn.coinslider.defaults = { width: 565, // width of slider panel height: 290, // height of slider panel spw: 7, // squares per width sph: 5, // squares per height delay: 3000, // delay between images in ms sDelay: 30, // delay beetwen squares in ms opacity: 0.7, // opacity of title and navigation titleSpeed: 500, // speed of title appereance in ms effect: '', // random, swirl, rain, straight navigation: true, // prev next and buttons links: true, // show images as links hoverPause: true // pause on hover }; }) (jQuery);
PHP код подключения слайдера в макете Главной страницы:
<?php // СЛАЙДЕР if (Core::moduleIsActive ('informationsystem')) { $Informationsystem_Controller_Show = new Informationsystem_Controller_Show ( Core_Entity::factory ('Informationsystem', 15) ) ; $Informationsystem_Controller_Show ->xsl ( Core_Entity::factory ('Xsl')->getByName ('СписокЭлементовИнфосистемыСлайдер') ) ->groupsMode ('none') ->itemsForbiddenTags (array ('text')) ->group (FALSE) ->limit (5) ->show (); } ? >
Все, наш слайдер готов.
Сайт разработчиков слайдера — workshop.rs.
