Comunidad de diseño web y desarrollo en internet online

Variables PHP y Ajax

Citar            
MensajeEscrito el 20 May 2010 11:59 pm
Buenas noches,
Estoy desarrollando una pagina web en la que hay una galeria con slide de imagenes que coge las informaicones desde una base de datos.

Hasta aqui todo bien porque me funciona, lo unico es que me gustaria que cuando pinche en el enlance para cambiar la sequencia de imagenes, no vuelva a cargar la pagina.

Se que seria posible hacerlo con AJAX pero no teniendo muchas nociones osbre este lenguaje no sabria como hacerlo.

Os paso el codigo:

Código :

<?
   include_once("inc/inicio.php");
   if (!isset($selproyecto)) {
      $selproyecto = "compilation";
   }
?><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Titulo</title>
<link href="css/estilos.css" rel="stylesheet" type="text/css" /> 
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js"></script>
<script type="text/javascript" src="js/mbScrollable.js"></script>
 <script type="text/javascript">
    $(function(){

      $("#slide").mbScrollable({
        width:480,
        elementsInPage:1,
        elementMargin:0,
        height:"auto",
        controls:"#control",
        slideTimer:600,
        autoscroll:true,
        scrollTimer:4000
      });

      /*setTimeout(function(){$("#wrapper").fadeIn();},2000);*/
    });
  </script>
</head>

<body>
<div id="contenedor">
   <div id="cabecera">
       <img src="img/logo.gif" alt="Demos-Design" id="logo" />
        <ul id="menu">
           <li><a href="quienes-somos.php">Quiénes somos</a></li>
            <li>:::</li>
            <li><a href="productos.php">Productos</a></li>
            <li>:::</li>
            <li><a href="paks.php">Packs</a></li>
            <li>:::</li>
            <li><a href="paks.php">Noticias</a></li>
            <li>:::</li>
            <li><a href="paks.php">Contacto</a></li>
        </ul>
    </div>

    <div id="proyectos-destacados">
       <h6>Proyectos destacados</h6>
        <div id="slide">
<? 
   $sql = "SELECT *
         FROM proyectos
         WHERE carpeta = '".$selproyecto."';";
   
   $res = mysql_query($sql);
   $row = mysql_fetch_array($res);
   
   $dir = "proyectos/".$row['carpeta'];
   $d = opendir($dir);  
   while ($file = readdir($d)) {
      if (strchr($file,"imagen")) {
?>   
            <div><img src="proyectos/<?=$selproyecto."/".$file?>" alt="tituloproyecto" /></div>
<?
      }
   }
   closedir($d);
?>        
        </div>
        
        <div id="miniaturas">
<? 
   $sql = "SELECT *
         FROM proyectos
         WHERE estado = '1'
         ORDER BY idproyecto DESC;";
   
   $res = mysql_query($sql);
   while($row = mysql_fetch_array($res)) {
?>   
            <a href="?selproyecto=<?=$row['carpeta']?>"><img src="proyectos/<?=$row['carpeta']?>/miniatura.jpg" alt="<?=$row['titulo']?> ::: <?=$row['empresa']?>" class="miniatura" /></a>
<?
   }
?>
        </div>
        
        <div id="control">
          <div class="pageIndex"></div>
        </div>
    </div>
    
</div>
</body>
</html>
<?
   include_once("inc/final.php");
?>

Por eribertocaria

1 de clabLevel



 

firefox
Citar            
MensajeEscrito el 22 May 2010 04:07 am
Yo crearia un evento click en las miniaturas, capturaria la url y la cargaria via AJAX en el div que tiene la foto principal. Luego via PHP revisaria si es que una llamada AJAX y removeria el codigo extra (doctype, head, body, miniaturas, etc).

Código :

$('#miniaturas a').live('click', function(){
  var href = $(this).attr('href');
  $('#proyectos-destacados').load(href);
  return false;
});

Por NEO_JP

BOFH

5724 de clabLevel

13 tutoriales
12 articulos

Genero:Masculino   Anime Bloggers Premio_Secretos Team Cristalab

Front-end Developer en Washington, DC

chrome
Citar            
MensajeEscrito el 24 May 2010 08:55 pm
Muchas gracias, lo he hecho de otra forma. Ahora pasa la variable pero deja de funcionar la función javascript que ejecuta el slide de las imagenes.

Os dejo el enlance de la pagina: http://www.eribertocaria.com/demos-design/

Gracias, un saludo

Por eribertocaria

1 de clabLevel



 

firefox
Citar            
MensajeEscrito el 24 May 2010 09:31 pm
Muchas gracias, lo he hecho de otra forma. Ahora pasa la variable pero deja de funcionar la función javascript que ejecuta el slide de las imagenes.

Os dejo el enlance de la pagina: http://www.eribertocaria.com/demos-design/

Gracias, un saludo

Por eribertocaria

1 de clabLevel



 

firefox

 

Cristalab BabyBlue v4 + V4 © 2011 Cristalab
Powered by ClabEngines v4, HTML5, love and ponies.