GIO DEMO SLIDER © 2015
HTML EXAMPLE © 2015
<h1> GIO DEMO SLIDER </h1>
<div id=gioSlider style="width:100%; position:relative; overflow:hidden" onclick="doClick()" >
<div class="gioSliderInner" id='gioSliderInner' style="width:100%; "><img id=gioSliderImg src="images/slide0.jpg" style="width:100%"></div>
</div>
<script>
var GS = new GioSlider() ;
/*
GS.setImageList( new Array(
"images/slide0.jpg", // sala
"images/slide1.jpg", // logo colori egioiasia
"images/slide2.jpg", // paeaggio dolomiti
"images/slide3.jpg", // quadro casa
"images/slide4.jpg", // arte di amare
"images/slide5.jpg", // cittadottiamo
"images/slide6.jpg", // medju
"images/slide7.jpg" // egioiasia
) ) ;
GS.setLinkList( new Array(
"https://www.youtube.com/watch?v=32hKqOsnk2M",
"http://www.egioiasia.com/",
"images/slide2.jpg",
"images/slide3.jpg",
"https://www.youtube.com/watch?v=32hKqOsnk2M",
"http://www.nuoviorizzonti.org/index.php?option=com_content&view=article&id=476&Itemid=123&lang=it",
"http://www.cavalieridellaluce.net/orizzonti-di-pace/",
"http://www.egioiasia.com/"
) ) ;
*/
GS.setImageLinkList( new Array(
"images/slide0.jpg", "https://www.youtube.com/watch?v=32hKqOsnk2M", // sala
"images/slide1.jpg", "http://www.egioiasia.com/", // logo colori egioiasia
"images/slide2.jpg", "images/slide2.jpg", // paesaggio dolomiti
"images/slide3.jpg", "images/slide3.jpg", // quadro casa
"images/slide4.jpg", "https://www.youtube.com/watch?v=32hKqOsnk2M", // arte di amare
"images/slide5.jpg", "http://www.nuoviorizzonti.org/index.php?option=com_content&view=article&id=476&Itemid=123&lang=it", // cittadottiamo
"images/slide6.jpg", "http://www.cavalieridellaluce.net/orizzonti-di-pace/", // medju
"images/slide7.jpg", "http://www.egioiasia.com/" // egioiasia
) ) ;
GS.setEffectList( new Array( 5, 7, 9 ) ) ;
GS.setEffectList( new Array( 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17 ) ) ;
GS.start( 30 ) ;
function doClick() {
GS.doClick() ;
}
TIPOLOGIE DI EFFETTI:
1) strisce verticali basso alto sinistra destra
2) strisce verticali basso alto destra sinistra
3) strisce verticali alto basso sinistra destra
4) strisce verticali alto basso destra sinistra
5) strisce verticali alternate alto basso sinistra destra
6) strisce verticali alternate alto basso destra sinistra
7) strisce verticali tendina sinistra destra
8) strisce verticali tendina destra sinistra
9) immagine entra da destra
10) immagine entra da sinistra
11) immagine entra da basso
12) immagine entra da alto
13) fade
14) strisce verticali fade alto basso sinistra destra
15) strisce verticali fade alto basso destra sinistra
JAVASCRIPT CODE © 2015
// <script> // this line was added just for my online editor problem :)
/*
Copyright 2015 Giovanni Orlandi, orlangio@gmail.com
Licensed under the Apache License, Version 2.0 (the "License");
you may not use this file except in compliance with the License.
You may obtain a copy of the License at
http://www.apache.org/licenses/LICENSE-2.0
Unless required by applicable law or agreed to in writing, software
distributed under the License is distributed on an "AS IS" BASIS,
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
See the License for the specific language governing permissions and
limitations under the License.
*/
function GioSlider( innerDivName, innerImageId ) {
this.innerDivName = typeof innerDivName !== 'undefined' ? innerDivName : "gioSliderInner" ;
this.innerImageId = typeof innerImageId !== 'undefined' ? innerImageId : 'gioSliderImg';
this.imageList = new Array(
"images/slide1.jpg",
"images/slide2.jpg",
"images/slide3.jpg"
) ;
this.linkList = new Array(
"http://www.nuoviorizzonti.org/",
"http://www.nuoviorizzonti.org/",
"http://www.nuoviorizzonti.org/"
) ;
this.imageListLen = 3 ;
this.currentImageId = 0 ;
this.mainImg = document.getElementById(this.innerImageId) ;
this.WW = this.mainImg.width ;
this.HH = this.mainImg.height ;
this.bPS = Math.ceil( (this.WW > this.HH ? this.WW : this.HH) / 8 ) ;
this.intraTime = 9999 ;
this.currentEffect = 14 ;
this.currentEffectCounter = 14 ;
this.speed = 10 ;
this.effectList = new Array( 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17 ) ;
this.maxEffects = 17 ;
}
GioSlider.prototype.start = function( speed ) {
this.speed = typeof speed !== 'undefined' ? speed : this.speed ;
MYSELF = this ;
setInterval( function() { MYSELF.loopInterval() ; }, this.speed ) ;
}
GioSlider.prototype.setEffectList = function( effectList ) {
var arrayLength = effectList.length ;
if( arrayLength == undefined || arrayLength < 1 ) {
alert( "GioSlider setEffectList: needs array argument: " + arrayLength ) ;
return ;
}
this.effectList = effectList ;
this.maxEffects = effectList.length ;
}
GioSlider.prototype.loopInterval = function() {
if( ++this.intraTime > 130 ) {
this.mainImg = document.getElementById(this.innerImageId) ;
this.WW = this.mainImg.width ;
this.HH = this.mainImg.height ;
this.bPS = Math.ceil( (this.WW > this.HH ? this.WW : this.HH) / 8 ) ;
this.intraTime = 0 ;
this.creaPieceVert( this.currentImageId++ ) ;
this.currentEffectCounter = this.currentEffectCounter < this.maxEffects-1 ? this.currentEffectCounter+1 : 0 ;
this.currentEffect = this.effectList[this.currentEffectCounter] ;
//alert( "max:"+this.maxEffects+" current:"+this.currentEffectCounter ) ;
}
this.doEffect( this.currentEffect, this.intraTime ) ;
}
GioSlider.prototype.setImageList = function( imageList ) {
var arrayLength = imageList.length ;
if( arrayLength == undefined || arrayLength < 1 ) {
alert( "GioSlider setImageList: needs array argument: " + arrayLength ) ;
return ;
}
this.imageList = imageList ;
this.imageListLen = arrayLength ;
this.currentEffectCounter = 0 ;
} ;
GioSlider.prototype.setLinkList = function( linkList ) {
var arrayLength = linkList.length ;
if( arrayLength == undefined || arrayLength < 1 ) {
alert( "GioSlider setLinkList: needs array argument: " + arrayLength ) ;
return ;
}
this.linkList = linkList ;
} ;
GioSlider.prototype.setImageLinkList = function( imageLinkList ) {
var i, arrayLength = imageLinkList.length ;
if( arrayLength == undefined || arrayLength < 1 ) {
alert( "GioSlider setImageLinkList: needs array argument: " + arrayLength ) ;
return ;
}
this.linkList = [] ;
this.imageList = [] ;
for( i=0; 2*i < arrayLength ; i++ ) {
this.imageList.push( imageLinkList[2*i] ) ;
this.linkList.push( imageLinkList[2*i+1] ) ;
}
this.imageListLen = i ;
} ;
GioSlider.prototype.imageUrl = function( id ) {
id = id % this.imageListLen ;
return this.imageList[id] ;
}
GioSlider.prototype.linkUrl = function( id ) {
id = id % this.imageListLen ;
return this.linkList[id] ;
}
// return the base of standard piece ( 1/8 of largest side )
GioSlider.prototype.basePieceSize = function() {
this.mainImg = document.getElementById(this.innerImageId) ;
this.WW = mainImg.width ;
this.HH = mainImg.height ;
this.bPS = Math.ceil( (this.WW > this.HH ? this.WW : this.HH) / 8 ) ;
return this.bPS ;
}
// todo: l'immagine viene divisa in max 8x8 quadrati
// creare N elementi parziali
// definiti in % del img scaled base
// partendo da 1/8 dell'immagine
GioSlider.prototype.creaPieceVert = function ( currentImageId ) {
var i,
html='<img id='+this.innerImageId+' src="'+this.imageUrl(currentImageId)+'" style="width:100%">' ;
for( i=0 ; i<8 ; i++ ) {
dd = i * this.bPS ;
html += '<div class="GSBox" id="GSp'+i+'" style="left: '+dd+'px; top: 0px; width: '+this.bPS+'px; height: '+this.HH+
'px; z-index: 1; position: absolute; opacity: 0; background: url('+this.imageUrl(currentImageId+1)+') -'+dd+
'px -0px no-repeat ; background-size: '+this.WW+'px '+this.HH+'px ;"></div>\n' ;
}
document.getElementById(this.innerDivName).innerHTML = html ;
}
GioSlider.prototype.minmax = function( vmin, vgen, vmax ) {
if( vgen < vmin ) return vmin ;
if( vgen > vmax ) return vmax ;
return vgen ;
}
GioSlider.prototype.doEffect = function( id, intratime ) {
var i ;
switch ( id ) {
case 1:
for( i=0 ; i<8 ; i++ ) {
var h = this.minmax( 0, this.HH-intratime*20+i*120, this.HH ) ;
document.getElementById("GSp"+i).style.top = h+"px" ;
document.getElementById("GSp"+i).style.opacity = 1-h/this.HH ;
document.getElementById("GSp"+i).style.height = this.minmax( 0, this.HH-h, this.HH )+"px" ;
}
break;
case 2:
for( i=0 ; i<8 ; i++ ) {
var h = this.minmax( 0, this.HH-intratime*20+(7-i)*120, this.HH ) ;
document.getElementById("GSp"+i).style.top = h+"px" ;
document.getElementById("GSp"+i).style.opacity = 1-h/this.HH ;
document.getElementById("GSp"+i).style.height = this.minmax( 0, this.HH-h, this.HH )+"px" ;
}
break;
case 3:
for( i=0 ; i<8 ; i++ ) {
var h = this.minmax( 0, this.HH-intratime*20+(7-i)*120, this.HH ) ;
document.getElementById("GSp"+i).style.top = -h+"px" ;
document.getElementById("GSp"+i).style.opacity = 1-h/this.HH ;
//document.getElementById("p"+i).style.height = minmax( 0, HH-h, HH )+"px" ;
}
break;
case 4:
for( i=0 ; i<8 ; i++ ) {
var h = this.minmax( 0, this.HH-intratime*20+i*120, this.HH ) ;
document.getElementById("GSp"+i).style.top = -h+"px" ;
document.getElementById("GSp"+i).style.opacity = 1-h/this.HH ;
//document.getElementById("p"+i).style.height = minmax( 0, HH-h, HH )+"px" ;
}
break;
case 5:
for( i=0 ; i<8 ; i++ ) {
var h = this.minmax( 0, this.HH-intratime*20+i*120, this.HH ) ;
document.getElementById("GSp"+i).style.top = -h+"px" ;
document.getElementById("GSp"+i).style.opacity = 1-h/this.HH ;
//document.getElementById("p"+i).style.height = minmax( 0, HH-h, HH )+"px" ;
i++ ;
var h = this.minmax( 0, this.HH-intratime*20+i*120, this.HH ) ;
document.getElementById("GSp"+i).style.top = h+"px" ;
document.getElementById("GSp"+i).style.opacity = 1-h/this.HH ;
document.getElementById("GSp"+i).style.height = this.minmax( 0, this.HH-h, this.HH )+"px" ;
}
break;
case 6:
for( i=0 ; i<8 ; i++ ) {
var h = this.minmax( 0, this.HH-intratime*20+(7-i)*120, this.HH ) ;
document.getElementById("GSp"+i).style.top = -h+"px" ;
document.getElementById("GSp"+i).style.opacity = 1-h/this.HH ;
//document.getElementById("p"+i).style.height = minmax( 0, HH-h, HH )+"px" ;
i++ ;
var h = this.minmax( 0, this.HH-intratime*20+(7-i)*120, this.HH ) ;
document.getElementById("GSp"+i).style.top = h+"px" ;
document.getElementById("GSp"+i).style.opacity = 1-h/this.HH ;
document.getElementById("GSp"+i).style.height = this.minmax( 0, this.HH-h, this.HH )+"px" ;
}
break;
case 7:
for( i=0 ; i<8 ; i++ ) {
var w = Math.floor( this.minmax( 0, intratime*10-160+i*20, this.bPS ) ) ;
document.getElementById("GSp"+i).style.width = w+"px" ;
document.getElementById("GSp"+i).style.opacity = w/this.bPS ;
}
break;
case 8:
for( i=0 ; i<8 ; i++ ) {
var w = Math.floor( this.minmax( 0, intratime*10-i*20, this.bPS ) ) ;
document.getElementById("GSp"+i).style.width = w+"px" ;
document.getElementById("GSp"+i).style.opacity = w/this.bPS ;
}
break;
case 9:
var wpos = Math.floor( this.minmax( 0, this.WW+80-intratime*this.WW/80, this.WW ) ) ;
document.getElementById("GSp0").style.left = wpos+"px" ;
document.getElementById("GSp0").style.width = this.WW+"px" ;
document.getElementById("GSp0").style.opacity = 2-wpos/this.WW*2 ;
break;
case 10:
var wpos = Math.floor( this.minmax( 0, this.WW+80-intratime*this.WW/80, this.WW ) ) ;
document.getElementById("GSp0").style.left = -wpos+"px" ;
document.getElementById("GSp0").style.width = this.WW+"px" ;
document.getElementById("GSp0").style.opacity = 2-wpos/this.WW*2 ;
break;
case 11:
var hpos = Math.floor( this.minmax( 0, this.HH+80-intratime*this.HH/80, this.HH ) ) ;
document.getElementById("GSp0").style.top = hpos+"px" ;
document.getElementById("GSp0").style.width = this.WW+"px" ;
document.getElementById("GSp0").style.opacity = 2-hpos/this.HH*2 ;
break;
case 12:
var hpos = Math.floor( this.minmax( 0, this.HH+80-intratime*this.HH/80, this.HH ) ) ;
document.getElementById("GSp0").style.top = -hpos+"px" ;
document.getElementById("GSp0").style.width = this.WW+"px" ;
document.getElementById("GSp0").style.opacity = 2-hpos/this.HH*2 ;
break;
case 13:
var hpos = Math.floor( this.minmax( 0, this.HH+80-intratime*this.HH/80, this.HH ) ) ;
document.getElementById("GSp0").style.width = this.WW+"px" ;
document.getElementById("GSp0").style.opacity = 2-hpos/this.HH*2 ;
break;
case 14:
for( i=0 ; i<8 ; i++ ) {
var h = this.minmax( 0, this.HH-intratime*20+i*120, this.HH ) ;
document.getElementById("GSp"+i).style.top = 0+"px" ;
document.getElementById("GSp"+i).style.opacity = 1-h/this.HH ;
document.getElementById("GSp"+i).style.height = this.minmax( 0, this.HH-h, this.HH )+"px" ;
}
break;
case 15:
for( i=0 ; i<8 ; i++ ) {
var h = this.minmax( 0, this.HH-intratime*20+(7-i)*120, this.HH ) ;
document.getElementById("GSp"+i).style.top = 0+"px" ;
document.getElementById("GSp"+i).style.opacity = 1-h/this.HH ;
document.getElementById("GSp"+i).style.height = this.minmax( 0, this.HH-h, this.HH )+"px" ;
}
break;
case 16:
var w = Math.floor( this.minmax( 0, this.WW*intratime/80, this.WW ) ) ;
document.getElementById("GSp0").style.width = w+"px" ;
document.getElementById("GSp0").style.height = w*this.HH/this.WW+"px" ;
document.getElementById("GSp0").style.opacity = w/this.WW*2 ;
break;
case 17:
var w = Math.floor( this.minmax( 0, this.WW*intratime/80, this.WW ) ) ;
document.getElementById("GSp0").style.left = (this.WW-w)+"px" ;
document.getElementById("GSp0").style.width = w+"px" ;
document.getElementById("GSp0").style.height = w*this.HH/this.WW+"px" ;
document.getElementById("GSp0").style.opacity = w/this.WW*2 ;
break;
}
}
GioSlider.prototype.doClick = function() {
document.location = this.linkUrl( this.currentImageId ) ;
} ;
