Enlarge a photo in a dhtml slideshow

[neilbradford]

1) Script Title: Ultimate Fade-in slideshow (v1.5)

2) Script URL (on DD): http://www.dynamicdrive.com/dynamici...nslideshow.htm

3) Describe problem: Trying to add to... so a thumbnail can be enlarged

Hi Guys....
First time actually writing in a forum!
Some of these slideshows are great but instead of all the multiple slideshows showing at once... and having various ways of displaying the slideshows, like drop in or fade in/out etc... How about one where with a mouseover or a click a larger image displays... either as a pop up window with javascript conttroling the size of the window, or a text/css script that displays a larger image with a mouseover?
Anyone got any ideas?
Thanks
Neil

[jscheuer1]

See the scripts in this index:

http://www.dynamicdrive.com/dynamicindex4/indexb.html

particularly the lightbox ones (at the top of the page) and the thumbnail viewer ones (a bit farther down the page).

[neilbradford]

Thanks John

Enlarge Thumbnal Viewer looked the best of all the scripts there due to the fact that a second window isn't needed to show the larger image and hence non-interuption with regards navigation.

The problem is that that's great for static images.... but how could that be applied to a slideshow such as yours?
Your slideshow pauses with a mouseover and can have a link and target applied... but how could another script like the 'Enlarge Thumbnail Viewer' be added to make it all a really formidable piece of scripting?

Neil

[jscheuer1]

That can be done, a little tricky, but doable. There are though two thumbnail viewers, Image Thumbnail Viewer II and the original, Image Thumbnail Viewer. Neither of these require any navigation so, which did you have in mind?

[neilbradford]

Hi John,

Thanks for replying... I think we're either side of the world, so trying to catch one another's tricky!
Your slideshow script acting with the original Thumbnail Viewer 1 not he version 2.
Is that tricky or not tricky???
If you could do that it really would be a new script for the slideshows page. The nearest I've seen to it is a cumbersome looking thing with buttons at the top and very uglt to boot!

Cheers

Neil

[jscheuer1]

OK, first thing that goes in the head is the Image Thumbnail Viewer Step 1 (style and script), but with one addition (red) to its style:

<style type="text/css">

#showimage{
position:absolute;
visibility:hidden;
border: 1px solid gray;
z-index:1000;
}

#dragbar{
cursor: hand;
cursor: pointer;
background-color: #EFEFEF;
min-width: 100px; /*NS6 style to overcome bug*/
}

#dragbar #closetext{
font-weight: bold;
margin-right: 1px;
}
</style>

Next comes this modified version of the Ultimate Fade-in slideshow (v1.5):

<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.
* Modified for greater X browser fading and optional Image Thumbnail Viewer tie-in
* in http://www.dynamicdrive.com/forums by jscheuer1
***********************************************/
 
var fadeimages=new Array()
//SET IMAGE PATHS. Extend or contract array as needed
fadeimages[0]=["photo1.jpg", "", ""] //plain image syntax
fadeimages[1]=["photo2.jpg", "http://www.google.com", ""] //image with link syntax
fadeimages[2]=["photo3.jpg", "http://www.javascriptkit.com", "_new"] //image with link and target syntax
 
var fadeimages2=new Array() //2nd array set example. Remove or add more sets as needed.
//SET IMAGE PATHS. Extend or contract array as needed
fadeimages2[0]=["photo1.jpg", "enlarge", "photo1_lrg.jpg", 140 ,225] //enlarge image syntax w/centering dimensions
fadeimages2[1]=["photo2.jpg", "enlarge", "photo2_lrg.jpg"] //plain enlarge image syntax
fadeimages2[2]=["photo3.jpg", "enlarge", "photo3_lrg.jpg"] //plain enlarge image syntax
 
var fadebgcolor="white"
 
////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(theimages, fadewidth, fadeheight, borderwidth, delay, pause, displayorder){
this.pausecheck=pause
this.mouseovercheck=0
this.delay=delay
this.degree=10 //initial opacity degree (10%)
this.curimageindex=0
this.nextimageindex=1
fadearray[fadearray.length]=this
this.slideshowid=fadearray.length-1
this.canvasbase="canvas"+this.slideshowid
this.curcanvas=this.canvasbase+"_0"
if (typeof displayorder!="undefined")
theimages.sort(function() {return 0.5 - Math.random();}) //thanks to Mike (aka Mwinter) :)
this.theimages=theimages
this.imageborder=parseInt(borderwidth)
this.postimages=new Array() //preload images
for (p=0;p<theimages.length;p++){
this.postimages[p]=new Image()
this.postimages[p].src=theimages[p][0]
}
 
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);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);opacity:10;-moz-opacity:10;background-color:'+fadebgcolor+'"></div></div>')
else
document.write('<div><img name="defaultslide'+this.slideshowid+'" src="'+this.postimages[0].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 if (obj.tempobj.style.opacity&&!obj.tempobj.filters)
obj.tempobj.style.opacity=obj.degree/101
}
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=""
if (this.theimages[picindex][1]!=""&&this.theimages[picindex][1]!="enlarge") //if associated link exists for image
slideHTML='<a href="'+this.theimages[picindex][1]+'" target="'+this.theimages[picindex][2]+'">'
if (this.theimages[picindex][1]=="enlarge")
slideHTML+='<img src="'+this.postimages[picindex].src+'" style="cursor:pointer;" border="'+this.imageborder+'" onclick="enlarge(\''+this.theimages[picindex][2]+'\', event'+ (this.theimages[picindex][3]&&this.theimages[picindex][3]!=''? ',\'center\','+this.theimages[picindex][3]+','+this.theimages[picindex][4] : '')+');">' //added onclick
else
slideHTML+='<img src="'+this.postimages[picindex].src+'" border="'+this.imageborder+'">'
if (this.theimages[picindex][1]!=""&&this.theimages[picindex][1]!="enlarge") //if associated link exists for image
slideHTML+='</a>'
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=this.degree/100
else if (crossobj.style.opacity&&!crossobj.filters)
crossobj.style.opacity=this.degree/101
}
 
 
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()
}
 
</script>

Finally, you need to add the 'showimage' division (best just before the closing </body> tag) as explained in the Image Thumbnail Viewer Step 2.

The syntax for calling the enlarge function is now in the fadeimages array(s) if desired. The ordinary syntax for Ultimate Fade-in slideshow (v1.5) may still be used but, if the second parameter is 'enlarge' as shown for the second array in the script above, instead of a link, you will get the Image Thumbnail Viewer effect. The image used follows (in red above, change these images to your larger image's names), then there are the optional dimensions. Use the dimensions for centered Image Thumbnail Viewer only. The two styles of enlarged or linked/plain may be mixed within a single array but, that would be kind of confusing to the user, I would think.

[neilbradford]

Wow John,

I can see why I couldn't get it to work.... I was applying a second script to the header and then trying to manipulate the code in the body but as I said, it all vanished completely... just a blank page!
I hope you're adding that script to the Slideshow section as now that really has to be 'THE Ultimate Slideshow Viewer'!!! - Maybe you could call the unmodified one, 'The Penultimate Ultimate Slideshow Viewer'???

Really a great thanks for that John from me over here in little Olde England and I'll let you know where I use the script so you can see it in action. As I said, I haven't seen another one like it apart from Flash versions and the only non-Flash one was as I said, really cumbersome and ugly looking. Maybe some of the aesthetics could have been tackled but not the cumbersome side!

Thanks again

Neil

[jscheuer1]

Ooops, although I tested this out in three different browsers, I see one error in my code that could, under the right (wrong?) circumstances cause a problem and also something from the original script that simply isn't right and might, as I said for my error, cause a problem sometimes.

Anyways, to fix both of these potential problems, substitute this populateslide function for the one in my previous post:

fadeshow.prototype.populateslide=function(picobj, picindex){
var slideHTML=""
if (this.theimages[picindex][1]!=""&&this.theimages[picindex][1]!="enlarge") //if associated link exists for image
slideHTML='<a href="'+this.theimages[picindex][1]+'" target="'+this.theimages[picindex][2]+'">'
if (this.theimages[picindex][1]=="enlarge")
slideHTML+='<img src="'+this.postimages[picindex].src+'" style="cursor:pointer;" border="'+this.imageborder+'" onclick="enlarge(\''+this.theimages[picindex][2]+'\', event'+ (this.theimages[picindex][3]&&this.theimages[picindex][3]!=''? ',\'center\','+this.theimages[picindex][3]+','+this.theimages[picindex][4] : '')+');">' //added onclick
else
slideHTML+='<img src="'+this.postimages[picindex].src+'" border="'+this.imageborder+'">'
if (this.theimages[picindex][1]!=""&&this.theimages[picindex][1]!="enlarge") //if associated link exists for image
slideHTML+='</a>'
picobj.innerHTML=slideHTML
}

Notes: Removed pixel units from image tag's border attribute. They are not required and are in fact invalid. Added a second test to the final </a> tag to assure its not getting written when the viewer tie in is used. Without this modification, unclosed <a> tags elsewhere on the page could cause trouble.

[neilbradford]

Great John,

I wouldn't (and in fact didn't) spot the error in the code and even though I coped and pasted the rewritten paragraph of code, I couldn't see the difference although it must have been there.
That's the thing with so much code/script/syntax.... How do you spot the errors???

Thanks

Neil

PS.... Looks like this thread is getting quite a few views!

[jscheuer1]

I wouldn't (and in fact didn't) spot the error in the code and even though I coped and pasted the rewritten paragraph of code, I couldn't see the difference although it must have been there.
That's the thing with so much code/script/syntax.... How do you spot the errors???

Well, since both of these 'errors' were just 'accidents waiting to happen', that is that they won't cause a problem on most otherwise well formed pages, the only way I spotted them was in looking over the code. More often though, errors are easier to spot with the various error reporting features of the various browsers and, if an error is severe enough, the script won't work, that's always a dead giveaway.