Printable View
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
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:Quote:
Originally Posted by martino
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.
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
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
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.
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>
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
Attack this function:
Change it to:Code:function transport(){
window.location=photoslink[which]
}
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:function transport(){
window.open(photoslink[which][0],'','width='+photoslink[which][1]+', height='+photoslink[which][2])
}
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]
Thank you very much John. Its working great!
Martin
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
I take it there is no way to point to a specific image within the gallery?
Your example URL, goes nowhere.Quote:
Originally Posted by martino
Sorry, the files needed to be re-uploaded. Its working now.
Thanks
Here:
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.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]
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")
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:
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.Code:photoslink[0]=["photo1.jpg", 300, 250]
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?Quote:
Originally Posted by jscheuer1
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.Quote:
Originally Posted by martino
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.
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.
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_.../10min0200.asp
I recommend almost 100% against this entire idea.
Ok thanks....and yes, I am determined to find a way.