Slideshow de imagenes

morfasto · #1 (**permalink**) 18/10/2011, 00:46

Hola, que tal?

Tengo una pagina que tiene un slideshow de imagenes, cuando la cargo funciona perfecto. El problema esta a la hora de agregar nuevas imagenes al div donde se encuentran las imagenes con AJAX.

Este es mi codigo:

Código HTML:

Ver original<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">  
<link rel="stylesheet" href="css/global.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"></script>
<script src="js/slides.jquery.js"></script>
<script>
    $(function(){
        $('#slides').slides({
            preload: true,
            preloadImage: 'img/loading.gif',
            play: 5000,
            pause: 2500,
            hoverPause: true
        });
    });
</script>
</head>
<body>
<div id="slides">
    <div class="slides_container">
        <a href="#" target="_blank"><img src="1.png"></a>
        <a href="#" target="_blank"><img src="2.png"></a>
        <a href="#" target="_blank"><img src="3.png"></a>
        <a href="#" target="_blank"><img src="4.png"></a>
        <a href="#" target="_blank"><img src="5.png"></a>
    </div>
</div>
</body>
</html>

No he puesto la parte de AJAX porque funciona bien y ese no es el problema. El problema esta en esta funcion:

Código HTML:

Ver original<script>
    $(function(){
        $('#slides').slides({
            preload: true,
            preloadImage: 'img/loading.gif',
            play: 5000,
            pause: 2500,
            hoverPause: true
        });
    });
</script>

Ya que cuando cargo las nuevas imagenes con AJAX y PHP, este codigo no se vuelve a leer, por lo tanto no se crea el slideshow.

De que manera podria ejecutarlo cuando muestro las nuevas imagenes para que se cree el slideshow?

Muchas gracias!

morfasto · #2 (**permalink**) 18/10/2011, 00:56

Este es el codigo completo, por si hay alguna duda:

Código HTML:

Ver original<!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" />
<link href="global.css" rel="stylesheet" type="text/css" media="screen" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"></script>
<script src="js/slides.jquery.js"></script>
<script type="text/javascript" language="javascript">
   var http_request = false;
   function makePOSTRequest(url, parameters, funcion) {
      http_request = false;
      if (window.XMLHttpRequest) { // Mozilla, Safari,...
         http_request = new XMLHttpRequest();
         if (http_request.overrideMimeType) {
            // set type accordingly to anticipated content type
            //http_request.overrideMimeType('text/xml');
            http_request.overrideMimeType('text/html');
         }
      } else if (window.ActiveXObject) { // IE
         try {
            http_request = new ActiveXObject("Msxml2.XMLHTTP");
         } catch (e) {
            try {
               http_request = new ActiveXObject("Microsoft.XMLHTTP");
            } catch (e) {}
         }
      }
      if (!http_request) {
         alert('Cannot create XMLHTTP instance');
         return false;
      }
      
      http_request.onreadystatechange = funcion;
      http_request.open('POST', url, true);
      http_request.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
      http_request.setRequestHeader("Content-length", parameters.length);
      http_request.setRequestHeader("Connection", "close");
      http_request.send(parameters);
   }
 
   function alertContents() {
      if (http_request.readyState == 4) {
         if (http_request.status == 200) {
            //alert(http_request.responseText);
            result = http_request.responseText;
            document.getElementById('slides_container').innerHTML = result;            
         } else {
            alert(http_request.status);
         }
      }
   }
   
   function get() {
      var poststr = "eventos=" + encodeURI( document.getElementById("eventos").value );
      makePOSTRequest('eventos.php', poststr, alertContents);
   }
</script>
<script>
    $(function(){
        $('#slides').slides({
            preload: true,
            preloadImage: 'img/loading.gif',
            play: 5000,
            pause: 2500,
            hoverPause: true
        });
    });
</script>
</head>
<body>
<div id="slides">
    <div class="slides_container">
        <a href="#" target="_blank"><img src="1.png"></a>
        <a href="#" target="_blank"><img src="2.png"></a>
        <a href="#" target="_blank"><img src="3.png"></a>
        <a href="#" target="_blank"><img src="4.png"></a>
        <a href="#" target="_blank"><img src="5.png"></a>
    </div>
</div>
<select name="eventos" id="eventos" onchange="javascript:get();">
    <option value=""> Elegir Evento:</option>
    <option value="1">Evento 1</option>
    <option value="2">Evento 2</option>
</select>
 
</body>
</html>

eventos.php

Código PHP:

  <?php

$eventos=$_POST['eventos'];

if($eventos==1){

echo    "<a href='#' target='_blank'><img src='6.png'></a>"

        ."<a href='#' target='_blank'><img src='7.png'></a>";

}elseif($eventos==2){

echo    "<a href='#' target='_blank'><img src='8.png'></a>"

        ."<a href='#' target='_blank'><img src='9.png'></a>"

        ."<a href='#' target='_blank'><img src='10.png'></a>";

}

?>