Hacer galeria en rows que se mueva

sergiosala · #1 (**permalink**) 17/03/2013, 00:31

Hola amigos del web!

Tengo una situación, quiero hacer una galería dentro de una página, son rows de 3x3 pero me gustaría que se pasaran 3 veces.

Es un efecto conocido, solo que no encuentro como buscarlo..

¿Me ayudan?

Agrego una imagen para entender mejor.

Gracias!

pzin · #2 (**permalink**) 17/03/2013, 01:49

No entendí muy bien que buscas hacer. ¿Qué es "pasarse tres veces"?

ArturoGallegos · #3 (**permalink**) 17/03/2013, 02:31

es algo simple de hacer, casi cualquier slideshow lo puedes personalizar para esto.

slideshow cycle es uno de los que mas me gustan con la versión 1 tendrás te dejo ejemplo practico ya te tocara visitar la documentación para complementarlo y llegar al resultado deseado.

aquí puedes ver la documentación -> clic aquí

Ejemplo

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" xml:lang="en" lang="en">
<head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8" />
    <meta name="author" content="Arturo Gallegos" />
    <link href="styles.css" rel="stylesheet" type="text/css" />
    <title>Sin título 1</title>
    <script src="http://code.jquery.com/jquery-latest.js"></script>
    <script src="http://malsup.github.com/jquery.cycle.all.js"></script>
</head>
<body>
 
<ul class="slide">
    <li>
        <ul>
            <li><img src="img1.jpg" /></li>
            <li><img src="img1.jpg" /></li>
            <li><img src="img1.jpg" /></li>
            <li><img src="img1.jpg" /></li>
            <li><img src="img1.jpg" /></li>
            <li><img src="img1.jpg" /></li>
        </ul>
    </li>
    <li>
        <ul>
            <li><img src="img1.jpg" /></li>
            <li><img src="img1.jpg" /></li>
            <li><img src="img1.jpg" /></li>
            <li><img src="img1.jpg" /></li>
            <li><img src="img1.jpg" /></li>
            <li><img src="img1.jpg" /></li>
        </ul>
    </li>
    <li>
        <ul>
            <li><img src="img1.jpg" /></li>
            <li><img src="img1.jpg" /></li>
            <li><img src="img1.jpg" /></li>
            <li><img src="img1.jpg" /></li>
            <li><img src="img1.jpg" /></li>
            <li><img src="img1.jpg" /></li>
        </ul>
    </li>
    <li>
        <ul>
            <li><img src="img1.jpg" /></li>
            <li><img src="img1.jpg" /></li>
            <li><img src="img1.jpg" /></li>
            <li><img src="img1.jpg" /></li>
            <li><img src="img1.jpg" /></li>
            <li><img src="img1.jpg" /></li>
        </ul>
    </li>
</ul>
<script type="text/javascript">
<!--
    $('.slide').cycle({
    fx:    'curtainX',
    sync:  false,
    delay: -2000
 });
-->
</script>
 
</body>
</html>

Código CSS:

Ver original@charset "UTF-8";
.slide{width:500px;height:265px;margin:15px auto;padding:0;border:1px #ccc solid;overflow:hidden;}
.slide>li{margin:0;overflow: hidden;height:265px;}
.slide ul{margin:0;padding:0;}
.slide ul li{margin:7px;float:left;border:1px #ccc solid;list-style:none;}
.slide ul img{width:150px;}