Búsqueda en el Foro:
Buscar


« Ver tema anterior :: Ver siguiente tema »  
Autor Mensaje
Mensaje25-01-2014, 07:58 (UTC)    
Título del mensaje: Como poner un scroll de imagenes

Hola: quisiera saber como hacer esto del scroll, creo que se llama asi.
Lo que busco es poner una especie de "pasa imagenes" donde las imagenes se pasen solas en una especie de recuadro.
Vi algunos tutoriales aquie en PWG, pero no los entiendo, porque no estan claros para alguien que no se experto o conocedor del sistema.
Gracias y aprecio la ayuda
Mensaje25-01-2014, 09:27 (UTC)    
Título del mensaje: Re: Como poner un scroll de imagenes

hola, voy a pasarte uno propio que yo estoy usando, se llama nivo slide y es muy editable:
lo puedes ver aqui:
http://area-electronica.com/slide/slide.html

lo primero debes descargarte el pack de la ultima version en su web:
http://dev7studios.com/plugins/nivo-slider/
mi version es el 3.1 aunque ya van por el 3.2
en la descarga tendras


1º paso: inserta en la parte "head" en este caso, texto sobre la pagina, o bien aconsejado "extra head"
Cita:
<!-- slider nivo javas -->
<link rel="stylesheet" href="/nivo-slider.css" type="text/css" media="screen" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"></script>
<script src="/jquery.nivo.slider.pack.js" type="text/javascript"></script>

<script type="text/javascript">
$(window).load(function() {
$('#slider').nivoSlider({
effect: 'random', // Specify sets like: 'fold,fade,sliceDown'
slices: 15, // For slice animations
boxCols: 8, // For box animations
boxRows: 4, // For box animations
animSpeed: 500, // velocidad de efecto o transicion
pauseTime: 8000, // tiempo de espera de una imagen
startSlide: 0, // Set starting Slide (0 index)
directionNav: true, // boton de next y prew
controlNav: false, // 1,2,3... navigation
controlNavThumbs: true, // Use thumbnails for Control Nav
pauseOnHover: true, // imagen detenida al pasar el raton
manualAdvance: false, // Force manual transitions
prevText: '<img src="/prev.png">', // Prev directionNav text
nextText: '<img src="/next.png">', // Next directionNav text
randomStart: false, // Start on a random slide
beforeChange: function(){}, // Triggers before a slide transition
afterChange: function(){}, // Triggers after a slide transition
slideshowEnd: function(){}, // Triggers after all slides have been shown
lastSlide: function(){}, // Triggers when last slide is shown
afterLoad: function(){} // Triggers when slider has loaded
});
});
</script>
<!-- FIN SLIDE Code -->

- En los enlaces de java en azul, debes subir los archivos a un upload directo que no caduque, si no tienes pidemelo y te paso mi enlace (no caducan)
- La parte verde, llamado false o true, o simplemente parametros, es para que lo edites a tu gusto, solo traducí lo interesante.
en next y prew originalmente eran: << y >> pero admite imagenes por eso te lo deje con el html, aunque debes subir un par de flechas si los quieres poner, si no, con poner <<, >> vale..
Despues de eso, guarda.
2º paso: debes ir donde vayas a poner el slide, y colocar esto:
Cita:
<!-- slide -->
<div class="slider-wrapper">
<div id="slider" class="nivoSlider">
<img src="IMAGEN" width="XXX" height="VVV" title="TEXTO"/>
<img src="IMAGEN" width="XXX" height="VVV" title="TEXTO"/>
<img src="IMAGEN" width="XXX" height="VVV" title="TEXTO"/>
<img src="IMAGEN" width="XXX" height="VVV" title="TEXTO"/>
</div>
</div>
<div id="htmlcaption" class="nivo-html-caption">
</div>

<!-- end slide -->

- IMAGEN: todas las imagenes deben tener el mismo tamaño original, aunque yo haya puesto despues los parametros de width y height, por alguna razon, la imagen natural tiende a cambiarse durante la transicion.
si optas por poner tamaño, puedes poner tanto pixeles, como porcentaje.
- en TITLE: puedes poner un texto que se vera a pie de cada imagen.
si quieres poner mas imagenes, solo es repetir el proceso
<img src="IMAGEN" width="XXX" height="VVV" title="TEXTO"/>
tambien admite html de link, osea:
<a href=""> <img src="IMAGEN" width="XXX" height="VVV" title="TEXTO"/></a>

todo esta en la imaginacion :D cualquier consulta exponla y veré que podemos hacer.
suerte
______________

>las cuestiones de problemas con webs se atienden en el foro.
>Ticket a: ayuda@paginawebgratis.es -- Reportes a: support-es@webme.com
Mensaje26-01-2014, 07:48 (UTC)    
Título del mensaje:

Gracias, intentare hacer lo que me recomendas.
Mostrar mensajes anteriores:   


Powered by phpBB © 2001, 2005 phpBB Group