Mostrando las entradas con la etiqueta jQuery. Mostrar todas las entradas
Mostrando las entradas con la etiqueta jQuery. Mostrar todas las entradas

jQuery.popeye avanzada galeria con thumbnails en jQuery

jQuery.popeye avanzada galeria con thumbnails en jQuery


jQuery.popeye es una avanzada galería de imágenes que trabaja con JavaScript jQuery para inline lightbox alternativa de .it que muestra thumbnails y a las imágenes las muestra en lo que llaman popeye Box.

Con jQuery.popeye puedes mostrar una colección de imágenes y ofrecer a sus usuarios un modo agradable y elegante de mostrar varias imágenes en una simple galería sin dejar de ser avanzada.




jTweetsAnywhere - Widget Twitter @Anywhere en jQuery

 jTweetsAnywhere - Widget Twitter @Anywhere en jQuery


jTweetsAnywhere - Este widget automáticamente detecta URL, *hashtags, @usuarios y muestra Hovercards de cada @username o imágenes de perfil en el widget.

Esto también añade un tweetbox a tu sitio donde los usuarios podrán hacer tweets al instante y añaden un botón "conectarse" con los invitados y seguirle sin dejar el sitio.

jTweetsAnywhere viene con muchas opciones para una personalización máxima y deja elegir si mostrar los botones tweetbox, siguir, el número de tweets a ser mostrado y más.



AeroWindow - Ventanas Emergentes estiilo Windows 7 con JQuery

AeroWindow - Ventanas Emergentes estiilo Windows 7 con JQuery



AeroWindow crear un pop-up en el estilo Aero, inspirado en el estilo de Window 7, la ventana emergente le ofrece las opciones habituales y la plena funcionalidad similar a las ventanas de Windows.



Características

  • Especial: Live animados brillante mirada Aero (véase el encabezado cuando se mueve)
  • Habituales botones de la ventana: minimizar, Zoom, Maximizar y Cerrar
  • Haga doble clic en el apoyo, como en las ventanas (maximizar, zoom out)
  • ventana activa se resalta visualmente, como en Windows
  • Desde el tamaño de la ventana usuarios infinitamente escalable
  • Ventana corrediza arrastrando con el ratón
  • Usual orden Z de gestión, como en Windows
  • + Cambiando animados del tamaño de la ventana
  • Múltiples opciones de configuración +




Sexy.js - Libreria Sajax para jQuery

Sexy.js - Libreria Sajax para jQuery



Sexy.js es una biblioteca JavaScript que proporciona una mayor secuencial Ajax (Sajax) funcionalidad, esta libreria permite administrar las dependencias de secuencia de comandos y escribir el código más bonito.







Instalar "Arrastrar para compartir" en tu sitio



"Arrastrar para compartir" es la nueva manera de animar a los visitantes a hacer eso, Hay muchas maneras de que los webmasters pueden crear funciones de agregar el sitio a redes sociales, pero "Arrastrar para compartir" es lo que marca tendencia hoy en día.


Si usas wordPress existe el plugin "Drag To Share" que creara la funcion, los usuarios de tu sitio sólo deben arrastrar una imagen y dejarla caer en uno de los iconos del sitio social al cual quieran compartir toda la página en tiempo real.

Este plugin es básicamente tiene el efecto similar a la barra de Meebo.com y utilizada por algunos sitios como Mashable.




En otro tipo de sitios como por ejemplo Blogger, puedes instalar la barra Meebo la cual trae acceso a más de 100 redes sociales y compatible con Facebook Connect, además puede realizar seguimiento a tus visitantes del sitio.





Otra solucion, si deseas tener un "Arrastrar para compartir" mas personalizado y tienes un par de horas, puedes seguir el tutorial de Nettuts+ el cual podra ayudarte a crear la función de "Arrastrar para compartir", en esta forma puedes agregar muchos sitios web sociales como quieras, si tienes conocimiento en librerías como jQuery y CSS puedes modificar el código de acuerdo con tus necesidades.




Abrir enlaces externos en nueva ventana con jQuery



Este es un hack para enlaces externos de Cats Who Code, es una manera de abrir los enlaces externos en ventana nueva sin causar errores de validación de XHTML 1.0 Strict.

Solo necesitas añadir el siguiente codigo a <head>:


<script type="text/javascript">
$('a[@rel$='external']').click(function(){
this.target = "_blank";
});
</script>


El uso es sencillo, unicamente necesitas añadir a tus enlaces rel="external", ejemplo:

<br /><a href="http://blogger-recursos.blogspot.com" rel="external">Blogger Recursos</a><br />

Crear enlace "Volver al top" con jQuery



Crear un enlace de regresar al top que aparece solo al llegar al pie de pagina, es posible con un codigo creado por Brian Cray bajo libreria jQuery, su instalacion seria cuestion de 5 minutos.

Primero necesitas añadir al <HEAD> la direccion de la libreria jQuery (si aun no la tienes):


<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" type="text/javascript"></script>


Ahora abre un Bloc de Nota y creas el archivo back-to-top.js con el seguiente codigo:

<br />$(function () { // run this code on page load (AKA DOM load)<br /> <br />	/* set variables locally for increased performance */<br />	var scroll_timer;<br />	var displayed = false;<br />	var $message = $('#message a');<br />	var $window = $(window);<br />	var top = $(document.body).children(0).position().top;<br /> <br />	/* react to scroll event on window */<br />	$window.scroll(function () {<br />		window.clearTimeout(scroll_timer);<br />		scroll_timer = window.setTimeout(function () { // use a timer for performance<br />			if($window.scrollTop() <= top) // hide if at the top of the page<br />			{<br />				displayed = false;<br />				$message.fadeOut(500);<br />			}<br />			else if(displayed == false) // show if scrolling down<br />			{<br />				displayed = true;<br />				$message.stop(true, true).show().click(function () { $message.fadeOut(500); });<br />			}<br />		}, 100);<br />	});<br />});<br />


Lo guardas abajo del enlace de jQuery, ejemplo de como quedaria:

<br /><script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" type="text/javascript"></script><br /><script src="DOMINIO.COM/RUTA DEL ARCHIVO/back-to-top.js" type="text/javascript"></script><br />


Ahora añades el siguiente codigo el siguiente codigo al archivo CSS:

<br />#message a<br />{<br />	/* display: block before hiding */<br />	display: block;<br />	display: none;<br /> <br />	/* link is above all other elements */<br />	z-index: 999; <br /> <br />	/* link doesn't hide text behind it */<br />	opacity: .8;<br /> <br />	/* link stays at same place on page */<br />	position: fixed;<br /> <br />	/* link goes at the bottom of the page */<br />	top: 100%;<br />	margin-top: -80px; /* = height + preferred bottom margin */<br /> <br />	/* link is centered */<br />	left: 50%;<br />	margin-left: -160px; /* = half of width */<br /> <br />	/* round the corners (to your preference) */<br />	-moz-border-radius: 24px;<br />	-webkit-border-radius: 24px;<br /> <br />	/* make it big and easy to see (size, style to preferences) */<br />	width: 300px;<br />	line-height: 48px;<br />	height: 48px;<br />	padding: 10px;<br />	background-color: #000;<br />	font-size: 24px;<br />	text-align: center;<br />	color: #fff;<br />}<br />


Ahora solo queda añadir el enlace justo antes de la ectiqueta :

<br /><div id="top"></div><br /><div id="message"><a href="top">Volver al top</a></div><br />


Ya deberia estar visible el scroll en tu sitio, este codigo combina HTML, CSS y jQuery.




SimpleModal - Thickbox para mostrar contenido sin imagen



SimpleModal - Crea un efecto similar al Thickbox, pero su especialidad es mostrar contenido, por ejemplo si quieres que un contenido sea visible si de le hace un click, con SimpleModal lo puesdes conseguir su funcion es in lightbox pero en ves de mostrar una foto muestra contendo, no hay necesidad de que sea una imagen.



MarkItUp! - Editor Javascript creado con librería jQuery



MarkItUp! - Es un plugin Javascript creado con librería jQuery. MarkItUp le permite convertir cualquier textarea en un editor de etiquetas, HTML, Sintaxis de Wiki, BBCode y puede definir tu propio lenguaje de etiquetas.




Uploadify - Cajas para subir archivos en su sitio web con jQuery



Uploadify es un plugin para jQuery que permite una fácil integración de múltiples (o única) Cajas para subir archivos en su sitio web, este plugin requiere Flash.





Tablesorter - Convertir una tabla con etiquetas THEAD y TBODY con jQuery



Tablesorter es un plugin de jQuery para convertir una tabla estándar HTML con etiquetas THEAD y TBODY en una tabla ordenada sin recargar la página, Tablesorter analiza y clasifica los diferentes tipos de datos en las celdas.





DataTables - Añadir controles interativos a tabla HTML con jQuery



DataTables es un plugin para jQuery, esta es una herramienta muy flexible, que añade controles avanzados interactivo para cualquier tabla HTML





jQuery mb.menu - Creación fácil de menú jQuery



jQuery mb.menu es otro componente muy poderoso para la creación fácil de menú jQuery tree multinivel o en el menú contextual (botón derecho del ratón).



Developer | pupunzi.open-lab.com





Aptana Studio - Crear sitios web y aplicaciones web



Aptana Studio es una herramienta creada para crear sitios web y aplicaciones web enormes, soporta una amplia gama de marcos de JavaScript, incluidos jQuery.

Aptana Studio es un entorno de desarrollo web completo que combina las potentes herramientas de edición de HTML, CSS y JavaScript, junto con miles de plugins adicionales creados por la comunidad.




Fresh Sliding Thumbnails Gallery - Galería con PHP y jQuery




Fresh Sliding Thumbnails Gallery - Esta galería muestra la imagen completa en la página con un área miniaturas que se desplaza de forma automática cuando se mueve el ratón.

Es para permitir al usuario hacer zoom en la imagen haciendo click en ella, las miniaturas se deslizan en la barra abajo la imagen según el tamaño de la pantalla.

Esto galería usa PHP para obtener las imágenes de forma automática desde la estructura de carpetas, Las carpetas contendrán los álbumes.







Nivo zoom - Crear galerias en Lightbox con jQuery



Nivo zoom es un plugin creador de álbum de uso muy sencillo, desarrollado en jQuery y la misma tecnología de Nivo Slider del mismo desarrollador.



Nivo zoom viene con 5 tipos diferentes de zoom y puede mostrar captions abajo de las fotos, así como también es configurable la fuente (letras).

La instalación es sencilla, primero debemos añadir los siguientes enlaces antes de la etiqueta :


<link rel="stylesheet" href="DOMINIO.COM/DIRECCION DEL ARCHIVO/nivo-zoom.css" type="text/css" media="screen" />
<script src="http: //ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" type="text/javascript"></script>
<script src="DOMINIO.COM/DIRECCION DEL ARCHIVO/jquery.nivo.zoom.pack.js" type="text/javascript"></script>


Abajo de los enlaces añadimos el script DOM, que posee la configuracion:

<br /><script type="text/javascript"><br />$(window).load(function() {<br />	$('body').nivoZoom({<br />		speed:500,<br />		zoomHoverOpacity:0.8,<br />		overlay:false,<br />		overlayColor:'#333',<br />		overlayOpacity:0.5,<br />		captionOpacity:0.8<br />	});<br />});<br /></script><br />


Ahora ya podemos usar el plugin para crear galerías, solo debemos usar la clase class="nivoZoom", ejemplo :

<br /><a href="DOMINIO.COM/DIRECCION DEL ARCHIVO/images/pic_large.jpg" class="nivoZoom"><br />	<img src="DOMINIO.COM/DIRECCION DEL ARCHIVO/images/pic.jpg" alt=""      /><br /></a><br />






jQuery Scrollable - Crear Scroll en jQuery




jQuery Scrollable - Plugin que crea un loop de elementos de desplazamiento con HTML, este plugin tiene la capacidad de cuando llega al último elemento de navegación vuelve al primer elemento y viceversa.

Este script scroll es gratuito y basado en jQuery,  es muy fácil de usar y agregar las variadas funciones de desplazamiento a tu sitio web.

Características de jQuery Scrollable:

  • Scroll Circular
  • Scroll con Navigator
  • Scroll de desplazamiento automático
  • Scroll con desplazamiento con la rueda del ratón






Bookmark - Instalar marcadores sociales en jQuery



Un plugin de jQuery que establece un div para permitir que los usuarios compartan su página en varios sitios de bookmarking.

Comparte tu página con cualquier número de sitios bookmarking. Las características incluyen:

  • Completo y versiones compactas.
  • Personalizable lista de sitios.
  • Fácil añadido de nuevos/otros sitios.
  • Favoritos y E-mail enlaces.
  • Marcar una página que no sea la actual.

La instalación es algo sencilla:

Primero añades en el head la ruta de la libreria jQuery:


<script type="text/javascript" src="http ://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>


Seguido añades la ruta del estilo CSS y la librería jQuery del plugin:

<br /><style type="text/css">@import "DOMINIO.COM/RUTA DEL ARCHIVO/jquery.bookmark.css";</style> <br /><script type="DOMINIO.COM/RUTA DEL ARCHIVO/text/javascript" src="jquery.bookmark.js"></script><br />


abajo añadimos el DOM script :

<br /><script type='text/javascript'><br />$(selector).bookmark();<br /></script><br />


si no deseas mostrar todos los sitios, sino solo lo que tu quieras entonces usarías algo así:

<br /><script type='text/javascript'><br />$(selector).bookmark({sites: ['delicious', 'digg']});<br /></script><br />


Bien ahora ya se puede crear crear el DIV donde quieres el botón de compartir:

<br /><div id="defaultBookmark" class="hasBookmark"> <br />    <div class="bookmark_popup"> <!-- Clase si es ventana emergente --> <br />        <ul class="bookmark_list"> <!-- Clase si es estilo bookmark_compact --> <br />            <li><a href="DIRECCION URL o CODIGO DE LA DIRECCION"> <br />                <span class="iconsStyle"/> Nombre a mostrar</a></li> <br />            <!-- Opcional estilo de la URL --> <br />            <li><a href="DIRECCION URL o CODIGO DE LA DIRECCION"> <br />                <span class="background-image: url(icons.gif);"/> Nombre a mostrar</a></li> <br />            <!-- Opcional estilo de la URL --> <br />            <li><a href="DIRECCION URL o CODIGO DE LA DIRECCION"><img src="icon.png" /> Nombre a mostrar</a></li> <br />            : <br />        </ul> <br />    </div> <br /></div><br />






Open Standard Media Player - Reproductor en jQuery




Open Standard Media Player - Este reproductor es de codigo abierto bajo licencia (GPL), es un todo en un reproduce cualquier tipo de multimedia para un sitio web.

Este reproductor multimedia es una evolución del código abierto,  reproduce todo tipo de media de forma dinámica para ofrecer mejor rendimiento al sitio web, incluyendo HTML5, YouTube, Vimeo, y Flash.



jQuery Plugin FancyBox - crear Lightbox con captions en jQuery




jQuery Plugin FancyBox ha sido un gran éxito y ahora está siendo utilizado en una gran cantidad de sitios web.  FancyBox solo permite títulos cortos, pero puedes crear largas leyendas (caption) lo que lo diferencia de otros plugins Lightbox.

Esta versión de FancyBox se ha modificado para manejar los subtítulos de una manera más interactiva. Así no dañar la estética con grandes títulos.




Suscripciones

Blog Archivo