Results 1 to 10 of 10

Thread: Enlarge a photo in a dhtml slideshow

  1. #1
    Join Date
    Aug 2006
    Location
    Hertford, UK
    Posts
    9
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default Enlarge a photo in a dhtml slideshow

    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

  2. #2
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    30,475
    Thanks
    82
    Thanked 3,449 Times in 3,410 Posts
    Blog Entries
    12

    Default

    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).
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  3. #3
    Join Date
    Aug 2006
    Location
    Hertford, UK
    Posts
    9
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    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

  4. #4
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    30,475
    Thanks
    82
    Thanked 3,449 Times in 3,410 Posts
    Blog Entries
    12

    Default

    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?
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  5. #5
    Join Date
    Aug 2006
    Location
    Hertford, UK
    Posts
    9
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default Enlarge image with Thumbnail Viewer 1 and Slideshow

    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

  6. #6
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    30,475
    Thanks
    82
    Thanked 3,449 Times in 3,410 Posts
    Blog Entries
    12

    Default

    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:

    Code:
    <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):

    Code:
    <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.
    Last edited by jscheuer1; 08-15-2006 at 05:45 PM. Reason: correct errors mentioned in my later post
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  7. #7
    Join Date
    Aug 2006
    Location
    Hertford, UK
    Posts
    9
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    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

  8. #8
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    30,475
    Thanks
    82
    Thanked 3,449 Times in 3,410 Posts
    Blog Entries
    12

    Default

    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:

    Code:
    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.
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  9. #9
    Join Date
    Aug 2006
    Location
    Hertford, UK
    Posts
    9
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default Excelled yourself.... again!

    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!

  10. #10
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    30,475
    Thanks
    82
    Thanked 3,449 Times in 3,410 Posts
    Blog Entries
    12

    Default

    Quote Originally Posted by neilbradford
    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.
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •