PDA

View Full Version : DHTML slideshow script fade effect



martino
11-16-2005, 03:14 PM
DHTML slideshow script
http://www.dynamicdrive.com/dynamicindex14/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:progid:DXImageTransform.Microsoft.Fade()

Thanks!
Martin

jscheuer1
11-16-2005, 05:58 PM
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:progid:DXImageTransform.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:


<!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:


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

Change it to:


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:


//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]

martino
11-18-2005, 03:06 PM
Thank you very much John. Its working great!
Martin

martino
01-11-2007, 05:57 PM
Hello,

I was wondering if its possible to go to a specific image within the array as per clicked.

Example gallery: http://www.tomalextile.com/gallery.html

Thank you

martino
01-16-2007, 01:17 PM
I take it there is no way to point to a specific image within the gallery?

jscheuer1
01-16-2007, 05:57 PM
Hello,

I was wondering if its possible to go to a specific image within the array as per clicked.

Example gallery: http://www.tomalextile.com/gallery.html

Thank you

Your example URL, goes nowhere.

martino
01-16-2007, 06:09 PM
Sorry, the files needed to be re-uploaded. Its working now.

Thanks

jscheuer1
01-16-2007, 07:48 PM
Here:


//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]

You would need to set the URLs to pages that you either have or that you could make that display whatever you want, including an image of your choice, links to other pages of images, anything.

martino
01-16-2007, 07:51 PM
Actually, I was trying to link the thumbnail to a particular image within the array. For instance, if I clicked the 2nd thumbnail, it would open up the second image (photos[1]="images/gallery/tile1.jpg")

jscheuer1
01-16-2007, 09:18 PM
Either put the image you want on a page and link to that or put the image itself into the link array. A page will look much better in IE, other browsers can display just images in windows more gracefully, ex using just an image:


photoslink[0]=["photo1.jpg", 300, 250]

You will probably want to pad the width and height by adding about 20 to what the actual width and height of the image is.

A page is still the best bet as, the way images are rendered in new windows by browsers varies widely.

martino
01-16-2007, 10:56 PM
Either put the image you want on a page and link to that or put the image itself into the link array. A page will look much better in IE, other browsers can display just images in windows more gracefully, ex using just an image:


photoslink[0]=["photo1.jpg", 300, 250]

You will probably want to pad the width and height by adding about 20 to what the actual width and height of the image is.

A page is still the best bet as, the way images are rendered in new windows by browsers varies widely.

It would be great to have the Previous/Next functionality as well as the transitions intact as well. Do you think this is possible?

jscheuer1
01-17-2007, 05:10 AM
It would be great to have the Previous/Next functionality as well as the transitions intact as well. Do you think this is possible?

Well, there are inherent problems with new windows. They can, in theory, do that - fairly easily, in fact. The problem is that many times they are blocked or controlled by the browser in ways that you wouldn't expect.

Just the idea of loading a series of large images into a new window slide show with transitions implies that you don't really want any visitors with a dial-up connection using it. They really won't be able to. Even users with a high speed connection, if the bandwidth dips, will have trouble. Connection speed makes no difference if the window is blocked.

A better approach is to have the slide show be of smaller images. If you click on a particular image, you get one page or an overlay with one larger image on it.

martino
01-17-2007, 01:59 PM
Good points John, but I find it very inconvenient to close a popup every time I'd like to see the next image. Which is why I have added the Next/Previous into the window. Another thing is that there would be no more then 8-10 images and each are about 130 kb. So, it will still look ok for those on slower connections and these people know that they need to wait a little longer especially these days.

I'm not a huge fan of popups either, but its proven that if you really want to see something...you will, regardless if your browser prevents it.

If you can figure out a way to fetch-to a specific image within the array, I'd greatly appreciate it.

jscheuer1
01-17-2007, 03:38 PM
Bad points, martino. You still seem determined to go ahead with this though. With that few images, just make up the pages as I've already outlined. To get a blend effect between pages use the blendtrans meta tag:

http://www.inquiry.com/techtips/web_pro/10min/10min0200/10min0200.asp

I recommend almost 100% against this entire idea.

martino
01-17-2007, 03:44 PM
Ok thanks....and yes, I am determined to find a way.