DHTML slideshow script fade effect

**martino** · 11-16-2005, 03:14 PM

DHTML slideshow script
http://www.dynamicdrive.com/dynamici...dhtmlslide.htm

Hi, I'd like to know if it is possible to change the fade effect to that of <meta http-equiv="Page-Enter" content="blendTrans(Duration=0.5)">

I realize that this effect is only available on IE.

Your help would be greatly appreciated.

Thanks,
Martin

**martino** · 11-16-2005, 05:23 PM

I was just wondering how to implement this fade effect into the slideshow: STYLE="filter

rogid

XImageTransform.Microsoft.Fade()

Thanks!
Martin

**jscheuer1** · 11-16-2005, 05:58 PM

Originally Posted by martino

I was just wondering how to implement this fade effect into the slideshow: STYLE="filter:progid:DXImageTransform.Microsoft.Fade()

Thanks!
Martin

I've looked into this before, and as far as I could tell at the time, the blendTrans method, style or whatever you want to call it, is not available for:

filter:progid:DXImageTransform.Microsoft

There is the pixelating fade, you could use that, I think it is number 12. In the code where the method is set to a random number, change that to just 12. This is a fade effect, not as smooth as the blendTrans though.

**martino** · 11-16-2005, 08:27 PM

Thanks for the input John. It's too bad that effect 12 isn't as smooth as filter

rogid

XImageTransform.Microsoft.Fade()

Would you know any other scripts that could offer this fade effect with next and previous capabilities?

Thanks,
Martin

**jscheuer1** · 11-16-2005, 08:41 PM

http://www.barelyfitz.com/projects/slideshow/wizard/

**martino** · 11-17-2005, 02:28 PM

Looks like a great tool but it seems very difficult to plug into a template. Do you have any idea how to go about that?

Thanks

**jscheuer1** · 11-17-2005, 06:17 PM

Well, the html portions of the generated script may be edited to suit. The entire generated code may be placed inside any containing element, like a table cell, division, etc.

**jscheuer1** · 11-17-2005, 06:48 PM

By looking at how BF did it, I've just come up with this mod of the DD script that will run the fade trans:

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/1999/REC-html401-19991224/loose.dtd">
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<script type="text/javascript">

/***********************************************
* DHTML slideshow script-  © Dynamic Drive DHTML code library (www.dynamicdrive.com)
* This notice must stay intact for legal use
* Visit http://www.dynamicdrive.com/ for full source code
***********************************************/

var photos=new Array()
var photoslink=new Array()
var which=0

//define images. You can have as many as you want:
photos[0]="photo1.jpg"
photos[1]="photo2.jpg"
photos[2]="photo3.jpg"

//Specify whether images should be linked or not (1=linked)
var linkornot=0

//Set corresponding URLs for above images. Define ONLY if variable linkornot equals "1"
photoslink[0]=""
photoslink[1]=""
photoslink[2]=""

//do NOT edit pass this line

var preloadedimages=new Array()
for (i=0;i<photos.length;i++){
preloadedimages[i]=new Image()
preloadedimages[i].src=photos[i]
}


function applyeffect(){
if (document.all && photoslider.filters){
photoslider.filters[0].Stop()
photoslider.filters[0].Apply()
}
}



function playeffect(){
if (document.all && photoslider.filters)
photoslider.filters[0].Play();
}

function keeptrack(){
window.status="Image "+(which+1)+" of "+photos.length
}


function backward(){
if (which>0){
which--
applyeffect()
document.images.photoslider.src=photos[which]
playeffect()
keeptrack()
}
}

function forward(){
if (which<photos.length-1){
which++
applyeffect()
document.images.photoslider.src=photos[which]
playeffect()
keeptrack()
}
}

function transport(){
window.location=photoslink[which]
}

</script>
</head>
<body>
<table border="0" cellspacing="0" cellpadding="0">
  <tr>
    <td  colspan="2" height="22"><center>
<script>
if (linkornot==1)
document.write('<a href="javascript:transport()">')
document.write('<img style="filter:progid:DXImageTransform.Microsoft.Fade()" src="'+photos[0]+'" name="photoslider" border=0>')
if (linkornot==1)
document.write('</a>')
</script>
</center></td>
  </tr>
  <tr>
    <td width="50%" height="21"><p align="left"><a href="#" onClick="backward();return false">Previous Slide</a></td>
    <td width="50%" height="21"><p align="right"><a href="#" onClick="forward();return false">Next Slide</a></td>
  </tr>
</table>

<p align="center"><font face="Arial" size="-2">Free DHTML scripts provided by<br>
<a href="http://dynamicdrive.com">Dynamic Drive</a></font></p>
</body>
</html>

**martino** · 11-17-2005, 08:23 PM

That's amazing...good job John.

Now, is it possible to link each image to a popup window. The problem is that each image will need a specific height/width though.

Thanks,
Martin

**jscheuer1** · 11-17-2005, 10:43 PM

Attack this function:

Code:

function transport(){
window.location=photoslink[which]
}

Change it to:

Code:

function transport(){
window.open(photoslink[which][0],'','width='+photoslink[which][1]+', height='+photoslink[which][2])
}

In the configuration area, set the variable linkornot=1 if you haven't already, and use this as a template for the photoslink array:

Code:

//Set corresponding URLs, width and height for links in a new window
//for each of above images. Define ONLY if variable linkornot equals "1"
photoslink[0]=["http://www.google.com/", 300, 250]
photoslink[1]=["http://www.yahoo.com/", 500, 100]
photoslink[2]=["http://www.dynamicdrive.com/", 375, 200]

Thread: DHTML slideshow script fade effect

Thread Tools

Search Thread

DHTML slideshow script fade effect

can this fade be used?

Bookmarks

Bookmarks

Posting Permissions