PDA

View Full Version : Enlarge a photo in a dhtml slideshow



neilbradford
08-14-2006, 12:01 AM
1) Script Title: Ultimate Fade-in slideshow (v1.5)

2) Script URL (on DD): http://www.dynamicdrive.com/dynamicindex14/fadeinslideshow.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
08-14-2006, 06:20 AM
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
08-14-2006, 01:25 PM
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
08-14-2006, 06:45 PM
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
08-14-2006, 07:04 PM
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
08-14-2006, 10:24 PM
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
08-15-2006, 09:25 AM
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
08-15-2006, 09:54 AM
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
08-15-2006, 05:21 PM
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
08-15-2006, 05:42 PM
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.