HOSTCMS v.6. Внедряем coin-slider

HOSTCMS v.6. Внедряем coin-slider
HOSTCMS v.6. Внедряем coin-slider

ПОСМОТРЕТЬ ДЕМО

СКАЧАТЬ coin-slider.js

Для работы 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.

Понравилась статья?
Будем признательны, если поделитесь в соцсетях или мессенджерах, а также присоединитесь к нашей группе Вконтакте. Будет интересно!

Вас может заинтересовать:

HOSTCMS v.6. Вывод комментариев к товарам магазина
HOSTCMS v.6. Вывод комментариев к товарам магазина
Выводим на Главной или отдельной странице сайта комментарии к товарам, оставляемые посетителями или покупателями...

18 блогов о графическом дизайне
18 блогов о графическом дизайне
Графический дизайн играет большую роль в дизайне пользовательского интерфейса. Кроме того, отличный дизайн пользовательского интерфейса повышает UX в десять раз. Следование блогам о графическом дизайне может стать отличным способом сохранить свой творческий потенциал!

HostCMS v.6. Вывод товаров по значению дополнительного свойства типа строка
HostCMS v.6. Вывод товаров по значению дополнительного свойства типа строка
Вам нужно вывести товары интернет-магазина по какому-то, заранее определенному, признаку? Для начала создаем дополнительное свойство товара, пройдя по цепочке «Интернет-магазин ⇒ Товар ⇒ Свойства товара».

Почему позитивные цвета важны в веб-дизайне
Почему позитивные цвета важны в веб-дизайне
Оптимизм и позитивность в дизайне - это гораздо больше, чем эстетический выбор. Эти элементы служат функциональной цели, влияя на поведение пользователей и восприятие бренда.

HOSTCMS v.6. Правильная семантическая микроразметка
HOSTCMS v.6. Правильная семантическая микроразметка
Не будем углубляться в терминологию и описание того, что означает микроразметка, т.к. об этом уже много чего написано и я беру за аксиому, что вы об этом уже знаете, раз читаете данную статью. Задача статьи описать более конкретный случай, а именно - использование микроразметки в XSL шаблонах HostCMS...

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

Мы используем файлы cookie. Они помогают улучшить ваше взаимодействие с сайтом.