Image Rotating
'ello everyone,
BASE:
Drupal 4.7
Windows Server
XP Pro
Firefox & IE
Zen theme
I was wondering if there was an image rotating module or .js script that I can use in a sidebar.
My idea is to have the profile images of the editors of a website appear on the home page in a sidebar; which rotate every 6 seconds.
I have a .js script that I use; however, I think the only way to use it is if I make use of front_page module, but I want to allow news stories, event and forum issues to be promoted to the front page on publishing so I think front_page cannot be used for this.
I'll try creating a module that does this using the .js script that I have and submit it for review.
Perhaps someone can assist as I've never created a module, but really want to contribute!
Any help is welcomed!
JS
you could definitely use
you could definitely use jQuery for this. you might take a look at the jQuery 4.7 module (or at the upcoming 5 release).
personally, i'm just adding jquery directly in my theme using the advice from dvessel's comment in the HOWTO:jQuery with Drupal 4.7 handbook page - http://drupal.org/node/88979
I'm using the jQuery plugin InnerFade to handle the image rotation. It's pretty flexible for adjusting the rotation parameters. Make sure that you define the size of the rotation block in your css as well as in the plugin call or else you will get some weird jumping.
i've made an extremely simple custom block module that populates the ul that InnerFade needs from an image gallery. adjusting visibility in block settings can take care of just showing it on the front page. take a look at http://www.thecycletest.com for the results of my solution to this.
hope that helps.
Javascript
put your javascript in a block, and then put your block wherever you want it.
Works for me.
Note that some find automatic image rotation irritating....
<script type="text/javascript" >
/***********************************************
* Ultimate Fade-In Slideshow (v1.5): © Dynamic Drive (http://www.dynamicdrive.com)
* This notice MUST stay intact for legal use
* Visit http://www.dynamicdrive.com/ for this script and 100s more.
***********************************************/
var fadebgcolor="white"
var imgbase = "http://www.example.com/pictures/pic"
var imgsuffix = ".jpg"
var imgcount = 107
var startpt = parseInt(Math.random()*(imgcount-1))
///images should be named in numeric sequence, with the number between imgbase and imgsuffix
// imgcount is number of images. first image should be 0.
////NO need to edit beyond here/////////////
var fadearray=new Array() //array to cache fadeshow instances
var fadeclear=new Array() //array to cache corresponding clearinterval pointers
var dom=(document.getElementById) //modern dom browsers
var iebrowser=document.all
function fadeshow(fadewidth, fadeheight, borderwidth, delay, pause, displayorder){
this.pausecheck=pause
this.mouseovercheck=0
this.delay=delay
this.degree=10 //initial opacity degree (10%)
this.curimageindex=startpt
this.nextimageindex=startpt+1
fadearray[fadearray.length]=this
this.slideshowid=fadearray.length-1
this.canvasbase="canvas"+this.slideshowid
this.curcanvas=this.canvasbase+"_0"
this.imageborder=parseInt(borderwidth)
this.postimages=new Array(imgcount) //preload images
for (p=0;p<5;p++){
var myIm =(imgcount+p)%imgcount
this.postimages[myIm]=new Image()
this.postimages[myIm].src=imgbase+myIm+imgsuffix
}
var fadewidth=fadewidth+this.imageborder*2
var fadeheight=fadeheight+this.imageborder*2
if (iebrowser&&dom||dom) //if IE5+ or modern browsers (ie: Firefox)
document.write('<div id="master'+this.slideshowid+'" style="position:relative;width:'+fadewidth+'px;height:'+fadeheight+'px;overflow:hidden;"><div id="'+this.canvasbase+'_0" style="position:absolute;width:'+fadewidth+'px;height:'+fadeheight+'px;top:0;left:0;filter:progid:DXImageTransform.Microsoft.alpha(opacity=10);-moz-opacity:10;-khtml-opacity:10;background-color:'+fadebgcolor+'"></div><div id="'+this.canvasbase+'_1" style="position:absolute;width:'+fadewidth+'px;height:'+fadeheight+'px;top:0;left:0;filter:progid:DXImageTransform.Microsoft.alpha(opacity=10);-moz-opacity:10;background-color:'+fadebgcolor+'"></div></div>')
else
document.write('<div><img name="defaultslide'+this.slideshowid+'" src="'+this.postimages[startpt].src+'"></div>')
if (iebrowser&&dom||dom) //if IE5+ or modern browsers such as Firefox
this.startit()
else{
this.curimageindex++
setInterval("fadearray["+this.slideshowid+"].rotateimage()", this.delay)
}
}
function fadepic(obj){
if (obj.degree<100){
obj.degree+=10
if (obj.tempobj.filters&&obj.tempobj.filters[0]){
if (typeof obj.tempobj.filters[0].opacity=="number") //if IE6+
obj.tempobj.filters[0].opacity=obj.degree
else //else if IE5.5-
obj.tempobj.style.filter="alpha(opacity="+obj.degree+")"
}
else if (obj.tempobj.style.MozOpacity)
obj.tempobj.style.MozOpacity=obj.degree/101
else if (obj.tempobj.style.KhtmlOpacity)
obj.tempobj.style.KhtmlOpacity=obj.degree/100
}
else{
clearInterval(fadeclear[obj.slideshowid])
obj.nextcanvas=(obj.curcanvas==obj.canvasbase+"_0")? obj.canvasbase+"_0" : obj.canvasbase+"_1"
obj.tempobj=iebrowser? iebrowser[obj.nextcanvas] : document.getElementById(obj.nextcanvas)
obj.populateslide(obj.tempobj, obj.nextimageindex)
obj.nextimageindex=(obj.nextimageindex<obj.postimages.length-1)? obj.nextimageindex+1 : 0
setTimeout("fadearray["+obj.slideshowid+"].rotateimage()", obj.delay)
}
}
fadeshow.prototype.populateslide=function(picobj, picindex){
var slideHTML=""
slideHTML+='<img src="'+imgbase+(picindex+1)+imgsuffix+'" border="'+this.imageborder+'px">'
picobj.innerHTML=slideHTML
}
fadeshow.prototype.rotateimage=function(){
if (this.pausecheck==1) //if pause onMouseover enabled, cache object
var cacheobj=this
if (this.mouseovercheck==1)
setTimeout(function(){cacheobj.rotateimage()}, 100)
else if (iebrowser&&dom||dom){
this.resetit()
var crossobj=this.tempobj=iebrowser? iebrowser[this.curcanvas] : document.getElementById(this.curcanvas)
crossobj.style.zIndex++
fadeclear[this.slideshowid]=setInterval("fadepic(fadearray["+this.slideshowid+"])",50)
this.curcanvas=(this.curcanvas==this.canvasbase+"_0")? this.canvasbase+"_1" : this.canvasbase+"_0"
}
else{
var ns4imgobj=document.images['defaultslide'+this.slideshowid]
ns4imgobj.src=this.postimages[this.curimageindex].src
}
this.curimageindex=(this.curimageindex<this.postimages.length-1)? this.curimageindex+1 : 0
}
fadeshow.prototype.resetit=function(){
this.degree=10
var crossobj=iebrowser? iebrowser[this.curcanvas] : document.getElementById(this.curcanvas)
if (crossobj.filters&&crossobj.filters[0]){
if (typeof crossobj.filters[0].opacity=="number") //if IE6+
crossobj.filters(0).opacity=this.degree
else //else if IE5.5-
crossobj.style.filter="alpha(opacity="+this.degree+")"
}
else if (crossobj.style.MozOpacity)
crossobj.style.MozOpacity=this.degree/101
else if (crossobj.style.KhtmlOpacity)
crossobj.style.KhtmlOpacity=obj.degree/100
}
fadeshow.prototype.startit=function(){
var crossobj=iebrowser? iebrowser[this.curcanvas] : document.getElementById(this.curcanvas)
this.populateslide(crossobj, this.curimageindex)
if (this.pausecheck==1){ //IF SLIDESHOW SHOULD PAUSE ONMOUSEOVER
var cacheobj=this
var crossobjcontainer=iebrowser? iebrowser["master"+this.slideshowid] : document.getElementById("master"+this.slideshowid)
crossobjcontainer.onmouseover=function(){cacheobj.mouseovercheck=1}
crossobjcontainer.onmouseout=function(){cacheobj.mouseovercheck=0}
}
this.rotateimage()
}
//new fadeshow(IMAGES_ARRAY_NAME, slideshow_width, slideshow_height, borderwidth, delay, pause (0=no, 1=yes), optionalRandomOrder)
new fadeshow(300, 200, 0, 10500, 1, "R")
</script>
Drupal 5 Random Image Slideshow
I used the newest version of the Ultimate Fade-in slideshow (v1.51) which you can find here: http://www.dynamicdrive.com/dynamicindex14/fadeinslideshow.htm. This worked great with Drupal 5.7 and I'm sure it would work with 6 no prob. Load times are great, and the script can be called off-page.
It's Better than Flash!