Consulta: Explicación del código

[madman_18]

Hola a todos!

Quería preguntaros sobre un código que se encuentra en http://tympanus.net/codrops/2011/10/...ect-with-css3/ le estoy echando un vistazo pero no entiendo la siguiente parte:

Código Javascript:

<script id="barTmpl" type="text/x-jquery-tmpl">
            <div class="cn-bar">
                <div class="cn-nav">
                    <a href="#" class="cn-nav-prev"><span>Previous</span><div style="background-image:url('${prevSource}');"></div></a>
                    <a href="#" class="cn-nav-next"><span>Next</span><div style="background-image:url('${nextSource}');"></div></a>
                </div><!-- cn-nav -->
                <div class="cn-nav-content">
                    <div class="cn-nav-content-prev">
                        <span>Previous image</span>
                        <h3>${prevTitle}</h3>
                    </div>
                    <div class="cn-nav-content-current">
                        <span>Currently viewing</span>
                        <h2>${currentTitle}</h2>
                    </div>
                    <div class="cn-nav-content-next">
                        <span>Next image</span>
                        <h3>${nextTitle}</h3>
                    </div>
                </div><!-- cn-nav-content -->
            </div><!-- cn-bar -->
        </script>
 

Entiendo que ese trozo de código es el que sirve para hacer la navegación entre las imágenes, pero no entiendo de donde saca la parte:

Código Javascript:

<a href="#" class="cn-nav-prev"><span>Previous</span><div style="background-image:url('${prevSource}');"></div></a>
                    <a href="#" class="cn-nav-next"><span>Next</span><div style="background-image:url('${nextSource}');"></div></a>
 

¿De donde saca esas variables de jQuery??? Es que nunca había visto ese uso

Gracias!!

[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