Scribd
Upload
54 views2 pages

jqFancyTransitions 1 8 Min Js

This document contains the source code for a jQuery plugin called jqFancyTransitions that provides fancy image transitions on web pages. It initializes the plugin on selected elements, preloads images and links, then uses intervals to transition image strips in and out to create effects like zipper, wave or curtain. It also supports navigation buttons, random ordering, and displaying image titles.

Uploaded by

anon_262674212
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as TXT, PDF, TXT or read online on Scribd
54 views2 pages

jqFancyTransitions 1 8 Min Js

This document contains the source code for a jQuery plugin called jqFancyTransitions that provides fancy image transitions on web pages. It initializes the plugin on selected elements, preloads images and links, then uses intervals to transition image strips in and out to create effects like zipper, wave or curtain. It also supports navigation buttons, random ordering, and displaying image titles.

Uploaded by

anon_262674212
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as TXT, PDF, TXT or read online on Scribd
You are on page 1/ 2

/**

* jqFancyTransitions - jQuery plugin


* @version: 1.8 (2010/06/13)
* @requires jQuery v1.2.2 or later
* @author Ivan Lazarevic
* Examples and documentation at: http://www.workshop.rs/projects/jqfancytransit
ions
* Dual licensed under the MIT and GPL licenses:
* http://www.opensource.org/licenses/mit-license.php
* http://www.gnu.org/licenses/gpl.html
**/
(function($){var opts=new Array;var level=new Array;var img=new Array;var links=
new Array;var titles=new Array;var order=new Array;var imgInc=new Array;var inc=
new Array;var stripInt=new Array;var imgInt=new Array;$.fn.jqFancyTransitions=$.
fn.jqfancytransitions=function(options){init=function(el){opts[el.id]=$.extend({
},$.fn.jqFancyTransitions.defaults,options);img[el.id]=new Array();links[el.id]=
new Array();titles[el.id]=new Array();order[el.id]=new Array();imgInc[el.id]=0;i
nc[el.id]=0;params=opts[el.id];if(params.effect=='zipper'){params.direction='alt
ernate';params.position='alternate';}
if(params.effect=='wave'){params.direction='alternate';params.position='top';}
if(params.effect=='curtain'){params.direction='alternate';params.position='curta
in';}
stripWidth=parseInt(params.width/params.strips);gap=params.width-stripWidth*para
ms.strips;stripLeft=0;$.each($('#'+el.id+' img'),function(i,item){img[el.id][i]=
$(item).attr('src');links[el.id][i]=$(item).next().attr('href');titles[el.id][i]
=$(item).attr('alt')?$(item).attr('alt'):'';$(item).hide();});$('#'+el.id).css({
'background-image':'url('+img[el.id][0]+')','width':params.width,'height':params
.height,'position':'relative','background-position':'top left'});$('#'+el.id).ap
pend("<div class='ft-title' id='ft-title-"+el.id+"' style='position: absolute; b
ottom:0; left: 0; z-index: 1000; color: #fff; background-color: #000; '>"+titles
[el.id][0]+"</div>");if(titles[el.id][imgInc[el.id]])
$('#ft-title-'+el.id).css('opacity',opts[el.id].titleOpacity);else
$('#ft-title-'+el.id).css('opacity',0);if(params.navigation){$.navigation(el);$(
'#ft-buttons-'+el.id).children().first().addClass('ft-button-'+el.id+'-active');
}
odd=1;for(j=1;j<params.strips+1;j++){if(gap>0){tstripWidth=stripWidth+1;gap--;}e
lse{tstripWidth=stripWidth;}
if(params.links)
$('#'+el.id).append("<a href='"+links[el.id][0]+"' class='ft-"+el.id+"' id='ft-"
+el.id+j+"' style='width:"+tstripWidth+"px; height:"+params.height+"px; float: l
eft; position: absolute;outline:none;'></a>");else
$('#'+el.id).append("<div class='ft-"+el.id+"' id='ft-"+el.id+j+"' style='width:
"+tstripWidth+"px; height:"+params.height+"px; float: left; position: absolute;'
></div>");$("#ft-"+el.id+j).css({'background-position':-stripLeft+'px top','left
':stripLeft});stripLeft+=tstripWidth;if(params.position=='bottom')
$("#ft-"+el.id+j).css('bottom',0);if(j%2==0&&params.position=='alternate')
$("#ft-"+el.id+j).css('bottom',0);if(params.direction=='fountain'||params.direct
ion=='fountainAlternate'){order[el.id][j-1]=parseInt(params.strips/2)-(parseInt(
j/2)*odd);order[el.id][params.strips-1]=params.strips;odd*=-1;}else{order[el.id]
[j-1]=j;}}
$('.ft-'+el.id).mouseover(function(){opts[el.id].pause=true;});$('.ft-'+el.id).m
ouseout(function(){opts[el.id].pause=false;});$('#ft-title-'+el.id).mouseover(fu
nction(){opts[el.id].pause=true;});$('#ft-title-'+el.id).mouseout(function(){opt
s[el.id].pause=false;});clearInterval(imgInt[el.id]);imgInt[el.id]=setInterval(f
unction(){$.transition(el)},params.delay+params.stripDelay*params.strips);};$.tr
ansition=function(el,direction){if(opts[el.id].pause==true)return;stripInt[el.id
]=setInterval(function(){$.strips(order[el.id][inc[el.id]],el)},opts[el.id].stri
pDelay);$('#'+el.id).css({'background-image':'url('+img[el.id][imgInc[el.id]]+')

'});if(typeof(direction)=="undefined")
imgInc[el.id]++;else
if(direction=='prev')
imgInc[el.id]--;else
imgInc[el.id]=direction;if(imgInc[el.id]==img[el.id].length){imgInc[el.id]=0;}
if(imgInc[el.id]==-1){imgInc[el.id]=img[el.id].length-1;}
if(titles[el.id][imgInc[el.id]]!=''){$('#ft-title-'+el.id).animate({opacity:0},o
pts[el.id].titleSpeed,function(){$(this).html(titles[el.id][imgInc[el.id]]).anim
ate({opacity:opts[el.id].titleOpacity},opts[el.id].titleSpeed);});}else{$('#ft-t
itle-'+el.id).animate({opacity:0},opts[el.id].titleSpeed);}
inc[el.id]=0;buttons=$('#ft-buttons-'+el.id).children();buttons.each(function(in
dex){if(index==imgInc[el.id]){$(this).addClass('ft-button-'+el.id+'-active');}el
se{$(this).removeClass('ft-button-'+el.id+'-active');}});if(opts[el.id].directio
n=='random')
$.fisherYates(order[el.id]);if((opts[el.id].direction=='right'&&order[el.id][0]=
=1)||opts[el.id].direction=='alternate'||opts[el.id].direction=='fountainAlterna
te')
order[el.id].reverse();};$.strips=function(itemId,el){temp=opts[el.id].strips;if
(inc[el.id]==temp){clearInterval(stripInt[el.id]);return;}
$('.ft-'+el.id).attr('href',links[el.id][imgInc[el.id]]);if(opts[el.id].position
=='curtain'){currWidth=$('#ft-'+el.id+itemId).width();$('#ft-'+el.id+itemId).css
({width:0,opacity:0,'background-image':'url('+img[el.id][imgInc[el.id]]+')'});$(
'#ft-'+el.id+itemId).animate({width:currWidth,opacity:1},1000);}else{$('#ft-'+el
.id+itemId).css({height:0,opacity:0,'background-image':'url('+img[el.id][imgInc[
el.id]]+')'});$('#ft-'+el.id+itemId).animate({height:opts[el.id].height,opacity:
1},1000);}
inc[el.id]++;};$.navigation=function(el){$('#'+el.id).append("<a href='#' id='ft
-prev-"+el.id+"' class='ft-prev'>prev</a>");$('#'+el.id).append("<a href='#' id=
'ft-next-"+el.id+"' class='ft-next'>next</a>");$('#ft-prev-'+el.id).css({'positi
on':'absolute','top':params.height/2-15,'left':0,'z-index':1001,'line-height':'3
0px','opacity':0.7}).click(function(e){e.preventDefault();$.transition(el,'prev'
);clearInterval(imgInt[el.id]);imgInt[el.id]=setInterval(function(){$.transition
(el)},params.delay+params.stripDelay*params.strips);});$('#ft-next-'+el.id).css(
{'position':'absolute','top':params.height/2-15,'right':0,'z-index':1001,'line-h
eight':'30px','opacity':0.7}).click(function(e){e.preventDefault();$.transition(
el);clearInterval(imgInt[el.id]);imgInt[el.id]=setInterval(function(){$.transiti
on(el)},params.delay+params.stripDelay*params.strips);});$("<div id='ft-buttons"+el.id+"'></div>").insertAfter($('#'+el.id));$('#ft-buttons-'+el.id).css({'text
-align':'right','padding-top':5,'width':opts[el.id].width});for(k=1;k<img[el.id]
.length+1;k++){$('#ft-buttons-'+el.id).append("<a href='#' class='ft-button-"+el
.id+"'>"+k+"</a>");}
$('.ft-button-'+el.id).css({'padding':5});$.each($('.ft-button-'+el.id),function
(i,item){$(item).click(function(e){e.preventDefault();$.transition(el,i);clearIn
terval(imgInt[el.id]);imgInt[el.id]=setInterval(function(){$.transition(el)},par
ams.delay+params.stripDelay*params.strips);})});}
$.fisherYates=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]=temp
j;arr[j]=tempi;}}
this.each(function(){init(this);});};$.fn.jqFancyTransitions.defaults={width:500
,height:332,strips:10,delay:5000,stripDelay:50,titleOpacity:0.7,titleSpeed:1000,
position:'alternate',direction:'fountainAlternate',effect:'',navigation:false,li
nks:false};})(jQuery);

You might also like