Solo tienes que observar el slide en acción:
Implementar
Aloja a los dos archivos a un
servicio de alojamiento:
 style.css jquery.featureList-1.0.0.js
|
Una vez alojados, incluye las URL de los dos archivos en el siguiente código:
Ya incluidas, coloca el código antes de:
Por ultimo, solo coloca el siguiente código HTML como elemnto HTML/Javascript o en una entrada:
Y listo, ya debería estar funcionando.
A continuación observa el carousel en acción.
Implementar
Antes que nada edita el archivo xml y alojalo junto con los otros dos archivos a un
servicio de alojamiento:
 default.xml Carousel.swfswfobject.js
|
Una vez alojados, coloca las URL en el siguiente código Javascript:
Ya colocadas, incluye el código Javascript como elemento HTML/Javascript:
Y por ultimo, coloca antes de:
el siguiente código CSS:
Guardamos la plantilla y listo, ya deberia de estar funcionando.
Solo observa el slide en acción:
Implementar
Antes que nada edita el archivo CSS y alojalo junto con los dos archivos javascript a un
servicio de alojamiento:
|
style.cssjquery-1.2.6.jsstartstop-slider.js
|
Una vez alojados, coloca las URL de los tres archivos en el siguiente código:
Ahora coloca el mismo código anterior antes de:
Por ultimo, solo incluye el siguiente código HTML en una entrada o como elemento HTML/Javascript:
Y listo, ya debería estar funcionando.
Solo tienes que ver la galería en acción.
Implementar
Recuerda editar el archivo CSS antes de alojarlo y fija las rutas de acceso a las imagenes.
|
panning-slideshow.css
|
Una vez editado, alójalo a un
servicio de alojamiento junto con los otros tres archivos:
|
image-rotator.jsjquery.easing.1.3.jsjquery.timer.js
|
Incluye los archivos Javascript antes de:
y en el orden específico como se muestra en el siguiente ejemplo:
Ahora, coloca el siguiente código en una entrada o como elemento HTML/Javascript:
Y listo, ya debería estar funcionando.
Solo tienes que observar la galería en acción.
Implementar
Aloja los dos archivos Jquery a un
servicio de alojamiento:
|
easySlider1.5.jsjquery.js
|
Incluyelos antes de:
y en el orden específico como se muestra en el siguiente ejemplo:
Ahora coloca el siguiente código CSS antes de:
Por ultimo, solo coloca el siguiente código HTML donde quieres que aparesca la galería:
Y listo, ya debería estar funcionando.
Solo tienes que observar los slideshows en acción.
Primer slideshow:
Segundo slideshow:
Implementar
Aloja el archivo javascript a un
servicio de alojamiento:
|
s3Slider.js
|
una vez alojado, coloca antes de:
el siguiente código que es para el primer slideshow:
Ahora incluye antes de:
el siguiente código CSS:
Después, coloca el siguiente código HTML en una entrada o como elemento HTML/Javascript:
Recuerda que los tres códigos anteriores son para el primer slideshow.
Ahora los siguientes códigos, son para el segundo slideshow.
Incluye antes de:
el siguiente código:
Después incluye antes de:
el siguiente código CSS:
Por ultimo, coloca el siguiente código HTML en una entrada o como elemento HTML/Javascript:
Guardamos y listo, ya deberían de estar funcionando.
Solo tienes que observar la galería en acción.
Implementar
Primero edita el archivo CSS:
|
style.css
|
Una vez editado, alojalo a un
servicio de alojamiento junto con el archivo Javascript:
|
compressed.js
|
Ya editado el CSS y alojados, coloca las URL en el siguiente código Javascript:
Ahora el mismo código Javascript, colócalo antes de:
Y por ultimo, solo coloca el código HTML en donde quieres que se vea el slideshow:
Nada más coloca las imagenes en sus respectivos lugares y listo ya deberia de estar funcionando.
Coloca el cursor encima del menú para verlo en acción:
Demo
Implementar
Primero que nada, edita el archivo CSS y alojalo junto con los otros tres archivos javascript a un
servicio de alojamiento:
|
main.cssjquery.jsjquery-color.jsmain.js
|
Luego, coloca las URL de los archivos en el siguiente código:
Una vez colocadas, incluye todo el código anterior antes de la etiqueta:
Y por ultimo, solo incluye el siguiente código HTML en una entrada o como elemento HTML/Javascript:
Guardamos y listo, ya debería estar funcionando el menú.
Solo observa el slide en acción:
Implementar
Primero aloja el archivo javascript a un
servicio de alojamiento:
|
jquery-1.3.1.min.js
|
Después, coloca la URL del archivo javascript en el siguiente código:
Ahora coloca todo el código anterior antes de la etiqueta:
Por ultimo, solo incluye el siguiente código HTML en una entrada o como elemento HTML/Javascript:
Y listo, ya debería estar funcionando el menú.
Coloca el cursor encima del menú para verlo en acción:
Implementar
Primero que nada aloja los tres archivos javascript a un
servicio de alojamiento:
|
jquery-1.2.3.min.jsjquery.easing.min.jsjquery.lavalamp.min.js
|
Una vez alojados, incluye las URL de los tres archivos javascript en el siguiente código:
Ahora coloca todo el código antes de:
Después, coloca antes de:
el siguiente código CSS:
Por ultimo, incluye los siguientes códigos HTML en una entrada o como elemento HTML/Javascript:
Primer menú:
Segundo menú:
Guardamos y listo, ya deberían estar funcionando.
Coloca el cursor encima del menú para verlo en acción:
Implementar
Edita el archivo CSS y alojalo junto con los otros dos archivos a un
servicio de alojamiento:
Una vez alojados, incluye las URL de los tres archivos en el siguiente código:
Ya incluidas, coloca el código antes de:
Ahora coloca antes de:
el siguiente codigo CSS:
Por ultimo, solo coloca el siguiente código HTML en una entrada o como elemento HTML/Javascript:
Y listo, ya debería estar funcionando.
Solo tienes que colocar el cursor encima del menú para verlo en acción.
Implementar
Edita el archivo CSS antes de alojarlo junto con los otros dos archivos a un
servicio de alojamiento:
|
styles.cssjquery.jssliding_effect.js
|
Ahora incluye las URL de los tres archivos alojados en el siguiente código:
Una vez incluidas, coloca el código antes de:
Por ultimo, solo tienes que colocar el siguiente código HTML como elemnto HTML/Javascript o en una entrada:
Y listo, ya debería estar funcionando.
Coloca el cursor encima del menú para verlo en acción.
Implementar
Edita el archivo CSS antes de alojarlo y fija las rutas de acceso a las imagenes.
|
style.css
|
Una vez editado, alójalo a un
servicio de alojamiento junto con los otros dos archivos:
|
jquery-1.2.6.min.jsjquery.backgroundPosition.js
|
Asegurate de incluirlos antes de:
Todos los archivos Javascript deberán de ir en el orden específico como en el siguiente ejemplo:
Ahora el siguiente código colocalo en una entrada o como elemento HTML/Javascript:
Y listo, ya debería estar funcionando.
En el primer menú haz clic sobre el y en el segundo solo tienes que colocar el cursor encima del menú.
Implementar
Aloja el archivo jquery a un
servicio de alojamiento:
|
jquery.js
|
Incluyelo antes de:
y en el orden específico como se muestra en el siguiente ejemplo:
Ahora, coloca el siguiente código donde quieres que aparezca el primer menú o el
segundo, ya sea en una entrada o como elemento HTML/Javascript:
Primer menú:
Segundo menú:
Y por ultimo, edita el siguiente código css cambiandole el tipo de letra y color de fuente:
y lo colocas antes de:
Guardamos y listo, ya debería estar funcionando.
Coloca el cursor encima del menú para verlo en acción.
Implementar
Edita el archivo CSS colocando las URL de tus imagenes en sus respectivos lugares.
|
menu.css
|
Una vez editado, alójalo a un
servicio de alojamiento junto con los otros dos archivos jquery:
|
jquery.jsmenu.js
|
Asegurate de incluirlos antes de:
Todos los archivos que alojaste, deberán de ir en el orden específico como en el siguiente ejemplo:
Después, coloca antes de:
el siguiente código:
Ahora, coloca el siguiente código en una entrada o como elemento HTML/Javascript:
Y listo, ya debería estar funcionando.
Fresh Bottom Slide Out Menú
|
Coloca el cursor encima del menú para verlo en acción.
Implementar
Edita el archivo CSS colocando las URL de tus iconos en sus respectivos lugares.
|
style.css
|
Una vez editado, alójalo a un
servicio de alojamiento junto con el archivo jquery:
|
jquery-1.4.2.min.js
|
Asegurate de incluirlos antes de:
Los dos archivos que alojaste, deberán de ir en el siguiente código:
Nada mas coloca el siguiente código en donde quieres que aparesca el menú ya sea en una entrada o como HTML/Javascript:
Y listo, ya debería estar funcionando.
Coloca el cursor encima del menú para verlo en acción:
Implementar
Antes que nada aloja los cuatro archivos a un
servicio de alojamiento:
|
_web.cssstyle.cssmootools-1.2-core.js_class.viewer.js
|
Una vez alojados, incluye las URL de los cuatro archivos en el siguiente código:
Ahora coloca el código antes de:
Por ultimo, solo incluye el siguiente código HTML en una entrada o como elemento HTML/Javascript:
Nada más coloca las URL de las imagenes y listo, ya debería estar funcionando.
Haz clic en las pestañas del menú para verlo en acción.
Implementar
Edita el archivo CSS fijando la url de la imagen antes de alojarlo a un
servicio de alojamiento.
|
style.css
|
Una vez editado, alójalo a un
servicio de alojamiento junto con los otros dos archivos jquery:
|
jquery-1.4.2.min.jsslotmachine.js
|
Asegurate de incluir antes de:
los archivos Javascript en el orden específico como en el siguiente ejemplo:
Ahora el siguiente código, colocalo donde quieres que vaya la galería ya sea en una entrada o como elemento HTML/Javascript:
Y listo, guardamos y ya debería estar funcionando.
Haz clic en las imagenes de abajo para verlo en acción.
Implementar
Conecta el Javascript y archivos CSS a su documento.
Edita los archivos CSS antes de alojarlos y fija las rutas de acceso a las imagenes y cambia los colores para adaptarse a tu tema
del sitio.
|
custom.cssspacegallery.css
|
Importante: asegurate de incluir los archivos Javascript en el orden específico como en el ejemplo siguiente:
Todo lo anterior colocalo antes de:
Recuerda alojar los archivos a un servicio de alojamiento. Yo te recomiendo utilizar
Dropbox.
Ahora el siguiente código que es donde van las imagenes, colocalo en una entrada:
Y listo, ya debería estar funcionando.
Smooth Gallery-1.2-Namespaced
|
Haz clic en las flechas de la galería o en la pestaa(pictures) para verla en acción.
Implementar
Edita los archivos CSS fijando las urls de las imagenes antes de alojarlo a tu
servicio de alojamiento.
|
jd.gallery.csslayout.css
|
Una vez editado, alójalos junto con los otros dos archivos jquery:
|
jd.gallery.namespaced.jsmootools.namespaced.js
|
Asegurate de incluirlos antes de:
cada uno en el orden específico como en el siguiente ejemplo:
Por ultimo, coloca el siguiente código donde quieres que aparesca la galería ya sea en una entrada o como elemento
HTML/Javascript:
Guardamos y listo, ya debería estar funcionando.
Coloca el cursor encima del menú para verlo en acción:
Implementar
Edita los siguientes dos archivos CSS-Javascript:
|
lightbox.csslightbox++.js
|
Y alojalos junto con los otros dos archivos Javascript a un
servicio de alojamiento:
|
prototype.jsscriptaculous.js
|
Una vez alojados, coloca las URL de los cuatro archivos en el siguiente código:
Ahora incluye el código anterior antes de:
Por ultimo, coloca el siguiente código HTML en una entrada o como elemento HTML/Javascript:
Y listo, ya debería estar funcionando.
Haz clic en las imagenes para ver la ventana modal en acción.
Implementar
Edita los archivos CSS fijando las rutas de acceso a las imagenes antes de alojarlos.
|
visuallightbox.cssvlightbox.css
|
Una vez editados, alójalos a tu
servicio de alojamiento junto con los otros dos archivos Jquery:
|
jquery.min.jsvisuallightbox.js
|
Asegurate de incluir los dos archivos CSS y el archivo jquery.min antes de:
y en el orden específico como en el siguiente ejemplo:
Ahora incluye el archivo visuallightbox.js en el siguiente código:
Una vez colocado el archivo, copea y coloca todo el código como elemento HTML/Javascript.
Y listo, ya debería estar funcionando.
Haz clic en las imagenes para ver las ventanas en acción.
Implementar
Edita el archivo CSS fijando las url de cada imagen en donde corresponden.
|
pirobox.css
|
Una vez editados, alójalos a un
servicio de alojamiento junto con los otros cuatro archivos Jquery:
|
jquery1.2.6.jspirobox.jspirobox_min.jspiroBox_packed.js
|
Asegúrate de incluir todos los archivos CSS/Jquery antes de:
y en el orden específico como se muestra a continuación:
Ahora copea el siguiente código si quieres la primera galería:
O copea el siguiente código si quieres la segunda galería:
Si prefieres la tercera, copea el siguiente código:
Recuerda colocarlos en una entrada o como elementos HTML/Javascript. Y listo, ya debería estar funcionando.
Haz clic en una imagen para ver la ventana modal en acción.
Implementar
Antes que nada edita el archivo CSS:
|
lightbox.css
|
Una vez editado, alojalo a un
servicio de alojamiento junto con los tres archivos Javascript:
|
prototype.jsscriptaculous.jslightbox.js
|
Ya estando alojados los cuatro archivos, coloca las URL en el siguiente código Javascript:
Ya colocadas, incluye el mismo código Javascript antes de:
Por ultimo, coloca el código HTML en una entrada o como elemnto HTML/Javascript:
Nada más coloca las URL de las imagenes en sus respectivos lugares y listo.
Para todos aquellos blogueros que les gusta diseñar su web/blog con un reloj, contador, encuesta, reproductor, etc.
A continuación les dejo la siguiente recopilación de widgets:
Espero les sean de gran utilidad.
Exjemplos es un blog dedicado a presentar una serie de efectos enfocados en jquery, prototype y mootools.
Los efectos demostrados en Exjemplos se pueden utilizar en cualquier forma que desee sin atribución.
Si tiene sugerencias o comentarios sobre algun efecto en específico por favor, háganoslo saber.
Contacte con nosotros usando el formulario o por correo.
Enviar un email a:
A continuación utiliza el editor de texto para verlo en acción:
Primero que nada edita el siguiente archivo CSS:
|
style.css
|
y alojalo junto con los otros cuatro archivos a un
servicio de alojamiento:
|
mootools-1.2-core.js_uif.js_class.wysiwyg.packed.js_web.css
|
Una vez alojados, coloca las URL en el siguiente código Javascript:
Ya colocadas, incluye el código Javascript antes de:
Y por ultimo, coloca el codigo HTML en donde quieres que aparesca el editor de texto ya sea en una entrada o como elemento
HTML/Javascript: