Главная // Блог // HOSTCMS v.6. Внедряем coin-slider

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

/ 06 июля 2013 г. / 6125
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, веб дизайн

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

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

Как улучшить пользовательский опыт с помощью точной обратной связи с пользователями
Как улучшить пользовательский опыт с помощью точной обратной связи с пользователями
На каждое действие в Интернете должна быть реакция. Обратная связь может сообщить пользователю, было ли действие успешным или нет, но в идеале она расскажет ему больше, например, что делать дальше или почему действие занимает так много времени.
4 июня 2023 / 36 ⤑
9 шагов для создания веб-сайта на HostCMS
9 шагов для создания веб-сайта на HostCMS

Вы можете создать веб-сайт менее чем за 1 час. Вам также не нужно быть техническим мастером.

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

11 октября 2022 / 390 ⤑
Для чего нужен редизайн сайта
Для чего нужен редизайн сайта
Редизайн сайта – это комплекс мероприятий, направленных на обновление ресурса, в результате которых он получает актуальное оформление. Обновление может коснуться сайта любой компании, даже всемирно известной, так как быстро меняющаяся жизнь заставляет шагать в ногу со временем.
9 августа 2015 / 4315 ⤑
Ключевые Элементы ясного и понятного сайта без “мусора”
Ключевые Элементы ясного и понятного сайта без “мусора”
В процессе создания и развития своего бренда неизбежным становится обязательное и качественное присутствие в Интернете с аккуратно оформленной веб страницей без “мусорного” кода. Назначение такой страницы заключается в привлечении внимания целевой аудитории и сохранения уже существующих клиентов.
29 марта 2016 / 6708 ⤑
HOSTCMS v.6. Вывод комментариев к товарам магазина
HOSTCMS v.6. Вывод комментариев к товарам магазина
Выводим на Главной или отдельной странице сайта комментарии к товарам, оставляемые посетителями или покупателями...
7 августа 2014 / 3803 ⤑
Веб-дизайн в 2023 году: бренды флиртуют с цветом, дизайном, социальными сетями и информацией
Веб-дизайн в 2023 году: бренды флиртуют с цветом, дизайном, социальными сетями и информацией
Люди больше не интересуются общими веб-сайтами. Несмотря на то, что сайт эстетически и навигационно приятен, он должен быть привлекательным для пользователя. Большинство брендов уже начали работать над этим и наняли дизайнеров веб-сайтов, которые могли бы им помочь.
7 января 2023 / 384 ⤑
Мы используем файлы cookie. Они помогают улучшить ваше взаимодействие с сайтом.