Asignar "nombre" a listas

jmsg75 · #1 (**permalink**) 29/07/2013, 04:59

Hola a todos.

Es mi primera consulta en el foro, y desconozco si la duda que tengo es una tontuna o van a dar el Nobel de Informática al que la resuelva.

Veamos, he utilizado esta plantilla para hacer una web:

[URL="http://tympanus.net/codrops/2012/06/27/responsive-3d-panel-layout/"]http://tympanus.net/codrops/2012/06/27/responsive-3d-panel-layout/[/URL]

Si os fijáis en la parte inferior sale un menú de navegación con unos puntos y unas flechas.

He mirado el código y en el fondo es una lista en la cual cada elemento de la lista son cuatro cajas en las que se colocan las imágenes/texto. Por tanto, cada vez que avanzas por el menú, vas a un nuevo <li> (formado por esas 4 imágenes).

A veces sólo salen 2; es porque al principio de cada elemento de la lista se dice qué porcentaje de ancho y/o alto va a tener la primera imagen/texto. Es decir, que si defino un ancho o un alto del 100%, solamente voy a tener 2 cajas.

Bueno, a lo que iba.

En el código fuente salen los divs del contenedor y las etiquetas <ul> y luego las distintas <li>

Algo parecido a esto:

Código HTML:

Ver original<body>
 
  <div class="container">
    <ul id="sg-panel-container">
      <li data-w="60" data-h="55">
        <img title="" src="images/altatension1.jpg" data-rotate-x="50" />
        <img title="" src="images/altatension2.jpg" data-rotate-y="-50" />
        <img title="" src="images/altatension3.jpg" data-rotate-x="50" data-translate-z="-700" />
          <div data-translate-z="-500" >
            <div class="sg-content">
              <h3>ALTA Y BAJA TENSIÓN</h3>
            </div>
          </div>
      </li>
 
      
      <li data-w="35" data-h="65">
        <img title="" src="images/calculo1.gif" data-translate-x="-300"/>
        <img title="" src="images/calculo2.gif" data-translate-y="300"/>
        <div>
            <div class="sg-content">
              <h3>CÁLCULO DE PIEZAS</h3>
              <p>MEF</p>
            </div>
        </div> 
        <img title="" src="images/calculo3.gif" data-translate-x="300"/>
      </li>
    </ul>
 
  </div>
</body>

Lo que me gustaría es que al poner el ratón en los puntos y flechas de la navegación inferior, aparecieran los nombres de "a dónde va". Es decir, algo parecido a cuando en una imagen se añade la etiqueta "title" y al poner el ratón encima nos da ese "title".

Al abrir la página e inspeccionar el código fuente (uso Chrome),he visto que se ha generado algo así (que no viene en el html original):

Código HTML:

Ver original<nav class="sg-nav" style="opacity: 1;">
<span class="sg-prev"></span>
<span class="sg-dot sg-dot-current"></span>
<span class="sg-dot"></span>
<span class="sg-next"></span></nav>

Me he puesto a investigar y creo que esos "span" se generan con uno de los archivos que vienen en la plantilla, que se llama "jquery,gridgallery.js"

No sé si se podría incluir en cada elemento de la lista una especie de ¿nombre, etiqueta, variable, identificador? de tal manera que se pudiera incluir en el span que se genera para el menú.

Me imagino algo así

Código HTML:

Ver original<li data-w="35" data-h="65" title/name/loquesea="CLIMATIZACION">

Y modificar el js de tal manera que cuando defina esas clases "sg-prev", "sg-dot", "sg-current", etc. salga: "Alta tensión", "Protección contra incendios", "Climatización", etc.

Bueno, no sé si está muy bien explicado o no...

Gracias de antemano.

Un saludo.

jmsg75 · #2 (**permalink**) 02/08/2013, 01:53

Hola de nuevo.

He probado a añadir este código en el javascript ( el archivo jquery.gridgallery.js que cité en el mensaje), pero nada, no logro que aparezca.

Código Javascript:

Ver original$('nav.sg-nav span.sg-prev').attr('title', 'Anterior');
$('nav.sg-nav span.sg-next').attr('title', 'Siguiente');

Además, está claro que sólo serviría para las flechas pero los puntos en sí, seguirían sin indicar nada...

¿Se os ocurre alguna alternativa?