Foros del Web » Programando para Internet » Javascript »

Cómo muestro un icono al lado de cada foto?

Estas en el tema de Cómo muestro un icono al lado de cada foto? en el foro de Javascript en Foros del Web. Hola amig@s: Tengo estos archivos: "multiupload.html" Código: <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Display thumbnails example</title> <link rel="stylesheet" href="styles.css"/> </head> <body> <h3>Display thumbnails example:</h3> ...
  #1 (permalink)  
Antiguo 18/12/2008, 17:40
Avatar de gabyweb  
Fecha de Ingreso: enero-2002
Ubicación: Lima
Mensajes: 364
Antigüedad: 22 años, 3 meses
Puntos: 0
Pregunta Cómo muestro un icono al lado de cada foto?

Hola amig@s:

Tengo estos archivos:

"multiupload.html"
Código:
<html>
<head>
 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 <title>Display thumbnails example</title>
 <link rel="stylesheet" href="styles.css"/>
</head>
<body>
<h3>Display thumbnails example:</h3>
<br/>
<table>
 <tr>
  <td align="center">
   <div id="MultiPowUpload_holder">You need at least 9 version of Flash player. Download last version 
    <a target="_blank" href="http://www.adobe.com/shockwave/downl...ates/">here</a>!
   </div>
<!-- SWFObject home page: http://code.google.com/p/swfobject/ -->
<script type="text/javascript" src="swfobject.js"></script>
<script type="text/javascript">
 var params = {  
  BGColor: "#F8F6E6"
 };
 
 var attributes = {  
  id: "MultiPowUpload",  
  name: "MultiPowUpload"
 };
 
 var flashvars = {
   uploadUrl: "FileProcessingScripts/PHP/createthumbnail.php",
   useExternalInterface: "Yes",
   fileTypes: "JPEG images|*.jpg\;*.jpeg"
 };
 
 swfobject.embedSWF("ElementITMultiPowUpload2.swf", "MultiPowUpload_holder", "450", "350", "9.0.0", "expressInstall.swf", flashvars, params, attributes);
</script>
  </td>
 </tr>
</table>
<script language="JavaScript">
 //MultiPowUpload_onComplete. Invoked when the upload or download of single file operation has successfully completed
 function MultiPowUpload_onComplete(type, index, serverResponse)
 {
  addThumbnail(serverResponse);
 }
 function addThumbnail(source)
 {
  var Img = document.createElement("img");
  Img.style.margin = "5px";
  if(source != "no_image")
   Img.src = source;
  else
   Img.src = "Images/elementitlogo.gif";
  //document.getElementById("thumbnails").innerHTML = "<a href=\"javascript:alert('Portada de Album')\"><img src=\"icon_photoalbum.gif\" border=\"0\"/></a>";
  document.getElementById("thumbnails").appendChild(Img);
  
 }
</script>
<div id="thumbnails"></div>
</body>
</html>
y este script php: "createthumbnail.php"
Código PHP:
<?php
 
/* Note: GD PHP Extension should be installed on server.  */
//trying restore browser cookie
if(isset($_POST['MultiPowUpload_browserCookie']))
{
 
$cookies split(";"$_POST['MultiPowUpload_browserCookie']);
 foreach(
$cookies as $value)
 {
  
$namevalcookies split("="$value); 
  
$browsercookie[trim($namevalcookies[0])] =  trim($namevalcookies[1]);
 }
 
$_COOKIE $browsercookie;
}
//restore session if possible
if(isset($browsercookie) && isset($browsercookie['PHPSESSID']))

 
session_id($browsercookie['PHPSESSID']);
 
session_start();
}
$uploaddir dirname($_SERVER['SCRIPT_FILENAME'])."/UploadedFiles/";
if(
count($_FILES) > 0)
{
 foreach(
$_FILES as $name=>$arrfile)
 {
  
$filename basename($arrfile['name']);
  
$uploadfile $uploaddir $filename;
//echo $filename." - ".$uploadfile."<br/>";
  
if (move_uploaded_file($arrfile['tmp_name'], $uploadfile))
  {
   
$image = @imagecreatefromjpeg($uploadfile);
   if (
$image)
   {
    
$width imageSX($image);
    
$height imageSY($image);
    
// Build the thumbnail
    
$target_width 100;
    
$target_height 100;
    
$target_ratio $target_width $target_height;
    
$image_ratio $width $height;
    if (
$target_ratio $image_ratio) {
     
$new_height $target_height;
     
$new_width $image_ratio $target_height;
    } else {
     
$new_height $target_width $image_ratio;
     
$new_width $target_width;
    }
    if (
$new_height $target_height) {
     
$new_height $target_height;
    }
    if (
$new_width $target_width) {
     
$new_height $target_width;
    }
    
$new_img ImageCreateTrueColor($target_width$target_height);
    if(!@
imagefilledrectangle($new_img00$target_width-1$target_height-10xFFFFFF))
    {
     echo 
"no_image";
     exit(
0);
        }
    if(!@
imagecopyresampled($new_img$image, ($target_width-$new_width)/2, ($target_height-$new_height)/200$new_width$new_height$width$height))
    {
     echo 
"no_image";
     exit(
0);
        }
    
$thumbnail =  md5($uploadfile rand()*100000).".jpg";
    
imagejpeg($new_img$uploaddir.$thumbnail);
                echo 
dirname($_SERVER['PHP_SELF'])."/UploadedFiles/".$thumbnail;
   }
   else
   {
    echo 
"no_image";
    exit(
0);
      }
  }
  else
  {
   echo 
"no_image";
   exit(
0);
    }
    
 }
}
?>
Funciona correctamente, pero lo que quisiera hacer es colocar un icono con un enlace al lado de cada imagen mostrada. Lo he intentado con la linea comentada en el archivo html, antes del appendchild(Img) y no me sale. Ayuda por favor.

Gracias
__________________
Gaby :adios:
  #2 (permalink)  
Antiguo 18/12/2008, 18:03
Avatar de GatorV
$this->role('moderador');
 
Fecha de Ingreso: mayo-2006
Ubicación: /home/ams/
Mensajes: 38.567
Antigüedad: 18 años
Puntos: 2135
Respuesta: Cómo muestro un icono al lado de cada foto?

Tema trasladado a Javascript.
  #3 (permalink)  
Antiguo 18/12/2008, 18:32
Avatar de Avatar810  
Fecha de Ingreso: agosto-2007
Ubicación: Por rumbos Regios
Mensajes: 485
Antigüedad: 16 años, 8 meses
Puntos: 23
Respuesta: Cómo muestro un icono al lado de cada foto?

No estoy muy seguro de como funciona tu funcion pero supongo que "document.getElementById("thumbnails").appendChild (Img);" coloca en el div la imagen que se crea y en ese caso se sustituye la imagen que pusiste (lo comentarisado) mi sugerencia es despues de appendChild pon la linea "document.getElementById("thumbnails").innerHT ML = document.getElementById("thumbnails").innerHTML+"< a href=\"javascript:alert('Portada de Album')\"><img src=\"icon_photoalbum.gif\" border=\"0\"/></a>";"

Espero te funcione

Saludos
__________________
Una demo siempre funcionará correctamente hasta que toque algo tu (hasta ahora) cliente.
Avatar810
  #4 (permalink)  
Antiguo 19/12/2008, 09:27
Avatar de gabyweb  
Fecha de Ingreso: enero-2002
Ubicación: Lima
Mensajes: 364
Antigüedad: 22 años, 3 meses
Puntos: 0
Respuesta: Cómo muestro un icono al lado de cada foto?

Gracias Avatar por tu respuesta, acabo de probar lo que me dices y nada, ni siquiera muestra las imagenes.

En todo caso, conoces alguna otra forma de hacer esto?

salu2
__________________
Gaby :adios:
  #5 (permalink)  
Antiguo 19/12/2008, 09:50
Avatar de gabyweb  
Fecha de Ingreso: enero-2002
Ubicación: Lima
Mensajes: 364
Antigüedad: 22 años, 3 meses
Puntos: 0
Respuesta: Cómo muestro un icono al lado de cada foto?

Ok ahora sí funciona, fue un error en una línea, gracias de nuevo Avatar
__________________
Gaby :adios:
  #6 (permalink)  
Antiguo 19/12/2008, 09:58
Avatar de Avatar810  
Fecha de Ingreso: agosto-2007
Ubicación: Por rumbos Regios
Mensajes: 485
Antigüedad: 16 años, 8 meses
Puntos: 23
Respuesta: Cómo muestro un icono al lado de cada foto?

Lo que pasa que aun no se bien que es lo que necesitas hacer...

La funcion como yo digo quedaria asi:

function addThumbnail(source)
{
var Img = document.createElement("img");
Img.style.margin = "5px";
if(source != "no_image")
Img.src = source;
else
Img.src = "Images/elementitlogo.gif";
document.getElementById("thumbnails").appendChild( Img);
document.getElementById("thumbnails").innerHTML = document.getElementById("thumbnails").innerHTML + "<a href=\"javascript:alert('Portada de Album')\"><img src=\"icon_photoalbum.gif\" border=\"0\"/></a>";

}
__________________
Una demo siempre funcionará correctamente hasta que toque algo tu (hasta ahora) cliente.
Avatar810
  #7 (permalink)  
Antiguo 19/12/2008, 22:22
Avatar de gabyweb  
Fecha de Ingreso: enero-2002
Ubicación: Lima
Mensajes: 364
Antigüedad: 22 años, 3 meses
Puntos: 0
Respuesta: Cómo muestro un icono al lado de cada foto?

En realidad lo que necesito es subir "n" fotos con barra de progreso, luego mostrar cada foto con un icono al lado que permita establecer la imagen como portada de album.

Hasta ahora sólo he logrado ésto utilizando este componente, pero me limita a 10 archivos como máximo.

Si tienes una mejor sugerencia, te lo agradecería.
__________________
Gaby :adios:
  #8 (permalink)  
Antiguo 22/12/2008, 10:02
Avatar de Avatar810  
Fecha de Ingreso: agosto-2007
Ubicación: Por rumbos Regios
Mensajes: 485
Antigüedad: 16 años, 8 meses
Puntos: 23
Respuesta: Cómo muestro un icono al lado de cada foto?

Realmente no tengo sugerencias pues desconozco lo que hace el componente ni tengo acceso a ver los archivos que lo conforman pero supongo debes de poder editar el codigo y aumentar ese limite de 10
Suerte
__________________
Una demo siempre funcionará correctamente hasta que toque algo tu (hasta ahora) cliente.
Avatar810
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 00:28.