secuencia de 5 imagenes en dreamweber

mateosma · #1 (**permalink**) 05/07/2012, 12:35

Hola nuevamente!. Debe ser sencillo...pero no logro hacerlo!:
En un sector de mi página debo colocar una imagen con las flechas de next/previous, y, al hacer click en dichas flechas pasar a la siguiente foto. Son en total 5 fotografías.
No encuentro cómo hacerlo en dreamweber, ni cómo insertar un código html para que funcione.....http://static.forosdelweb.com/fdwtheme/images/smilies/chillando.png
¿algún genio de uds. puede colaborar conmigo?????

kalvinman · #2 (**permalink**) 05/07/2012, 13:08

Para esto debes usar alguna libreria javascript o comportamiento, te recomiendo usar este carrusel, ya que es compatible con jquery y no da problemas con otros scripts

http://tupale.org/carrusel-jquery-co...-lightbox.html

Puedes ver un ejemplo de este en el home de esa misma pagina. xD

vicram10 · #3 (**permalink**) 05/07/2012, 14:04

el ejemplo que te dan es mucho mejor que lo que yo hice para darte un ejemplo...

pero te dejo por si quieras "ver"

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" />
<title>Ejemplo Simple con Jquery de Anterior - Siguiente en Imagenes</title>
<script type="text/javascript">
    var cantidad_imagenes = 4;
</script>
</head>
<body>
<img src="http://cdn.clasipar.com/pictures/photos/004/665/756/vga_IMG00392-20120501-1424.jpg" id="view_1" data="1" style="display:block;" />
<img src="http://cdn.clasipar.com/pictures/photos/004/665/770/vga_IMG00384-20120429-1005.jpg" id="view_2" data="2" style="display:none;" />
<img src="http://cdn.clasipar.com/pictures/photos/004/665/774/vga_IMG00395-20120501-1426.jpg" id="view_3" data="3" style="display:none;" />
<img src="http://cdn.clasipar.com/pictures/photos/004/665/779/vga_IMG00390-20120501-1424.jpg" id="view_4" data="4" style="display:none;" />
<br />
<a href="javascript:void(0);" onclick="Anterior()">&laquo;</a> <a href="javascript:void(0);" onclick="Siguiente()">&raquo;</a>
<!-- llamamos al jquery -->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"></script>
<!-- aqui le decimos que queremos hacer -->
<script type="text/javascript">
    function Siguiente()
    {
        var data = 0;
        var id = "";
        for (i=1; i <= cantidad_imagenes; i++)
        {
            var display = $('#view_'+i).css('display');
            if (display != 'none')
            {
                data =  parseFloat($('#view_'+i).attr('data'));
                id = "view_"+i;
                break;                                      
            }
            
        }
        var new_data = 0;
        if (data >= cantidad_imagenes)
        {
            new_data = 1;   
        }else{
            new_data = data + 1; 
        }
        <!-- ocultamos -->
        $('#'+id).css('display', 'none');
        $('#view_'+new_data).css('display', 'block');
    }
    
    function Anterior()
    {
        $(document).ready(function() { 
            var data = 0;
            var id = "";
            for (i=1; i <= cantidad_imagenes; i++)
            {
                var display = $('#view_'+i).css('display');
                if (display != 'none')
                {
                    data =  parseFloat($('#view_'+i).attr('data'));
                    id = "view_"+i;
                    break;                                      
                }
            }
            //obetenemos el nuevo valor para luego mostrar su img
            calculo_data = data - 1;
            var new_data = 0;
            if (calculo_data < 1)
            {
                new_data = cantidad_imagenes;   
            }else{
                new_data = data - 1; 
            }
            <!-- ocultamos -->
            $('#'+id).css('display', 'none');
            $('#view_'+new_data).css('display', 'block');
        }); 
    }
</script>
</body>
</html>

Lo hice ahora como ejemplo, pero hace lo que uno quiere jejejeje.. ;)