http://www.average.org/mkgallery/
Uses mootools (1.2) http://www.mootools.net/
- Uses slideshow http://www.phatfusion.net/slideshow/
+ Uses multibox http://www.phatfusion.net/multibox/
+ Inspired by slideshow http://www.phatfusion.net/slideshow/
*/
/*
Use slideshow classes with the index generated by mkgallery.pl
*/
-var showControls = new Class({
-
- getOptions: function(){
- return {
- next: $empty,
- prev: $empty,
- stop: $empty,
- play: $empty,
- exit: $empty,
- }
- },
-
- initialize: function(name,options){
- this.setOptions(this.getOptions(), options)
-
- this.container = $(name)
-
- var buttons = ['prev','stop','play','next','exit','comm']
- buttons.each(function(el){
- var sub = new Element('div')
- if (this.options[el]) {
- sub.addEvent('click', function() {
- this.options[el]()
- }.bind(this))
- }
- sub.addClass('controlButton').setProperties({
- id: el,
- name: el,
- }).injectInside(this.container)
- },this)
- },
-
-})
-showControls.implement(new Options)
-
-/* Make overlay window and start slideshow */
-function showImage(id,doplay) {
- var i=rimgs[id]
- /* alert('show id='+id+' index='+i+' doplay='+doplay) */
- showwin.show()
- show.play(i)
- if (!doplay) {
- show.stop()
- }
- return false
-}
-
-/* Stop slideshow and return to index page */
-function showStop() {
- show.quit()
- showwin.hide()
- return false
-}
-
-/* List of lists of img variations. Each image variation is a three-element */
-/* array: [width, height, url]. Index of the outer array is the global ID. */
-var vimgs=[]
-/*
- * [
- * [ id, title, [
- * [ width, height, url ]
- * ...
- * ]
- * ...
- * ]
- * ...
- * ]
-*/
-/* resolve string ID to index No which is the index in vimgs[] array */
-var rimgs=[]
-
/* Initialize everything, to be called on domready */
function init_gallery() {
- $$('.conceal').each(function(el){
- el.setStyle('display', 'none')
- })
- $$('a.infoBox').each(function(el){
- var url=el.get('href')
- el.set('href',url+'?conceal')
- })
- $$('a.showStart').each(function(el){
- el.addEvent('click', showImage.bind(el,[el.get('id'),1]))
- })
- $$('a.showImage').each(function(el){
- el.addEvent('click', showImage.bind(el,[el.get('id'),0]))
- })
+
+ /* List of lists of img variations. Each image variation is a three-element
+ * array: [width, height, url]. Index of the outer array is the global ID.
+ *
+ * [
+ * [ id, title, [
+ * [ width, height, url ]
+ * ...
+ * ]
+ * ...
+ * ]
+ * ...
+ * ]
+ */
+ var vimgs=[];
+
+ /* resolve string ID to index No which is the index in vimgs[] array */
+ var rimgs=[];
+
+ /* Populate images list */
+
$$('div.varimages').each(function(el,i){
- rimgs[el.id] = i
- vimgs[i] = []
+ rimgs[el.id] = i;
+ vimgs[i] = [];
el.getElements('a').each(function(ael,j){
- dim = /(\d+)[^\d](\d+)/.exec(ael.text)
- w = dim[1]
- h = dim[2]
- vimgs[i][j]=[w,h,ael.href,el.id,el.title]
- })
- })
+ dim = /(\d+)[^\d](\d+)/.exec(ael.text);
+ w = dim[1];
+ h = dim[2];
+ vimgs[i][j]=[w,h,ael.href,el.id,el.title];
+ });
+ });
/* debugging output
- var msg='loaded '+vimgs.length+' image descriptions:'
+ var msg='loaded '+vimgs.length+' image descriptions:';
vimgs.each(function(vimg,i){
- msg+='\nid='+i
+ msg+='\nid='+i;
vimg.each(function(vimg,i){
- msg+='\n w='+vimg[0]+' h='+vimg[1]+' url='+vimg[2]
- })
- })
- alert(msg)
+ msg+='\n w='+vimg[0]+' h='+vimg[1]+' url='+vimg[2];
+ });
+ });
+ alert(msg);
/* end debugging output */
- var ovlparams = {}
- ovl = new overlay(ovlparams)
+ /* Initialize objects */
+
+ var ovlparams = {};
+ ovl = new overlay(ovlparams);
var iboxparams = {
overlay: ovl,
movieWidth: 640,
movieHeight: 480,
descClassName: 'infoBoxDesc',
- }
- ibox = new multiBox('infoBox', iboxparams)
+ };
+ ibox = new multiBox('infoBox', iboxparams);
var winparms = {
- /* onClick: showStop, /* temporarily */
- embed: ['slideshowControls'],
- }
- showwin = new showWindow('slideshowContainer',winparms)
+ tohide: 'indexContainer',
+ };
+ var showwin = new showWindow('slideshowContainer',winparms);
+
+ var ctlparams = {
+ };
+ var ctl = new Controls('slideshowControls','slideshowContainer',
+ ctlparams);
var showparms = {
- wait: 3000,
- effect: 'fade',
- duration: 1000,
- loop: false,
- thumbnails: false,
- onClick: function(i){alert(i)},
- comment: 'comm',
- }
- show = new slideShow('slideshowContainer',vimgs,showparms)
+ cbStart: function(){ showwin.show(); },
+ cbExit: function(){ showwin.hide(); },
+ };
+ var show = new Show(vimgs,showwin,ctl,showparms);
- var ctlparams = {
- next: function(){show.next()},
- prev: function(){show.previous()},
- stop: function(){show.stop()},
- play: function(){show.play()},
- exit: function(){showStop()},
- }
- ctl = new showControls('slideshowControls',ctlparams)
+ /* Update HTML */
+
+ $$('.conceal').each(function(el){
+ el.setStyle('display', 'none');
+ });
+ $$('a.infoBox').each(function(el){
+ var url=el.get('href');
+ el.set('href',url+'?conceal');
+ });
+
+ $$('a.showStart').each(function(el){
+ el.addEvent('click',
+ show.start.bind(show,[rimgs[el.get('id')],1]));
+ });
+ $$('a.showImage').each(function(el){
+ el.addEvent('click',
+ show.start.bind(show,[rimgs[el.get('id')],0]));
+ });
+
+ /* Determine if we need to go directly into show mode */
- parsedurl = parseUrl(document.URL)
- /* alert('Anchor: '+parsedurl['anchor']+'\nURL: '+document.URL) */
+ parsedurl = parseUrl(document.URL);
+ /* alert('Anchor: '+parsedurl['anchor']+'\nURL: '+document.URL); */
if ($chk(parsedurl['anchor'])){
- showImage(parsedurl['anchor'],0)
+ show.start(rimgs[parsedurl['anchor']],0);
}
}
+++ /dev/null
-\r
-/**************************************************************\r
-\r
- Script : slideShow\r
- Version : 1.3\r
- Authors : Samuel Birch\r
- Desc : transitions between images\r
- Licence : Open Source MIT Licence\r
-\r
-**************************************************************/\r
-\r
-var slideShow = new Class({\r
- \r
- getOptions: function(){\r
- return {\r
- effect: 'fade', //fade|wipe|slide|random\r
- duration: 2000,\r
- transition: Fx.Transitions.linear,\r
- direction: 'right', //top|right|bottom|left|random\r
- //color: false,\r
- wait: 5000,\r
- loop: true,\r
- thumbnails: false,\r
- thumbnailCls: 'outline',\r
- backgroundSlider: false, //change to be an instance.\r
- loadingCls: 'loading',\r
- onClick: false,\r
- comment: null,\r
- };\r
- },\r
-\r
- initialize: function(container, images, options){\r
- this.setOptions(this.getOptions(), options);\r
- \r
- this.container = $(container);\r
- this.container.setStyles({\r
- /* position: 'relative', */\r
- overflow: 'hidden'\r
- });\r
- if(this.options.onClick){\r
- this.container.addEvent('click', function(){\r
- this.options.onClick(this.imageLoaded);\r
- }.bind(this));\r
- }\r
- this.comm=this.options.comment;\r
-\r
- this.imagesHolder = new Element('div').setStyles({\r
- position: 'absolute',\r
- overflow: 'hidden',\r
- top: this.container.getStyle('height'),\r
- left: 0,\r
- width: '0px',\r
- height: '0px',\r
- display: 'none'\r
- }).injectInside(this.container);\r
- \r
- /*\r
- if($type(images) == 'string' && !this.options.thumbnails){\r
- var imageList = [];\r
- $$('.'+images).each(function(el){\r
- imageList.push(el.src);\r
- el.injectInside(this.imagesHolder);\r
- },this);\r
- this.images = imageList;\r
- \r
- }else if($type(images) == 'string' && this.options.thumbnails){\r
- var imageList = [];\r
- var srcList = [];\r
- this.thumbnails = $$('.'+images);\r
- this.thumbnails.each(function(el,i){\r
- srcList.push(el.href);\r
- imageList.push(el.getElement('img'));\r
- el.href = 'javascript:;';\r
- el.addEvent('click',function(){\r
- this.stop();\r
- this.play(i); \r
- }.bind(this,el,i));\r
- },this);\r
- this.images = srcList;\r
- this.thumbnailImages = imageList;\r
- \r
- if(this.options.backgroundSlider){\r
- this.bgSlider = new BackgroundSlider(this.thumbnailImages,{mouseOver: false, duration: this.options.duration, className: this.options.thumbnailCls, padding:{top:0,right:-2,bottom:-2,left:0}});\r
- this.bgSlider.set(this.thumbnailImages[0]);\r
- }\r
- \r
- }else{\r
- */\r
- this.images = images;\r
- /*\r
- }\r
- */\r
- \r
- this.loading = new Element('div').addClass(this.options.loadingCls).setStyles({\r
- position: 'absolute',\r
- top: 0,\r
- left: 0,\r
- zIndex: 3,\r
- display: 'none',\r
- width: this.container.getStyle('width'),\r
- height: this.container.getStyle('height')\r
- }).injectInside(this.container);\r
- \r
- this.oldImage = new Element('div').setStyles({\r
- position: 'absolute',\r
- overflow: 'hidden',\r
- top: 0,\r
- left: 0,\r
- opacity: 0,\r
- width: this.container.getStyle('width'),\r
- height: this.container.getStyle('height')\r
- }).injectInside(this.container);\r
- \r
- this.newImage = this.oldImage.clone();\r
- this.newImage.injectInside(this.container);\r
- \r
- \r
- \r
- this.timer = 0;\r
- this.image = -1;\r
- this.imageLoaded = 0;\r
- this.stopped = true;\r
- this.started = false;\r
- this.animating = false;\r
- window.addEvent('resize', this.reshow.bind(this));\r
- window.addEvent('scroll', this.reshow.bind(this));\r
- },\r
- \r
- load: function(){\r
- $clear(this.timer);\r
- this.loading.setStyle('display','block');\r
- this.image++;\r
- var i;\r
- var width;\r
- var height;\r
- var img;\r
- for (i=0;i<this.images[this.image].length;i++) {\r
- width = this.images[this.image][i][0];\r
- height = this.images[this.image][i][1];\r
- img = this.images[this.image][i][2];\r
- if (width >= this.width || height >= this.height) {\r
- break;\r
- }\r
- }\r
- /* alert('req1 image '+img); */\r
- delete this.imageObj;\r
- \r
- doLoad = true;\r
- this.imagesHolder.getElements('img').each(function(el){\r
- var src = this.images[this.image][i][2];\r
- /* alert('req2 image '+src); */\r
- if(el.src == src){\r
- this.imageObj = el;\r
- doLoad = false;\r
- this.add = false;\r
- this.show();\r
- }\r
- },this);\r
- \r
- if(doLoad){\r
- this.add = true;\r
- this.imageObj = new Asset.image(img, {onload: this.show.bind(this)});\r
- this.imageObj.set('width', width).set('height', height);\r
- }\r
- this.imageObj.set('id', this.images[this.image][i][3]);\r
- this.imageObj.set('title', this.images[this.image][i][4]);\r
- },\r
-\r
- restyle: function(imgobj){\r
- var width = imgobj.get('width');\r
- var height = imgobj.get('height');\r
- var vfactor = this.width/width;\r
- var hfactor = this.height/height;\r
- var factor = 1;\r
- if (vfactor < factor) { factor = vfactor; }\r
- if (hfactor < factor) { factor = hfactor; }\r
- factor *= .95;\r
- if (factor < 1) {\r
- height = Math.round(height * factor);\r
- width = Math.round(width * factor);\r
- }\r
- var topoff = (this.height - height)/2;\r
- var leftoff = (this.width - width)/2;\r
- /* alert('dim: '+width+'x'+height+'+'+leftoff+'+'+topoff); */\r
- imgobj.setStyles({\r
- position: 'absolute',\r
- top: topoff,\r
- left: leftoff,\r
- width: width,\r
- height: height,\r
- });\r
- },\r
-\r
- show: function(add){\r
- \r
- this.restyle(this.imageObj);\r
- var oimg = this.oldImage.getElement('img');\r
- if (oimg) {\r
- this.restyle(oimg);\r
- }\r
-\r
- if(this.add){\r
- this.imageObj.injectInside(this.imagesHolder);\r
- }\r
- \r
- this.newImage.setStyles({\r
- zIndex: 1,\r
- opacity: 0\r
- });\r
- var img = this.newImage.getElement('img');\r
- if(img){\r
- this.imageObj.clone().replaces(img);\r
- //img.replaces(this.imageObj.clone());\r
- }else{\r
- var obj = this.imageObj.clone();\r
- obj.injectInside(this.newImage);\r
- }\r
-\r
- this.imageLoaded = this.image;\r
- this.loading.setStyle('display','none');\r
- this.effect();\r
- this.comm = $(this.comm);\r
- if (this.comm) {\r
- var a = this.comm.getElement('a');\r
- if (a) a.dispose();\r
- a = new Element('a', {\r
- href: '#'+this.imageObj.get('id'),\r
- html: this.imageObj.get('title'),\r
- }).injectInside(this.comm);\r
- }\r
- },\r
- \r
- wait: function(){\r
- this.timer = this.load.delay(this.options.wait,this);\r
- },\r
- \r
- play: function(num){\r
- this.position();\r
- if(this.stopped){\r
- if(num > -1){this.image = num-1};\r
- if(this.image < this.images.length){\r
- this.stopped = false;\r
- if(this.started){\r
- this.next();\r
- }else{\r
- this.load();\r
- }\r
- this.started = true;\r
- }\r
- }\r
- },\r
- \r
- stop: function(){\r
- $clear(this.timer);\r
- this.stopped = true;\r
- },\r
-\r
- quit: function(){\r
- this.stop();\r
- /* does not work */\r
- var oimg = this.oldImage.getElement('img');\r
- if (oimg) {\r
- oimg.dispose();\r
- delete oimg;\r
- }\r
- },\r
- \r
- next: function(wait){\r
- var doNext = true;\r
- if(wait && this.stopped){\r
- doNext = false;\r
- }\r
- if(this.animating){\r
- doNext = false;\r
- }\r
- if(doNext){\r
- this.cloneImage();\r
- $clear(this.timer);\r
- /* console.log(this.image) */\r
- if(this.image < this.images.length-1){\r
- if(wait){\r
- this.wait();\r
- }else{\r
- this.load(); \r
- }\r
- }else{\r
- if(this.options.loop){\r
- this.image = -1;\r
- if(wait){\r
- this.wait();\r
- }else{\r
- this.load(); \r
- }\r
- }else{\r
- this.stopped = true;\r
- }\r
- }\r
- }\r
- },\r
- \r
- previous: function(){\r
- if(this.imageLoaded == 0){\r
- this.image = this.images.length-2; \r
- }else{\r
- this.image = this.imageLoaded-2;\r
- }\r
- this.next();\r
- },\r
- \r
- cloneImage: function(){\r
- var img = this.oldImage.getElement('img');\r
- if(img){\r
- this.imageObj.clone().replaces(img);\r
- //img.replaces(this.imageObj.clone());\r
- }else{\r
- var obj = this.imageObj.clone();\r
- obj.injectInside(this.oldImage);\r
- }\r
- \r
- this.oldImage.setStyles({\r
- zIndex: 0,\r
- top: 0,\r
- left: 0,\r
- opacity: 1\r
- });\r
- \r
- this.newImage.setStyles({opacity:0});\r
- },\r
- \r
- \r
- effect: function(){\r
- this.animating = true;\r
- this.effectObj = new Fx.Morph(this.newImage, {\r
- duration: this.options.duration,\r
- transition: this.options.transition\r
- });\r
- \r
- var myFxTypes = ['fade','wipe','slide'];\r
- var myFxDir = ['top','right','bottom','left'];\r
- \r
- if(this.options.effect == 'fade'){\r
- this.fade();\r
- \r
- }else if(this.options.effect == 'wipe'){\r
- if(this.options.direction == 'random'){\r
- this.setup(myFxDir[Math.floor(Math.random()*(3+1))]);\r
- }else{\r
- this.setup(this.options.direction);\r
- }\r
- this.wipe();\r
- \r
- }else if(this.options.effect == 'slide'){\r
- if(this.options.direction == 'random'){\r
- this.setup(myFxDir[Math.floor(Math.random()*(3+1))]);\r
- }else{\r
- this.setup(this.options.direction);\r
- }\r
- this.slide();\r
- \r
- }else if(this.options.effect == 'random'){\r
- var type = myFxTypes[Math.floor(Math.random()*(2+1))];\r
- if(type != 'fade'){\r
- var dir = myFxDir[Math.floor(Math.random()*(3+1))];\r
- if(this.options.direction == 'random'){\r
- this.setup(dir);\r
- }else{\r
- this.setup(this.options.direction);\r
- }\r
- }else{\r
- this.setup();\r
- }\r
- this[type]();\r
- }\r
- },\r
- \r
- setup: function(dir){\r
- if(dir == 'top'){\r
- this.top = -this.height;\r
- this.left = 0;\r
- this.topOut = this.height;\r
- this.leftOut = 0;\r
- \r
- }else if(dir == 'right'){\r
- this.top = 0;\r
- this.left = this.width;\r
- this.topOut = 0;\r
- this.leftOut = -this.width;\r
- \r
- }else if(dir == 'bottom'){\r
- this.top = this.height;\r
- this.left = 0;\r
- this.topOut = -this.height;\r
- this.leftOut = 0;\r
- \r
- }else if(dir == 'left'){\r
- this.top = 0;\r
- this.left = -this.width;\r
- this.topOut = 0;\r
- this.leftOut = this.width;\r
- \r
- }else{\r
- this.top = 0;\r
- this.left = 0;\r
- this.topOut = 0;\r
- this.leftOut = 0;\r
- }\r
- },\r
- \r
- fade: function(){\r
- this.effectObj.start({\r
- opacity: [0,1]\r
- });\r
- this.resetAnimation.delay(this.options.duration+90,this);\r
- if(!this.stopped){\r
- this.next.delay(this.options.duration+100,this,true);\r
- }\r
- },\r
- \r
- wipe: function(){\r
- this.newImage.morph({\r
- duration: this.options.duration,\r
- transition: this.options.transition,\r
- top: [0,this.topOut],\r
- left: [0, this.leftOut]\r
- })\r
- this.effectObj.start({\r
- top: [this.top,0],\r
- left: [this.left,0],\r
- opacity: [1,1]\r
- },this);\r
- this.resetAnimation.delay(this.options.duration+90,this);\r
- if(!this.stopped){\r
- this.next.delay(this.options.duration+100,this,true);\r
- }\r
- },\r
- \r
- slide: function(){\r
- this.effectObj.start({\r
- top: [this.top,0],\r
- left: [this.left,0],\r
- opacity: [1,1]\r
- },this);\r
- this.resetAnimation.delay(this.options.duration+90,this);\r
- if(!this.stopped){\r
- this.next.delay(this.options.duration+100,this,true);\r
- }\r
- },\r
- \r
- resetAnimation: function(){\r
- this.animating = false;\r
- this.oldImage.setStyles({\r
- opacity: 0\r
- });\r
- },\r
-\r
- position: function(){\r
- var myCoords = this.container.getCoordinates();\r
- this.width = myCoords.width;\r
- this.height = myCoords.height;\r
- /*\r
- this.width = this.container.getStyle('width').toInt();\r
- this.height = this.container.getStyle('height').toInt();\r
- */\r
- /* alert('container dim: '+this.width+'x'+this.height); */\r
- },\r
-\r
- reshow: function(){\r
- this.position();\r
- this.image--;\r
- this.load();\r
- },\r
- \r
-});\r
-slideShow.implement(new Options);\r
-slideShow.implement(new Events);\r
-\r
-\r
-/*************************************************************/\r
-\r
projects / mkgallery.git / commitdiff