Fue lanzado en este momento (gracias a la autora alerta de Michael Jackson JI ) versión 3.0 beta Shadowbox.js . Además del nuevo diseño del sitio aquí es que los cambios más importantes en esta versión anterior:
Artículos con la etiqueta 'discreto JavaScript'
Shadowbox 3.0 beta
Acordeón simple con la clase de USimpleTabStrip
La clase USimpleTabStrip , presentado en TabStrip simple discreto , también se puede usar para lograr un acordeón menú sencillo .
offerti da Scriptaculous : Uso de los efectos de BlindUp() y BlindDown() ofrecido por Scriptaculous :
1 2 3 4 5 6 7 8 9 10 | función init () { USimpleTabStrip ( ) ; Uts USimpleTabStrip = new (); ; uts init ().; function ( e ) { uts. OnShow = function (s) { ( e ) ; . Efecto BlindDown nueva (s); } function ( e ) { uts. OnHide = function (s) { ( e ) ; . Efecto BlindUp nueva (s); } } |
Y mediante la sustitución de los elementos HTML ( código HTML ):
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 | "accordion" > < div class = "acordeón"> "#acc1" > Accordion 1 < / a > < un href = "# ACC1"> Accordion 1 </ un > "acc1" >< / a > < un name = "ACC1"> </ un > < div > h1 > < h1 > Contenido # 1 </ h1 > p > < p > Bla, bla, bla .... </ p > </ div > "#acc2" > Accordion 2 < / a > < un href = "# ACC2"> Acordeón 2 </ un > "acc2" >< / a > < un name = "ACC2"> </ un > < div > h1 > < h1 > Contenido # 2 </ h1 > p > < p > Bla, bla, bla .... </ p > </ div > "#acc3" > Accordion 3 < / a > < un href = "# ACC3"> Acordeón 3 </ un > "acc3" >< / a > < un name = "ACC3"> </ un > < div > h1 > < h1 > # 3 Contenido </ h1 > p > < p > Bla, bla, bla .... </ p > </ div > </ div > |
Se obtendrá por un acordeón menú simple que se puede utilizar en una extremadamente rápida.
TabStrip simple discreto
USimpleTabStrip JavaScript discreto es el de mejorar el ancla clásica (todavía) en el interior de una página HTML. Esta fuente es una mejora de la función presentada en TabStrip discreto . En esta versión, así como adaptar el código para liberar 1.6 de prototype.js ha creado una verdadera clase para manejar el TabStrip. La liberación se presenta aquí es muy simple y directo. Su trabajo principal consiste en la adición de un evento de clic en el vínculo de anclaje normal. Estilos CSS no se presentan también, sólo para dejar la máxima libertad de acción, pero usted puede conseguir un TabStrip efectiva con unas pocas líneas adicionales de código CSS, consulte Adición de estilos CSS a continuación.
Código HTML
La clase USimpleTabStrip trabaja en un simple HTML, sftuttando el ancla ( <a name></a> ):
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 | <-! Simple lista de enlaces de la página -> < ul > = "#tbs1" > Link 1 < / a >< / li > < a > < un href = "# Tbs1"> Enlace 1 </ un > </ viaje > = "#tbs2" > Link 2 < / a >< / li > < a > < un href = "# tbs2"> Enlace 2 </ un > </ viaje > = "#tbs3" > Link 3 < / a >< / li > < a > < un href = "# tbs3"> Enlace 3 </ un > </ viaje > </ ul > <- Bloques, separadores -> "tbs1" >< / a > < un name = "Tbs1"> </ un > < div > h1 > < h1 > Listado # 1 </ h1 > p > < p > Bla, bla, bla .... </ p > </ div > "tbs2" >< / a > < un name = "tbs2"> </ un > < div > h1 > < h1 > Listado # 2 </ h1 > p > < p > Bla, bla, bla .... </ p > </ div > "tbs3" >< / a > < un name = "tbs3"> </ un > < div > h1 > < h1 > Data # 3 </ h1 > p > < p > Bla, bla, bla .... </ p > </ div > |
funziona da contenitore. La etiqueta div justo por debajo del anclaje a trabajar como un contenedor.
Las técnicas de reemplazo de texto en Flash
La técnica de reemplazo de texto que les presento hoy es, en algunos aspectos, muy interesante. A diferencia de la sustitución de la imagen clásica es para el uso de CSS , esta técnica utiliza una película de Flash para sobrescribir los títulos de nuestro sitio. Aunque es un poco más articulado, ya que requiere la creación de una película Flash y el uso de JavaScript, permite obtener una serie de ventajas considerables:
- Mantiene la accesibilidad "en el sitio con un verdadero valor discreto con Javascript , para que los rastreadores, arañas seguir viendo la página como HTML simple y correcta
- No requiere la creación de n por n títulos de imagen. Sólo se necesita una película para sustituir todos los títulos de nuestro sitio, con un ahorro considerable en términos de la Descarga
- Te permite crear títulos simples, sino también con fuentes que no suelen utilizarse en la Web
- El texto puede ser en HTML, gracias a las características de Flash
- El texto se puede seleccionar
- Siendo una película de Flash puede insertar cualquier tipo de interactividad y animaciones
Se le nota, además, que en este procedimiento son prácticamente sin CSS en cuenta!
Shadowbox assetURL: establecer la ruta de la imagen
Cuando Shadowbox abre su ventana para mostrar un contenido (imágenes, iframes, películas, etc ...), las pantallas, en espera de un gif animado que viene en el paquete. Si la página está utilizando Shadowbox se encuentra en el mismo nivel de la carpeta de imágenes, todo funciona bien. De forma predeterminada, de hecho, busque el siguiente gif animado shadowbox imágenes o loading.gif - o imágenes o de carga light.gif-si elige estilos de luz (shadowbox-light.css). De lo contrario, ya menudo también existe el riesgo de no accorgesene, si estamos en un árbol diferente, se genera un código de buena 404 - página no la viga en nuestro expediente no se encuentra!
Para resolver el problema que acabamos de iniciar Shadowbox con un parámetro adecuado que apunta a la ruta absoluta a la carpeta de imágenes: undolog.com de, por ejemplo, puse el gif animado de carga directamente en el presente radica en la carpeta de imágenes (¿qué hay de mil millones de otras personas sitios 
. Para que la carpeta sea accesible a Shadowbox, independientemente de la ruta, entré semplicemenete:
1 2 | / / Init shadowbox con el parámetro assetURL assetURL : 'http://www.undolog.com/' } ) ; Shadowbox Init ({assetURL: 'http://www.undolog.com/'}).; |
Todos los clones de la mesa de luz en una matriz dinámica
Planetozh ha creado un hermoso paisaje de la herramienta dinámica que se puede enumerar todas las librerías Javascript como la mesa de luz.
El uso de un panel (ver imagen a la izquierda) con una serie de "tics" (casilla de verificación), que indican las distintas funciones de las bibliotecas, puede ejecutar un filtro obteniendo así una lista de una o más bibliotecas que hacen el trabajo. Esperamos que el autor mantiene actualizada esta página estupenda, muy útil para sacar a una de las numerosas bibliotecas y de gran alcance de este tipo.
Discreto 2,0 SWFObject
SWFObject es un script de JavaScript se utiliza para insertar contenido Flash en las páginas web Su función principal es eliminar la solicitud para activar el control por parte de Microsoft Internet Explorer (que, de todos modos, está siendo descontinuado - ver aquí ) y, lo más interesante es la capacidad de comprobar automáticamente e instalar Flash Player, si es necesario. SWFObject puede ser considerado una buena alternativa para el kit para instalar / detectar siempre que la misma se genera dentro de la IDE y Adobe Flash (todos sus versiones). Con la versión 2.0 , SWFObject mejora su rendimiento y su uso. Como se indica en la documentación oficial , se trasladó a Google Code, nuevo en esta versión son tantos como para hacer que NO es compatible con versiones anteriores. Esto se traduce en casi una revisión completa del código para los que decide actualizar una versión anterior de SWFObject 2.0.
El guión ya está alineado con los estándares más recientes, tanto sintácticamente y de que "no intrusiva". Es compatible con todas las características anteriores, tales como una rápida instalación del reproductor de Flash, con un código más claro y fácil de usar. El paso de los parámetros, por ejemplo, por el jugador para activar flash (y por tanto a nuestra película) es ahora mucho más clara y más versátil. También se presenta dos modos principales: estáticos y dinámicos, en función del tipo y el proceso de diseño de la página que estamos haciendo.
Bon y realmente me gustó el hecho de que es la herramienta en línea que genera un código de SWFObject nosotros.
LINK:
Scriptaculous Effect.Tween: cómo funciona
De todas las bibliotecas de la web 2.0 'disponible, scriptaculous es sin duda el más pobremente documentada! En la página web oficial, suele ser lento, la documentación es incompleta, mal hecho y difícil de usar. Con las últimas versiones, a continuación, algunas de las características nuevas están completamente ausentes, así como el nuevo núcleo de efecto Tween (Effect.Tween). Este último, en una manera similar a la de Tween flash, permite manipular las transiciones personalizadas. SINOPSIS su base es la siguiente:
Luz galería: Lightview 2.0.0_rc1
He aquí otra biblioteca recién estrenada discreto JavaScript para galerías de imágenes y mucho más. Lightview en 2.0.0_rc1 liberación , también añade características para "abrir" la ventana con el contenido que va más allá de la simple imagen: películas Flash, QuickTime , Forma y IFRAME! En comparación con la versión anterior (1.1.0 - que sólo se ocupa de las imágenes) y, a continuación, esta es release candidate características mejoradas también están presentes en otras bibliotecas . . Las herramientas requeridas por Lighview para trabajar son muy bien conocidos Prototype 1.6.0.2 y Scriptaculous 1.8.1 . Gliattributi utiliza para gestionar la biblioteca son class y rel .
Interesante un aspecto de esta biblioteca es el extremo cuidado con el que el gráfico aparece.
Nota: 9 - Inicio Lightview
La luz de la Biblioteca: Slimbox por un Shadowbox, galerías en Javascript
Algunos podrían decir - y con razón - lo suficiente! Librerías Javascript (discreto - no intrusiva, o parcialmente) para gestionar imágenes y galerías que hay tantos. De todos modos aquí está la lista, con los pros y los contras, lo mejor que he probado.
Slimbox 01:41
Extremadamente mínimo, 7K (versión 1.41), requiere mootools para trabajar. Como se indica en la página principal es un clon gráfico real la mesa de luz , veremos más adelante. Sinceramente, aparte del tamaño compacto de la biblioteca tiene características peculiares, no propios. En el mismo sitio, sin embargo, también se puede encontrar un script para generar reflexiones en tiempo de ejecución ... es posible que desee limitar este 
Rating: -6 - Página principal Slimbox, Reflection.js Home Page para MooTools
Lightbox2
Uno de los más conocidos y simple. Administra las imágenes contenidas en este comunicado son (por lo que no funciona con QuickTime, Flash, etc.) Para su funcionamiento, requiere de Prototype y Scriptaculous . Utilice el atributo rel para identificar los vínculos de las imágenes a procesar:
1 |
Al igual que las otras bibliotecas que vamos a ver, es compatible con el modo de presentación, mediante la inserción de soportes de cualquier identificador en una serie de enlace / imagen:
1 2 3 | "images/image-1.jpg" rel = "lightbox[roadtrip]" > image #1 < / a > < un href = "images/image-1.jpg" rel = "lightbox [roadtrip]"> de la imagen # 1 </ un > "images/image-2.jpg" rel = "lightbox[roadtrip]" > image #2 < / a > < un href = "images/image-2.jpg" rel = "lightbox [roadtrip]"> de la imagen # 2 </ un > "images/image-3.jpg" rel = "lightbox[roadtrip]" > image #3 < / a > < un href = "images/image-3.jpg" rel = "lightbox [roadtrip]"> de la imagen # 3 </ un > |
Calificación: 6 - Página de inicio Lightbox2
LightWindow 2,0
Incluso esto es bastante común! Después de todo, ¿cómo entender lo que es el más utilizado? . Sin embargo, es muy completo y versátil. En el sitio se encuentra la solicitud de donaciones para la compra de un Mac ... un poco invasivo y urgente ... De todos modos, al igual que la anterior, para su funcionamiento, requiere la presencia de Prototype y Scriptaculous . A diferencia de su predecesor, sin embargo, esto le permite ver los tipos de archivos moltisiimi: a partir de las imágenes, películas QuickTime, películas Flash, páginas externas HTML y PDF. ) altri obbligatori ( class e params - per impostare il comportamento della libreria). Por el contrario, utiliza varios atributos, algunos opcionales ( author, caption y title ) que no obligatoria ( class y params - para establecer el comportamiento de la biblioteca). Por ejemplo, para ver una exposición en una galería o una diapositiva con el atributo rel :
1 2 3 | "gallery/0-sushi.jpg" class = "lightwindow" rel = "[Sushi]" title = "Left Behind" caption = "Look's super tasty!" author = "Unknown" > image #1 < / a > < un href = "gallery/0-sushi.jpg" class = "LightWindow" rel = "[Sushi]" title = "Left Behind" caption = "Mira el súper sabroso!" title = "Desconocido"> de la imagen # 1 </ a > "gallery/1-sushi.jpg" class = "lightwindow" rel = "[Sushi]" title = "Beware of warewolves..." caption = "I shouldn't be doing this when I am hungry" author = "Unknown" > image #2 < / a > < un href = "gallery/1-sushi.jpg" class = "LightWindow" rel = "[Sushi]" title = "Guardaos de los warewolves ..." caption = "Yo no debería estar haciendo esto cuando tengo hambre" title = "Desconocido"> de la imagen # 2 </ un > "gallery/2-sushi.jpg" class = "lightwindow" rel = "[Sushi]" title = "That was good!" caption = "Take that sushi!" author = "Unknown" > image #3 < / a > < un href = "gallery/2-sushi.jpg" class = "LightWindow" rel = "[Sushi]" title = "Eso era bueno!" caption = "Tome ese sushi!" title = "Desconocido"> de la imagen # 3 </ un > |
Puntuación: 8 - Página de inicio LightWindow 2,0
Shadowbox base 10
Aunque la versión beta de la versión 1.0, esta es quizás la biblioteca más completa, tanto desde el punto de vista funcional, tanto para las bibliotecas compatibles. Para su funcionamiento, de hecho, se puede elegir entre una variedad de marcos, con el archivo "adaptadores" especialmente fabricados y suministrados por el autor:
- Yahoo! User Interface Library (yahoo, DOM, eventos, anim)
- Ext. (independiente, ext-core.js)
- Prototype + Scriptaculous
- jQuery
- MooTools (requiere Fx.Styles y sus dependencias)
- Dojo Toolkit (gracias Peter Higgins)
El efecto visual (se puede configurar a través de la piel / css), entonces, a diferencia de los otros, es definitivamente más atractivo. Los atributos se utilizan sólo rel donde, en su interior, encontrar espacio todos los demás parámetros de configuración. Por ejemplo, para realizar una galería, el uso justo;
1 2 |
Si desea configurar algunas opciones ( véase el sitio web para la lista completa ) sólo tiene que utilizar la siguiente sintaxis:
1 |
En Internet se puede encontrar otro, como Highslide JS . De hecho, si alguna otra biblioteca que me quieren informar ... De todos modos, personalmente, prefiero Shadowbox por la sencillez, la escalabilidad y la cruz-marco.
Nota: 9 - Top base 10 Shadowbox
Últimos Comentarios
Marcos : Muchas gracias, he encendido
Lo resuelto mediante el establecimiento de [cc_objc] / / OptionViewController.m - ...
Giovambattista Fazioli : @ Marcos: Le sugiero que pensar en un enfoque más correcto. Si ejecuta la subclase de la ficha ...
Marcos : Disculpe el spam .. Me di cuenta de que hay un error .. aquí es la corrección [cc_objc] / PrimaClasse.h **** / # import ...
Marco : olvidado .. en [ICC] OptionViewController [/ cci] para [CCI] @ syntetize [/ cci] puse el delegado
luis : muy clara y sencilla tengo que admitir que escribir un pa casi no utilizan los delegados creados por ...