Ver Mensaje Individual
  #2 (permalink)  
Antiguo 04/12/2013, 11:21
osobuco
 
Fecha de Ingreso: julio-2013
Mensajes: 34
Antigüedad: 10 años, 9 meses
Puntos: 2
Respuesta: galeria de imagenes

Cita:
Iniciado por mj1984 Ver Mensaje
Buenas tardes,

he hecho una página web con html y flash, ya que mi hosting no me permite tener php (no he padago por ello). Dentro de esa pagina web he creado una galería de imágenes, usando flash. El problema es que tarda demasiado en cargar.

Me han comentado que usando javascript o jquery puedo crear una galeria fácilmente, y que busque ejemplos por interner. Lo he hecho y, efectivamente, he visto que hay muchos ejemplos. El problema es que no sé cómo meterlos en mi archivo html... no tengo mucha idea.

¿Alguien podría echarme una mano? He visto esta página: [url]http://labs.juliendecaudin.com/barousel/#ba_demos[/url], y me gustaría que quedase como el que pone: Barousel+Thslide.

Muchas gracias.
Pues dentro de la etiqueta <head> de tu code tienes que incluir jquery y el plugin

Código HTML:
Ver original
  1. <script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
Después
El pulgin de la galería en la misma etiqueta <head>
Código HTML:
<script src="http://labs.juliendecaudin.com/barousel/js/jquery.barousel.js"></script
y en tu html esto:
Código HTML:
<div id="any_id" class="thslide">
    <div class="thslide_nav_previous">
        <a href="#"> </a>
    </div>
    <div class="thslide_list">
        <ul>
            <li><img src="URL DE TU IMAGEN"></li>                        
   <li><img src="URL DE TU IMAGEN"/></li>  
   <li><img src="URL DE TU IMAGEN"/></li>  
   <li><img src="URL DE TU IMAGEN"/></li>  
   <li><img src="URL DE TU IMAGEN"/></li>  
   <li><img src="URL DE TU IMAGEN"/></li>  
   <li><img src="URL DE TU IMAGEN"/></li>  
   <li><img src="URL DE TU IMAGEN"/></li>  
   <li><img src="URL DE TU IMAGEN"/></li>  
   <li><img src="URL DE TU IMAGEN"/></li>  
   <li><img src="URL DE TU IMAGEN......
        </ul>
    </div>
    <div class="thslide_nav_next">
        <a href="#"> </a>
    </div>
</div>

Finalmente iniciamos el script

Código HTML:
<script>
$('#barousel_itemnav').barousel({
    manualCarousel: 1
});
</script> 

puedes usar cualquiera de estas opciones:



Option Description Default
imageWrapper image container selector '.barousel_image'
contentWrapper content container selector '.barousel_content'
navWrapper navigation container selector '.barousel_nav'
slideDuration duration of each slide in milliseconds 5000 (5 seconds)
navType navigation type:
1 = item navigation;
2 = previous/next navigation;
3 = custom navigation (when using Thslide for example) 1 (item navigation)
fadeIn fade between slides: 0 or 1 1 (activated)
fadeInSpeed fade duration in milliseconds 600 (0.6 seconds)
manualCarousel carousel mode: 0 = automatic; 1 = manual 0 (automatic)
contentResize resize content container: 0 or 1 1 (activated)
contentResizeSpeed content resize speed in milliseconds 300 (0.3 seconds)