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.

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

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

10 простых способов заработать деньги в качестве Веб-дизайнера
10 простых способов заработать деньги в качестве Веб-дизайнера
Недостатком создания веб-сайтов для зарабатывания денег является то, что они гиперконкурентоспособны. Всегда есть кто-то немного лучше вас, готовый создать один и тот же сайт за немного меньшую сумму, чем вы.

Веб дизайн в 2021 году
Веб дизайн в 2021 году

Итак, что мы можем ожидать в веб-дизайне в 2021 году?

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


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

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

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

Некоторые функции кросс-браузерных DevTools или "инструментов разработчика", о которых вы, возможно, не знаете
Некоторые функции кросс-браузерных DevTools или "инструментов разработчика", о которых вы, возможно, не знаете
Мы проводим много времени в DevTools, и уверены, что вы тоже. Иногда даже переключаемся между ними, особенно когда отлаживаем кроссбраузерные проблемы. DevTools во многом похожи на сами браузеры — не все функции DevTools одного браузера будут такими же или поддерживаться в DevTools другого браузера.

QRcode

2010-2024 © Веб студия iNikSite.ru (г. Подольск). Все права сохранены.

Цены на сайте носят ознакомительный характер и не являются публичной офертой! Просим уточнять цены при отправке заявки в нашу компанию. У нас действуют специальные предложения и скидки на различные варианты исполнения заказа и 100% предоплату!

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