Problem using fadeIn() with images

**fercho07** · 16 Oct 2007 9:21 PM

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 ?

**brian.moeskau** · 17 Oct 2007 1:17 AM

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.

**evant** · 17 Oct 2007 1:21 AM

If you want to wait until the image has loaded:

Code:

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

**fercho07** · 17 Oct 2007 5:26 AM

Originally Posted by brian.moeskau

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.

**fercho07** · 17 Oct 2007 5:29 AM

Originally Posted by evant

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);
        }
    });
});

**fercho07** · 19 Oct 2007 2:22 PM

Originally Posted by brian.moeskau

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?

Problem using fadeIn() with images

Thread Tools

Search Thread

Display

Problem using fadeIn() with images

Problem using fadeIn() with images