Consulta: Explicación del código

[fhederico]

Hola,

Un poco tarde, pero bueno. lo unico que hace ese codigo Javascript (JS) es tomar las imagenes que tu agregas en el div de forma dinamica, asi, tu agregas varias y el solamente las va tomando solo por decirlo de alguna manera, si miras el archivo "index.html" en la linea 60

Código HTML:

<h1>Circle Navigation Effect <span>Bubble-like thumbnail preview for your navigation with CSS3</span></h1>
            <div class="wrapper">
                <div id="cn-slideshow" class="cn-slideshow">
                   
<!-- Aqui se cargan las imagenes  -->
 <div class="cn-images">
                        <img src="images/large/1.jpg" alt="image01" title="Beautiful Scenery 1" data-thumb="images/thumbs/1.jpg" style="display:block;"/>
                        <img src="images/large/2.jpg" alt="image02" title="Beautiful Scenery 2" data-thumb="images/thumbs/2.jpg"/>
                        <img src="images/large/3.jpg" alt="image03" title="Beautiful Scenery 3" data-thumb="images/thumbs/3.jpg"/>
                        <img src="images/large/4.jpg" alt="image04" title="Beautiful Scenery 4" data-thumb="images/thumbs/4.jpg"/>
                    </div><!-- cn-images -->
                </div><!-- cn-slideshow -->
                <p>Hover over the arrows to see the effect.</p>
            </div>
 

En el div "cn-images", toda las imagenes que agregas las ira tomando automaticamente, obviamente deben tener la misma consistencia que las ya existentes


<img src="RUTA IMAGEN" alt="NOMBRE EN CASO DE QUE NO CARGUE" title="TITULO AL PONER EL MOUSE ENCIMA" data-thumb="RUTA IMAGEN"/>

El "data-thumb" hara que lo tome el JS

Saludos