Como hago este Slideshow?
2 seguidores
Hola,
Estoy diseñando una web y quiero saber el código para hacer un carrusel de diapositivas, parecido al de esta web.
http://www.sagmeisterwalsh.com/work/
Por si no me he explicado, es simplemente que se puedan añadir lo siguiente:
· thumbnail + agrandar/zoom imagen.
·añadir varias imagenes en una sola ventana emergente.
· botones de dirección izquierda + derecha y cerrar.
Gracias por vuestra atención!
emebe
De nada.. Lo que necesites me avisas!
terciograma
Vale muchas gracias!
Acabo de hacer una búsqueda de un tema con todos estos parámetros y he encontrado uno bastante interesante.
http://freebiesbug.com/code-stuff/beetle-html5-template-designers/
Me será más fácil de modificar, ya que incluye variaciones.
emebe
Mmm cada css y js responden al estilo que elijas. Revisa cada linea a ver si esta correctamente ruteada
terciograma
Tengo estas reglas .css incluidas en el archivo y en el código, solamente he añadido el .css owl.carousel (el código no la tenía).
Pero creo que el problema es que ya existe una regla fancybox en el archivo y por eso no funciona.
Quizás debo substituir esta regla fancybox por la regla fancybox-thumb?
Por último, he vinculado estos script de la carpeta source al archivo de mi trabajo, están al final del otro script, pero en el interior del body:
<script src="../../../../../../source/jquery.fancybox.js"></script>
<script src="../../../../../..//source/jquery.fancybox.pack.js"></script>
<script src="../../../../../../source/helpers/jquery.fancybox-media.js"></script>
<script src="../../../../../../source/helpers/jquery.fancybox-thumbs.js"></script>
<script src="../../../../source/helpers/jquery.fancybox-buttons.js"></script>
emebe
Revisa el index del demo en la etiqueta head como cita los css, obvio que aqui solo llama al que vas a utilizar en este caso el de miniaturas con ayuda.
terciograma
He adjuntado la carpeta source, he revisado el demo, he escogido con ayuda de miniaturas y he pegado el .js de fancybox al final de la citación script (sale de lo último).
Las .css no tienen código en la web de fancybox (solamente texto de las imgs), por eso creo que son los archivos copiados de la carpeta source, ¿O debería vincular nuevamente los stylesheet del .css desde la barra propiedades?
emebe
Bien, a la carpeta donde estas trabajando debes copiar todos los archivos de la carpeta source.
Luego te recomiendo ir a la carpeta demo y revisar el index que hay ahi, este trae varios demos, elige uno y utiliza ese codigo para pegar en tu html o php.
No olvides llamar a los css y js desde tu codigo para que funcione correctamente.
Anda paso a paso y cualquier cosa estoy aqui
terciograma
Tan temprano y me surge un problema...
¿Creo que este archivo debo de importarlo al DW, no? Es que acabo de abrirlo y me viene 1 .css y 2 .js
El archivo .css lo he adjuntado a la hoja de estilo, ¿pero los .js donde debería meterlos?
Modifico: La carpeta debo de importarla por completo al programa?
Gracias nuevamente!
emebe
Si.. Es tocar un poco de codigo para acomodarlo a tu plantilla.. Cualquier vosa me avisas
terciograma
Hola @emebe ,
Acabo de buscar el plug-in Fancybox jQuery: http://fancyapps.com/fancybox/#license
¿En el caso de que mi plantilla sea ya creada y deba de modificar esto, podré hacerlo igual, no?
Muchas gracias por tu ayuda,
Seguimos en contacto!
emebe
Buenas! pues en ese sitio estan utilizando wordpress con algun plugin que tambien existen para webs normales sin cms. Fijate de buscar lightbox o fancybox y de seguro te serviran, y tienen listo el codigo para insertar en tu web.