1. #1
    Ext User fercho07's Avatar
    Join Date
    Jul 2007
    Posts
    26
    Vote Rating
    0
    fercho07 is on a distinguished road

      0  

    Question Problem using fadeIn() with images

    Problem using fadeIn() with images


    Well, i code a script that get some photos in an array from a directory and then show the photos in a bucle one each time before some time. The problem is that the effect appear before the new image was shown, so... it's awful.

    Here is my code:

    index.php
    PHP Code:
    <?php
        ini_set
    ("display_errors","1");
        require(
    "inc/Loader.inc.php");
    ?>
    <html>

    <head>
    <!-- Document title -->
    <title>Photos</title>
    <!-- Meta information -->
    <meta http-equiv="content-type" content="text/html; charset=iso-8859-1"/>
    <meta http-equiv="content-language" content="es"/>
    <meta name="robots" content="all"/>
    <meta name="revisit-after" content="1 days">
    <meta name="language" content="es"/>
        <link rel="stylesheet" type="text/css" href="js/ext-1.1/resources/css/ext-all.css">
        <script type="text/javascript" src="js/ext-1.1/adapter/ext/ext-base.js"></script>
        <script type="text/javascript" src="js/ext-1.1/ext-all.js"></script>
        <script type="text/javascript" src="js/index.js"></script>
    </head>

    <body topmargin="0" leftmargin="0" bgcolor="#333333">

    <p style="margin-top: 0; margin-bottom: 0">&nbsp;</p>
    <div align="center">
      <center>
      <table border="0" cellpadding="0" cellspacing="0" style="border-collapse: collapse" width="760" id="AutoNumber5">
        <tr>
          <td width="100%" style="border: 1px solid #4B4B4B">
          <table border="0" cellpadding="0" cellspacing="0" style="border-collapse: collapse" width="760" id="AutoNumber6">
            <tr>
          <td width="760" style="border-style: solid; border-width: 0" height="110">
          <embed width="760" height="110" src="swf/pageupindex.swf"></td>
            </tr>
            <tr>
          <td width="800" style="border-style: solid; border-width: 0" height="30">
          <img border="0" src="images/up.png" width="760" height="30"></td>
            </tr>
            <tr>
              <td width="760" bgcolor="#666666">
              <div align="center">
                <center>
                <table border="0" cellpadding="0" cellspacing="0" style="border-collapse: collapse" width="702" id="AutoNumber2">
                  <tr>
                    <td>
                        <table border="00" cellpadding="0" cellspacing="0" style="border-collapse: collapse" width="702" id="AutoNumber5">
                          <tr>
                            <td width="420" style="border-style: solid; border-width: 0" valign="top">
                            <?php

                                $idNDD 
    $sistema->ndd->getIds();
                                
    $idNoticia $idNDD[0];
                                
    $noticia $sistema->ndd->getNoticia($idNoticia);
                                
    $idImagenes $sistema->ndd->getIdImagenes($idNoticia);
                                
    $imagen $sistema->ndd->getImagen($idImagenes[0]);

                                print 
    "<table border=\"0\" cellpadding=\"0\" cellspacing=\"0\" style=\"border-collapse: collapse\" width=\"420\" id=\"AutoNumber7\">\n";
                                print 
    "<tr>\n";
                                print 
    "<td width=\"420\" style=\"border: 1px solid #CCCCCC\" bgcolor=\"#333333\" height=\"300\">\n";
                                print 
    "<img id=\"anim\" border=\"0\" src=\"images/ndd/$idNoticia/$imagen[nombre]&w=420&h=300&iar=1&q=95\" width=\"420\" height=\"300\"></td>\n";
                                print 
    "</tr>\n";
                                print 
    "</table>\n";
                                print 
    "</td>\n";
                                print 
    "<td width=\"8\" valign=\"top\">&nbsp;</td>\n";
                                print 
    "<td width=\"272\" valign=\"top\">\n";
                                print 
    "<table border=\"0\" cellpadding=\"0\" cellspacing=\"0\" style=\"border-collapse: collapse\" width=\"272\" id=\"AutoNumber6\">\n";
                                print 
    "<tr>\n";
                                print 
    "<td width=\"272\" style=\"border: 1px solid #CCCCCC\" height=\"300\" bgcolor=\"#72706F\" valign=\"top\">\n";
                                print 
    "<div align=\"center\">\n";
                                print 
    "<center>\n";
                                print 
    "<table border=\"0\" cellpadding=\"0\" cellspacing=\"0\" style=\"border-collapse: collapse\" width=\"250\" id=\"AutoNumber9\">\n";
                                print 
    "<tr>\n";
                                print 
    "<td width=\"250\" valign=\"top\" height=\"257\">\n";
                                print 
    "<p style=\"margin-top: 0; margin-bottom: 0\"><b>\n";
                                print 
    "<font face=\"Arial\" style=\"font-size: 8pt\" color=\"#FFFFFF\">\n";
                                print 
    "&nbsp;</font></b></p>\n";
                                print 
    "<p style='margin-top: 0; margin-bottom: 0'><b>\n";
                                print 
    "<font face='Arial' color='#FFFFFF' style='font-size: 8pt'>\n";
                                print 
    "$noticia[titulo]</font></b></p>\n";
                                print 
    "<p style='margin-top: 0; margin-bottom: 0'><b>\n";
                                print 
    "<font face='Arial' style='font-size: 8pt' color='#FFFFFF'>\n";
                                print 
    "&nbsp;</font></b></p>\n";
                                print 
    "<p style=\"margin-top: 0; margin-bottom: 0\">\n";
                                print 
    "<font face=\"Arial\" style=\"font-size: 8pt\" color=\"#FFFFFF\">\n";
                                print 
    "".nl2br($noticia["descripcion"])."</font></p>\n";
                                print 
    "</td>\n";
                                print 
    "</tr>\n";
                                print 
    "</table>\n";
                                print 
    "</center>\n";
                                print 
    "</div>\n";
                                print 
    "</td>\n";
                                print 
    "</tr>\n";
                                print 
    "</table>\n";

                            
    ?>

                            </td>
                          </tr>
                        </table>
                    </td>
                  </tr>
                  <tr>
                    <td width="702" height="8">
                    </td>
                  </tr>
                  <tr>
                    <td width="702" style="border: 1px solid #CCCCCC" height="20">
                    <img border="0" src="images/ultimosreportajes.png" width="702" height="20"></td>
                  </tr>
                  <tr>
                    <td width="702" height="8">
                    </td>
                  </tr>
                  <tr>
                    <td width="744" style="border: 1px solid #CCCCCC">
                    <?php

                        $idNoticias 
    $sistema->reportajes->getIdsForIndex();
                        print 
    "<div id='thumbs'>";
                        print 
    "<table border='0' cellpadding='0' cellspacing='0' style='border-collapse: collapse'>\n";
                        print 
    "<tr>\n";

                        foreach (
    $idNoticias as $key => $idNoticia) {
                            
    $idImagenes $sistema->reportajes->getIdImagenes($idNoticia);
                            
    $imagen $sistema->reportajes->getImagen($idImagenes[0]);
                            print 
    "<td width='117' bgcolor='#333333'>\n";
                            print 
    "<a href='reportajesdetalle.php?id=$idNoticia' style='text-decoration: none'>";
                            print 
    "<img id='$idNoticia,$idImagenes[0]' border='0' src='inc/phpThumb.php?src=../images/reportajes/$idNoticia/$imagen[nombre]&w=117&h=77&iar=1' width='117' height='77'></a></td>\n";
                        }

                        print 
    "</tr>\n";
                        print 
    "</table>\n";
                        print 
    "</divs>";

                    
    ?>
                    </td>
                  </tr>
                  <tr>
                    <td width="702" height="20">
                    &nbsp;</td>
                  </tr>
                </table>
                </center>
              </div>
              </td>
            </tr>
            <tr>
          <td width="760" style="border-style: solid; border-width: 0" height="8"></td>
            </tr>
            <tr>
          <td width="760" style="border-style: solid; border-width: 0">
          <p align="right" style="margin: 0 25"><font face="Verdana" color="#CCCCCC" size="1">
          </td>
            </tr>
            <tr>
          <td width="760" style="border-style: solid; border-width: 0" height="8">
          <p align="right"></td>
            </tr>
          </table>
          </td>
        </tr>
      </table>
      </center>
    </div>

    </body>

    </html>
    index.js
    HTML Code:
    Ext.onReady(function() {
        var divThumbs = Ext.fly("thumbs");
        divThumbs.setStyle("overflow-x", "hidden");
        divThumbs.setStyle("overflow-y", "hidden");
        divThumbs.setWidth(702);
    
        var oImages = divThumbs.select('img');
        oImages.setOpacity(.6);
    
        divThumbs.on('mouseover', function(e){
            var imgId = e.getTarget().id;
            if (!imgId){return false;}
            if (imgId == "thumbs"){return false;}
            var oImg = Ext.fly(imgId);
            oImg.setOpacity(1);
        });
    
        divThumbs.on('mouseout', function(e){
            var imgId = e.getTarget().id;
            if (!imgId){return false;}
            if (imgId == "thumbs"){return false;}
            var oImg = Ext.fly(imgId);
            oImg.setOpacity(.6);
        });
    
        Ext.Ajax.request({
            url : 'getImagenesIndex.php' ,
            params : {action: 'getIndexImages'},
            method: 'POST',
            success: function (oResponse, oRequest) {
                this.imgActual = 1;
                this.listaImg = Ext.util.JSON.decode(oResponse.responseText);
    
                this.cambiarImg = function () {
                    if (document.images['anim'] == null) return;
                    var el = Ext.fly('anim');
                    el.fadeIn({duration: 1.5});
                    el.dom.src = listaImg[imgActual];
                    imgActual++;
                    if (imgActual == listaImg.length)
                        imgActual = 0;
                }
                this.timer = setInterval("cambiarImg()", 5000);
            },
            failure: function (oResponse, oRequest) {
                Ext.MessageBox.alert('Failed', 'Url: '+ oRequest.url);
            }
        });
    });
    getImagenesIndex.php
    PHP Code:
    <?php
    ini_set
    ("display_errors","1");
    require(
    "inc/Loader.inc.php");

    if (
    $_REQUEST['action'] == 'getIndexImages') {
        
    $idNoticias $sistema->ndd->getIds();
        
    $idNoticia $idNoticias[0];
        
    $idImagenes $sistema->ndd->getIdImagenes($idNoticia);

        
    $myData = array();
        foreach (
    $idImagenes as $key => $idImagen) {
            
    $imagen $sistema->ndd->getImagen($idImagen);
            
    $src "images/ndd/$idNoticia/$imagen[nombre]";
            
    $myData[] = $src;
        }
    }

    echo 
    json_encode($myData);
    ?>
    Any advise ?
    Resiste Al Soberbio, Da Gracia Al Humilde

  2. #2
    Sencha User
    Join Date
    Apr 2012
    Location
    Austin, Texas
    Posts
    4
    Vote Rating
    0
    brian.moeskau is an unknown quantity at this point

      0  

    Default


    Just a guess, but instead of
    Code:
                    el.fadeIn({duration: 1.5});
                    el.dom.src = listaImg[imgActual];
    have you tried
    Code:
                    el.dom.src = listaImg[imgActual]; // <-- first
                    el.fadeIn({duration: 1.5});
    If it's a timing problem with how long it takes the image to load you might try slightly delaying the fadeIn using function.defer.

  3. #3
    Sencha - Ext JS Dev Team evant's Avatar
    Join Date
    Apr 2007
    Location
    Sydney, Australia
    Posts
    17,050
    Vote Rating
    658
    evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute

      0  

    Default


    If you want to wait until the image has loaded:

    Code:
    Ext.get('myImg').on('load', function()
    {
       //fadein here
    }
    );

  4. #4
    Ext User fercho07's Avatar
    Join Date
    Jul 2007
    Posts
    26
    Vote Rating
    0
    fercho07 is on a distinguished road

      0  

    Default


    Quote Originally Posted by brian.moeskau View Post
    Just a guess, but instead of
    Code:
                    el.fadeIn({duration: 1.5});
                    el.dom.src = listaImg[imgActual];
    have you tried
    Code:
                    el.dom.src = listaImg[imgActual]; // <-- first
                    el.fadeIn({duration: 1.5});
    If it's a timing problem with how long it takes the image to load you might try slightly delaying the fadeIn using function.defer.

    I tried this before but with no success.
    Resiste Al Soberbio, Da Gracia Al Humilde

  5. #5
    Ext User fercho07's Avatar
    Join Date
    Jul 2007
    Posts
    26
    Vote Rating
    0
    fercho07 is on a distinguished road

      0  

    Default


    Quote Originally Posted by evant View Post
    If you want to wait until the image has loaded:

    Code:
    Ext.get('myImg').on('load', function()
    {
       //fadein here
    }
    );
    I try with your change, i get near what i want but for some reason the images get a strange effect, their seems to blink severeal times before change.

    index.js
    HTML Code:
    Ext.onReady(function() {
        var divThumbs = Ext.fly("thumbs");
        divThumbs.setStyle("overflow-x", "hidden");
        divThumbs.setStyle("overflow-y", "hidden");
        divThumbs.setWidth(702);
    
        var oImages = divThumbs.select('img');
        oImages.setOpacity(.6);
    
        divThumbs.on('mouseover', function(e){
            var imgId = e.getTarget().id;
            if (!imgId){return false;}
            if (imgId == "thumbs"){return false;}
            var oImg = Ext.fly(imgId);
            oImg.setOpacity(1);
        });
    
        divThumbs.on('mouseout', function(e){
            var imgId = e.getTarget().id;
            if (!imgId){return false;}
            if (imgId == "thumbs"){return false;}
            var oImg = Ext.fly(imgId);
            oImg.setOpacity(.6);
        });
    
        Ext.Ajax.request({
            url : 'getImagenesIndex.php' ,
            params : {action: 'getIndexImages'},
            method: 'POST',
            success: function (oResponse, oRequest) {
                this.imgActual = 1;
                this.listaImg = Ext.util.JSON.decode(oResponse.responseText);
    
                this.cambiarImg = function () {
                    if (document.images['anim'] == null) return;
                    var el = Ext.get('anim');
                    
                    el.on('load', function() {
                       el.fadeIn({duration: 1.5});
                       
                    });
    
                    el.dom.src = listaImg[imgActual];
                    
                    imgActual++;
                    if (imgActual == listaImg.length)
                        imgActual = 0;
                }
                this.timer = setInterval("cambiarImg()", 5000);
            },
            failure: function (oResponse, oRequest) {
                Ext.MessageBox.alert('Failed', 'Url: '+ oRequest.url);
            }
        });
    });
    Resiste Al Soberbio, Da Gracia Al Humilde

  6. #6
    Ext User fercho07's Avatar
    Join Date
    Jul 2007
    Posts
    26
    Vote Rating
    0
    fercho07 is on a distinguished road

      0  

    Default


    Quote Originally Posted by brian.moeskau View Post
    Just a guess, but instead of
    Code:
                    el.fadeIn({duration: 1.5});
                    el.dom.src = listaImg[imgActual];
    have you tried
    Code:
                    el.dom.src = listaImg[imgActual]; // <-- first
                    el.fadeIn({duration: 1.5});
    If it's a timing problem with how long it takes the image to load you might try slightly delaying the fadeIn using function.defer.
    Yes, i realase that is a timing problem so i 'll have to analize how to use defer because i never used it.
    The example starts to work after the first pass, obviously because images are already load, so timing problem.

    Any advise?
    Resiste Al Soberbio, Da Gracia Al Humilde

Thread Participants: 2