Page 1 of 3 123 LastLast
Results 1 to 10 of 23

Thread: DHTML slideshow script fade effect

  1. #1
    Join Date
    Jul 2005
    Posts
    67
    Thanks
    4
    Thanked 0 Times in 0 Posts

    Question DHTML slideshow script fade effect

    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

  2. #2
    Join Date
    Jul 2005
    Posts
    67
    Thanks
    4
    Thanked 0 Times in 0 Posts

    Default can this fade be used?

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

    Thanks!
    Martin

  3. #3
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    28,957
    Thanks
    43
    Thanked 3,195 Times in 3,157 Posts
    Blog Entries
    12

    Default

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

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

  4. #4
    Join Date
    Jul 2005
    Posts
    67
    Thanks
    4
    Thanked 0 Times in 0 Posts

    Default

    Thanks for the input John. It's too bad that effect 12 isn't as smooth as filterrogidXImageTransform.Microsoft.Fade()

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

    Thanks,
    Martin

  5. #5
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    28,957
    Thanks
    43
    Thanked 3,195 Times in 3,157 Posts
    Blog Entries
    12

  6. #6
    Join Date
    Jul 2005
    Posts
    67
    Thanks
    4
    Thanked 0 Times in 0 Posts

    Default

    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

  7. #7
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    28,957
    Thanks
    43
    Thanked 3,195 Times in 3,157 Posts
    Blog Entries
    12

    Default

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

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

  8. #8
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    28,957
    Thanks
    43
    Thanked 3,195 Times in 3,157 Posts
    Blog Entries
    12

    Default

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

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

  9. #9
    Join Date
    Jul 2005
    Posts
    67
    Thanks
    4
    Thanked 0 Times in 0 Posts

    Default

    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

  10. #10
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    28,957
    Thanks
    43
    Thanked 3,195 Times in 3,157 Posts
    Blog Entries
    12

    Default

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