Thursday, February 15, 2007

Slide Show Widget Version 2

<b:widget id='PictureSlideShow' locked='false' title='Pictures' type='TextList'>
<b:includable id='main'>

<b:if cond='data:title'><h2><data:title/></h2></b:if>
<div class='widget-content'>

<script type='text/javascript'>
/*<![CDATA[*/

(function (timing,allowLink)
{
var imgName = 'slide'+ parseInt(Math.round(100000*Math.random()));

var picObject =
{
slideshowspeed: timing,
canlink: allowLink,

slideimages: new Array(),
slidelinks: new Array(),

whichimage: 0,

addImageAndLink: function (imageURL)
{
var currLength = this.slideimages.length;

this.slideimages[currLength] = new Image();
this.slideimages[currLength].src = imageURL;
this.slidelinks[currLength]=imageURL;

this.whichimage=Math.round((this.slideimages.length-1)*Math.random());
},

gotoshow: function ()
{
var curr = (this.whichimage+this.slidelinks.length-1) % this.slidelinks.length;

if (!window.winslide||winslide.closed)
winslide=window.open(this.slidelinks[curr]);
else
winslide.location=this.slidelinks[curr];

winslide.focus();
},

slideit: function()
{
if (!document.images) return;

document.images[imgName].src=this.slideimages[this.whichimage].src;

if (this.whichimage<this.slideimages.length-1) this.whichimage++;
else this.whichimage=0;

var thisobj = this;
if (this.slideshowspeed != 0) setTimeout(function() {thisobj.slideit();},this.slideshowspeed);
}

}

document.write('<img border=\'0\' name=\'' + imgName + '\' width=\'80%\'/>');

var timg = document.images[imgName];

timg.style.padding='2px 2px';
timg.style.border='2px GRAY SOLID';

timg.onclick = function (e)
{
if (!e) var e = window.event;
if (picObject.canlink == 1) picObject.gotoshow();
}

timg.onmouseover = function (e)
{
if (!e) var e = window.event;
if (picObject.slideshowspeed == 0) picObject.slideit();
}


/*]]>*/
<b:loop values='data:items' var='item'>
picObject.addImageAndLink("<data:item/>");
</b:loop>
/*<![CDATA[*/

picObject.slideit();

}) (1000, 1);

/*]]>*/
</script>
<b:include name='quickedit'/>
</div>
</b:includable>
</b:widget>

Code for SlideShow Widget

<b:widget id='PictureSlideShow' locked='false' title='Pictures' type='TextList'>
<b:includable id='main'>

<b:if cond='data:title'><h2><data:title/></h2></b:if>
<div class='widget-content'>

<a onclick='pickSwap.gotoshow();'><img border='0' name='slide' onmouseover=' if (picSwap.slideshowspeed == 0) picSwap.slideit();'/></a>


<script type='text/javascript'>
/*<![CDATA[*/
function PicObject() {

this.slideshowspeed=0;

this.slideimages=new Array();
this.slidelinks=new Array();

this.whichimage=0;
this.whichlink=this.whichimage;


}


PicObject.prototype.addImage = function (imageURL)
{
var currLength = this.slideimages.length;
this.slideimages[currLength] = new Image();
this.slideimages[currLength].src = imageURL;
this.whichimage=Math.round((this.slideimages.length-1)*Math.random());
}

PicObject.prototype.addLink = function (linkURL)
{
var currLength = this.slidelinks.length;
this.slidelinks[currLength]=linkURL;
}

PicObject.prototype.addImageAndLink = function (imageURL)
{
this.addImage(imageURL);
this.addLink(imageURL);
}

PicObject.prototype.gotoshow = function ()
{
if (!window.winslide||winslide.closed)
winslide=window.open(this.slidelinks[this.whichlink]);
else
winslide.location=this.slidelinks[this.whichlink];
winslide.focus();
}

PicObject.prototype.slideit = function()
{
if (!document.images)
return;

document.images.slide.src=this.slideimages[this.whichimage].src;

this.whichlink=this.whichimage;
if (this.whichimage<this.slideimages.length-1)
this.whichimage++;
else
this.whichimage=0;

var thisobj = this;
if (this.slideshowspeed != 0) setTimeout(function() {thisobj.slideit();},this.slideshowspeed);
}

var picSwap = new PicObject();

/*]]>*/
<b:loop values='data:items' var='item'>
picSwap.addImageAndLink("<data:item/>");
</b:loop>
/*<![CDATA[*/

picSwap.slideit();

/*]]>*/
</script>
<b:include name='quickedit'/>
</div>
</b:includable>
</b:widget>