CSSload: Gráficos de carga con CSS |
No hay mucho que explicar. Basta entrar en la página y seleccionar alguno de los modelos disponibles y luego, establecer los parámetros de color y velocidad. Todos los cambios pueden ser previsualizados y una vez que nos hemos decidido, el botón Get code nos mostrará el código necesario para insertarlo en cualquier página web.
Como no requiere librerías de ningún tipo y no usa JavaScript, podemos modificarlo a gusto y a mi entender, es una buena manera de aprender cómo funcionan estas cosas que a simple vista, son raras.
Ver/Ocultar otro ejemplo:
Muchos feeds y un solo script para mostrarlos (2) |
Allí, agregaré un par de funciones extras, una, llamada FEED_eliminartags() para que los contenidos puedan ser "recortados" y verlos como sumarios y otra para detectar la primera imagen que tengan FEED_primerimagen(); ambas cosas, son similares a cualquier otra función que interprete json que es el formato en que leeremos los feeds.
Agrego las funciones antes de </head>
<script type='text/javascript'> //<![CDATA[ function FEED_primerimagen(cual) { var t = "", s, a, b, c, d; s = cual; a = s.indexOf("<img");b = s.indexOf("src=\"",a);c = s.indexOf("\"",b+5);d = s.substr(b+5,c-b-5); if((a!=-1)&&(b!=-1)&&(c!=-1)&&(d!="")) {t = d;} return t; } function FEED_eliminartags(cual,longitud){ var r = cual.split("<"); for(var i=0;i<r.length;i++){ if(r[i].indexOf(">")!=-1){ r[i] = r[i].substring(r[i].indexOf(">")+1,r[i].length); } } r = r.join(""); var sss = "", p; var r2 = r.split(" "); for(var i=0;i<r2.length;i++){ p = sss + r2[i] + " " if(p.length>=longitud) {break;} sss = p; } sss = $.trim(sss); if(sss) {sss += " …" } return sss } (function ($) { $.fn.FeedEk = function (lasopciones) { var opciones = {url: '', clase: '', cantidad: 3, lenres: 120}; if (lasopciones) {$.extend(opciones, lasopciones)} var elID = $(this).attr('id'); if (opciones.url == null || opciones.url == '') { $('#' + elID).empty(); return } $.ajax({ url: 'http://ajax.googleapis.com/ajax/services/feed/load?v=1.0&num=' + opciones.cantidad + '&output=json&q=' + encodeURIComponent(opciones.url) + '&callback=?', dataType: 'json', success: function (data) { $('#' + elID).empty(); $.each(data.responseData.feed.entries, function (i, entry) { var laimagen = FEED_primerimagen(entry.content); var contenido = FEED_eliminartags(entry.content,opciones.lenres); var salida = "<div class='ItemFeed "+opciones.clase+"'>"; salida += "<div class='ItemTitle'><a href='" + entry.link + "' target='_blank' >" + entry.title + "</a></div>"; salida += "<div class='ItemContent'>"; if(laimagen){ salida += "<img src='"+ laimagen +"' />"; } if(contenido){ salida += "<p>" + contenido + "</p>"; } salida += "</div>"; salida += "</div>"; $('#' + elID).append(salida); }) } }) } })(jQuery); //]]> </script>
<div id="divRss"></div> <div id="fenlaces"> <a href="#" rel="1" class="ftwitter"> Twitter usuario </a> <a href="#" rel="2" class="ftwitter"> Twitter favoritos </a> <a href="#" rel="3" class="ftwitter"> Twitter menciones </a> <a href="#" rel="4" class="fyoutube"> YouTube usuario </a> <!-- coloco todos los enlaces que quiera --> <a href="#" rel="14" class="fstumble"> StumbleUpon blog </a> </div>
<script type="text/javascript"> var lista_feeds=new Array(); lista_feeds[0] = ""; lista_feeds[1] = "https://twitter.com/statuses/user_timeline/usuario.rss"; lista_feeds[2] = "https://api.twitter.com/1/favorites/usuario.rss"; lista_feeds[3] = "http://search.twitter.com/search.rss?q=to:@usuario"; lista_feeds[4] = "https://gdata.youtube.com/feeds/api/users/usuario/uploads"; // ....... sigo agregando las direcciones que quiera usar lista_feeds[14] = "http://www.stumbleupon.com/rss/stumbler/nombre/likes"; // y el evento de jQuery apra detectar el click en esos enlaces $('#fenlaces a').live('click', function(e) { e.preventDefault(); // evito qe se ejecuta el href del enlace var url = lista_feeds[$(this).attr('rel')]; // leo el número de orden de la lista (1, 2, 3, 4, etc) var clase = $(this).attr('class'); // leo la clase de ese enlace // y ejecuto la función para leer los feeds // donde cantidad es el número de entradas a leer y lenres es la longitud máxima $('#divRss').FeedEk({url:url, clase:clase, cantidad: 3, lenres:200 }); }); // y por defecto, muestro el primero de la lista $(document).ready(function() { $('#fenlaces a').first().click(); }); </script>
<style> #divRss { /* el contenedor */ background-color: #EEE; border: 1px solid #000; margin: 0 auto; outline: 3px solid #ABC; padding: 10px; width: 350px; } #divRss .ItemFeed { /* cada entrada */ border-bottom: 1px dotted #000; color: #666; padding: 5px 0; } #divRss .ItemFeed:last-child {border: none;} /* y los detalles (título, contenido e imagen) #divRss .ItemTitle { } #divRss .ItemTitle a { } #divRss .ItemContent { } #divRss .ItemContent p { } #divRss .ItemContent img {height: auto; width: 100%;} </style>
#divRss .ItemFeed.ftwitter { } #divRss .ItemFeed.fyoutube { } #divRss .ItemFeed.fyoutube .ItemTitle { } #divRss .ItemFeed.fstumble img { }
Muchos feeds y un solo script para mostrarlos (1) |
Para hacer eso, como los feeds suelen tener formatos diferentes, un método efectivo es usar la idea que se mostraba en esta entrada que no es otra cosa que un pequeño script que utiliza jQuery para enviar esa dirección de feeds a un API de Google que nos devuelve siempre un formato único; de tal modo, podremos emplearlo sin tener que tener en cuenta esas diferencias o andar averiguando en que etiquetas están los distintos datos.
Es cierto que el API no es muy flexible pero, lo que nos devuelve es más que suficiente para armar un gadget que nos permita mostrar una lista de feeds de distinto tipo en en el mismo espacio.
Empezamos con algunas de las direcciones de la lista de feeds:
https://twitter.com/statuses/user_timeline/usuario.rss
https://api.twitter.com/1/favorites/usuario.rss
http://search.twitter.com/search.rss?q=to:@usuario
http://search.twitter.com/search.rss?q=palabra
https://gdata.youtube.com/feeds/api/users/usuario/uploads
https://gdata.youtube.com/feeds/api/videos/-/etiqueta
https://gdata.youtube.com/feeds/api/videos?q=palabra&orderby=relevance
https://gdata.youtube.com/feeds/api/videos?q=palabra&orderby=published
https://gdata.youtube.com/feeds/api/videos?q=palabra&orderby=viewCount
https://www.facebook.com/feeds/page.php?format=atom10&id=ID_pagina
http://pinterest.com/usuario/feed.rss
http://api.flickr.com/services/feeds/photos_public.gne?id=ID_usuario
http://api.flickr.com/services/feeds/photos_public.gne?tags=etiqueta
http://instagr.am/tags/etiqueta/feed/recent.rss
http://photos.googleapis.com/data/feed/base/all?alt=rss&kind=photo&q=palabra
http://nombre.tumblr.com/rss
http://nombre.wordpress.com/feed/
http://www.stumbleupon.com/rss/stumbler/usuario/likes
Y lo que faltaría es ver cómo se podrían usar ...
Instant WordPress: Una instalación portable |
Una vez descargado el ejecutable, hacemos doble click en él, seleccionamos la carpeta o unidad USB donde queramos instalarlo y nada más; funcionará de modo independiente como cualquier otro programa portable.
Incluye WordPress 3.2, Apache 2.2.15, PHP 5, MySQL 5 y una serie de posts y páginas demo donde pueden probarse plugins o temas.
Y la nueva interfaz llegó para quedarse :-( |
Pues así es, uno cree que ellos (hablo de los desarrolladores de Blogger y no de los niñitos) SABEN, PIENSAN ... pero, a veces, da la impresión que no y para mi gusto, la nueva interfaz que nos han enchufado a la fuerza es una demostración más de ese presentimiento.
Es verdad que apenas la empezaron a mostrar y sugerir una y otra vez que la usáramos, probé y huí rápidamente así que ahora que es un cambio forzoso, mi subjetividad es nula y la miro con aprehensión aunque sea inevitable pero me pregunto ¿por qué se empeñan en cambiar lo que funciona en lugar de arreglar lo que no funciona?
Habrá a quien le guste, a mi no. Me parece incómoda, lo que antes estaba a la mano, ahora hay que buscarlo en distintos menús, está pensada para una resolución de pantalla específica ya que si uno tiene un monitor ancho, hay espacios enormes que no tienen uso pero ciertos botones se posicionan en los extremos y uno debe tomar un taxi para ir de uno a otro cosa que, evidentemente, nos permite ejercitar el antebrazo pero que es muy poco funcional. Por el contrario, en monitores con resoluciones bajas, ciertos botones desaparecen y si redimensionamos la ventana pasa lo mismo y debemos recargar la página para que vuelvan a su lugar.
Lo más lindo es el cartelito de "Cargando" que se ve cada dos por tres; muy simpático. Uno va a hacerse un café, vuelve y allí sigue; amarillito y pequeñito ¿Recargamos la página con el botón del navegador? Bueno, a veces anda, a veces no porque muchas de las páginas internas se deben cerrar con un botón interno. UFA.
Suspiro. Veamos que hay. Uno no es un conservador por antonomasia así que siempre se está dispuesto a darle una oportunidad a lo nuevo pero ... ¿por qué sale siempre esta ventanita si no he hecho cambio alguno?
Me olvido de las entradas. Veamos la plantilla, editar HTML ... y no, no han sacado el mensaje de advertencia, se abre una y otra vez porque, seguramente, ¿esperan que uno se resigne y no lo use más?
OK, OK, ya no me quejo más
Monitorizar sitios con Google Docs |
El sistema es muy sencillo, debemos hacer una copia de la plantilla click acá y si estamos logueados en Google, nos pedirá autorización:
El siguiente paso es modificar los datos colocando la dirección de nuestro sitio en la celda B2 (si queremos agregar varios, los separamos con comas y en la celda B3 escribimos nuestra dirección de mail. Finalmente, en la celda B4 ponemos Yes si queremos recibir alertas SMS o No si no queremos.
Hay que tener en cuenta que si queremos esas alertas deberemos configurar Google Calendar con el número del móvil.
Para quien esté interesado en el tema, el código fuente del Google Apps Script se puede ver en esta página y, si por cualquier motivo no queremos eliminar la plantilla pero necesitamos deshabilitarla, basta editarla otra vez y dejar en blanco la celda B3 que es la que contiene nuestra dirección de mail.
Convertir textos en enlaces utilizando jQuery |
http://jquery.com/
<a href="http://jquery.com/">http://jquery.com/<>
$.fn.crearLinks = function() { var regexp = /((ftp|http|https):\/\/(\w+:{0,1}\w*@)?(\S+)(:[0-9]+)?(\/|\/([\w#!:.?+=&%@!\-\/]))?)/gi; this.each(function() { $(this).html( $(this).html().replace(regexp,'<a href="$1">$1</a>') ); }); return $(this); }
$(document).ready(function() { $(".crearlinksdemo").crearLinks(); });
Morbi vitae est purus. Aliquam at leo nibh. Maecenas ultrices sem est, eget consectetur ante. Nulla lacus turpis; ullamcorper non tincidunt eget, mattis non ligula via http://vagabundia.blogspot.com/
Aliquam erat volutpat. Aliquam hendrerit dolor sed nisl dapibus condimentum? Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Donec sollicitudin odio a ante semper eu interdum ipsum porta. Phasellus at libero quis sapien imperdiet faucibus auctor nec est Blogger http://www.blogger.com/home
Nullam vel nunc eu tellus vehicula congue. Quisque ut odio felis, vitae tempus ipsum? Quisque venenatis viverra augue, quis tempor lacus iaculis id? Pellentesque luctus egestas tortor, vehicula cursus leo mattis et. Sed molestie purus sed urna iaculis eu luctus nisl tincidunt. Proin eu massa velit, nec fermentum ipsum orci aliquam http://jquery.com/
$(".post").crearLinks();
$("p").crearLinks();
$(this).html().replace(regexp,'<a target="_blank" href="$1">$1</a>')
$(this).html().replace(regexp,'<a rel="nofollow" target="_blank" href="$1">$1</a>')
$(this).html().replace(regexp,'<a class="enlacetexto" target="_blank" href="$1">$1</a>')
Jugando con fontBomb |
Este es el caso de Philippe-Antoine Lehoux que, entre otras "cositas", se le ocurrió hacer algo llamado fontBomb; una forma de "destruir" páginas web, agregando bombas donde uno quiera.
Para usarlo, basta entrar en la página y arrastrar el bookmarket a la barra de marcadores y así, tenerla a mano en caso de emergencia ...
Click en cualquier parte para depositar un bomba ...
Comentarios en Blogger: ¿Habrá cambios? |
Hace ya un tiempo, han aparecido dos nuevos includables forzosos dentro del widget de los posts:
<b:includable id='iframe_comments' var='post'> <b:if cond='data:post.allowComments'> <script expr:src='data:post.commentSrc' type='text/javascript'/> <div class='cmt_iframe_holder'/> <b:if cond='data:post.embedCommentForm == "false"'> <a expr:href='data:post.addCommentUrl' expr:onclick='data:post.addCommentOnclick'><data:postCommentMsg/></a> </b:if> </b:if> </b:includable>
http://www.blogblog.com/dynamicviews/xxxxxxxxxxxxxxx/js/comments.js
¿Para qué será?
¿Tendrá algo que ver con ese ícono que se ve a veces en los comentarios de este tipo y que muestra un lapicito? ¿Será que están pensando en permitirnos editar nuestros propios comentarios?
El otro includable es este:
<b:includable id='comment_picker' var='post'>
<b:if cond='data:post.commentSource == 1'>
<b:include data='post' name='iframe_comments'/>
<b:else/>
<b:if cond='data:post.showThreadedComments'>
<b:include data='post' name='threaded_comments'/>
<b:else/>
<b:include data='post' name='comments'/>
</b:if>
</b:if>
</b:includable>
<b:include data='post' name='comment_picker'/>
No parece nada más que una modificación menor, un cambio de lugar pero, allí hay cosas que llaman la atención, primero, una condición que carga o no carga el script del que hablaba antes y que, por el momento, parece que no se ejecuta nunca ya que el valor es siempre cero:
<b:if cond='data:post.commentSource == 1'>
<b:if cond='data:post.showThreadedComments'>
Me parece que habrá que estar atentos a esos cambios, sobre todo quienes no usamos los comentarios anidados porque estas cosas, Blogger suele hacerlas sin informarnos nada.
Flotaciones, fondos, problemas, alternativas |
Cuando a un elemento le agregamos la propiedad float, lo convertimos en un bloque pero con una característica especial: su ancho no ocupa el 100% del contenedor sino sólo el de su contenido pero, además, lo quitamos del orden natural de la página; de este modo, todo lo que lo rodea se moverá y se acomodará como pueda para hacerle lugar.
oridomi: Contenidos plegables |
Aunque la documentación del script es abundante ya que se explica cada función de modo detallado, lamentablemente, es poco lo que se indica del modo en que debe usarse y las distintas opciones pero veamos lo que dicen.
Para empezar, oriDomi funciona con o sin librerías anexas así que, luego de agregar el script (el minimizado o el normal) que podemos descargar de Github, debemos indicar cual o cuales serán los contenidos a los que se aplicará y esto, lo hacemos estableciendo una clase o un id. Por ejemplo si lo usara en este tipo de contenido:
<script>var domi = new OriDomi(document.getElementById('ejemplo'));</script>o bien esto si se usan clases en lugar de ids:
var domi = new OriDomi(document.getElementsByClassName('ejemplo')[0]);
var $domi = $('#ejemplo').oriDomi();Y si quiera aplciarlo a varios contenidos distintos, sólo debería usar variables diferentes para cada uno:
var $domiUNO = $('#ejemplo').oriDomi(); var $domiOTRO = $('#otro-ejemplo').oriDomi();
var $domi = $('#ejemplo').oriDomi({ vPanels: 3, hPanels: 10, perspective: 200, speed: 500, shading: false });
hPanels es la cantidad de secciones horizontales
vPanels es la cantidad de secciones verticales
speed es la velocidad
perspective es el valor de la perspectiva
shading indica si se agregarán sombras o no
Todo muy lindo pero ¿cómo lo usaría? Ahí, ya depende de lo que uno quiera hacer. Si sólo deseo mostrar ese contenido (imagen, texto, casi cualquier otra cosa simple o más o menos compleja) bastaría llamar a la función correspondiente, por ejemplo, algo así:
$domi.oriDomi('stairs',50,'left');
Los parámetros son números (positivos o negativos) que indican el ángulo y las opciones básicas indican el sentido de la rotación (left, right, top, bottom) siendo left la opción por defecto.
Los efectos posibles son varios y estos son los que se muestran en el demo inferior:
$domi.oriDomi('accordion', -40, 'right'); $domi.oriDomi('curl', 70, 'left'); $domi.oriDomi('ramp',50, 'top'); $domi.oriDomi('collapse','left'); $domi.oriDomi('stairs',50,'left'); $domi.oriDomi('fracture',30,'right'); $domi.oriDomi('twist',40,'left'); $domi.oriDomi('reveal', -50, 'right');
$domi.oriDomi('reset');
1 2 3 4 5 6 ... |
Calidad, cantidad, éxito, fracaso, sólo son palabras vacías, palabras vanas, palabras que pueden no significar absolutamente nada a menos que se definan apropiadamente y yo, no tengo definiciones, sólo tengo dudas.
Un blog o cualquier otro emprendimiento no escapa a estas limitaciones y presiones pero, no hay que dejarse engañar por los cantos de sirena ya que no existe tal cosa como un exitómetro. No hay unidades de medida universales. Éxito es sentirse bien con uno mismo, satisfecho de lo que se hace, gozar, divertirse, aprender. Un blog con visitas es exitoso si quien lo hace se siente pleno y puede ser un fracaso total aunque tenga un millón de visitantes si quien lo hace es infeliz.
El tiempo también es otra palabra subjetiva que al final de cuentas, nada explica y termina siendo sólo una marca en el calendario.
1 2 3 4 5 6 pasaron seis años y unos cuantos días desde que empecé con este blog y de lo único que estoy seguro es que seis años son seis años.
Mucho tiempo. Mucho de todo. Muchas idas y vueltas. La distancia entre aquel día y hoy es larga o es corta, dependerá del punto de vista. En el camino se han perdido cosas, cosas que extraño pero que son imposibles de recuperar porque un blog termina siendo independiente de los deseos de quien lo hace, va buscando su forma, se va aburguesando, se va encerrando en si mismo y a veces, queda atrapado en ese corset que lo limita y le quita la frescura inicial, la frescura de la inocencia, del desconocimiento, del "no me importa nada".
Claro, desde Chaplin hasta ahora, uno debe adaptarse a los Tiempos Modernos pero no me convence mucho este nuevo mundo de titulados "bloggers", "webmasters" o expertos en redes sociales. ¿Qué serán los expertos en redes sociales? ¿Gente que te enseña a escribir en Twitter "estoy comiendo una mandarina"? En fin, a mi me siguen gustando los blogs, debe ser porque la edad nos va llenando de gustos decadentes. Pero me gustan los blogs hechos por personas. Me gusta que sean ascéticos y extravagantes; me gusta que sean simples y complejos; me gusta que algunos me gusten y otros no ¿Será posible estar en esta nueva web, ser sólo una persona común y seguir chapoteando entre las palabras que van saliendo del teclado y que eventualmente aparecen publicadas en lugar de desaparecer en el tacho de basura?
¿Será posible?
Uno comienza a dudar y a preguntarse: ¿en qué vereda quiero estar?
Hay algo seguro, la vida es un juego sinuoso, lleno de recovecos, donde los caminos se bifurcan constantemente, traspiés, incertidumbres, casualidades, azar, caos. El esfuerzo vale pero no para garantizar resultados, vale para apoyar la cabeza en la almohada y dormir con la conciencia tranquila y si acá sigo, es porque me he dado cuenta que los sabios sólo buscan la respuesta entre las cosas que saben y nosotros, los "no tan sabios", nos podemos dar el lujo de no buscar nada y encontrarnos a cada segundo, con algo nuevo y maravilloso.
Claro que, tal vez me resulta fácil decirlo simplemente porque no me considero muy normal. No miro las estadísticas salvo para apreciar los dibujitos; no estoy pendiente de los enlaces, no los vendo, no los compro, no los regalo. No exijo reciprocidad. No hago marketing ni relaciones públicas. Soy un lobo estepario que apenas comenta en algún sitio de tanto en tanto y con vergüenza. Hago lo que se me da la gana, cuando se me da la gana y cómo se me da la gana. No me siento obligado a nada. Es decir, soy un irresponsable porque no tengo responsabilidades y prefiero pasarme tres horas tratando que un maldito rectangulito quede justo ahí donde yo quiero que quede a recibir cuatrocientos millones de visitas.
Así que, bienaventurados los que hacen preguntas y sólo obtienen más preguntas que respuestas porque ellos no serán bendecidos pero se divertirán como nadie tratando de aprender, el resto ... el resto es como la fama: puro cuento.
voy a meterme a tientas en el sueño.
.......
Mi pesadilla es siempre el optimismo:
me duermo débil, sueño que soy fuerte,
pero el futuro aguarda. Es un abismo.
No me lo digan cuando me despierte.
Dos sliders con efectos 3D |
Lamentablemente, a veces, esas complejidades se extienden más allá de lo razonable y se nos ofrecen efectos que uno trata de mirar y así, a simple vista, nos abruman porque nos posibilitan la descarga de los demos completos pero estos son excesivos, incluyen demasiadas cosas y hay que irlos simplificando para llegar al meollo del asunto. Lo curioso es que cuando se llega a ese punto, todo es más simple de lo que parecía y uno se queda pensando ¿por que no empezarán por lo sencillo?
Ese es el caso de estos dos scripts que utilizan jQuery para generar una serie de efectos gráficos muy llamativos.
El primero se llama Adaptor y es un slider de imágenes con algunos efectos originales tales como Vertical 3D scroll y Horizontal 3D scroll. El demo completo puede verse en este enlace.
Acá, intento usar uno de ellos, el llamado scrollVert3d:
<!-- el CSS lo ponemos antes de </head> -->
<style>
<!-- los valores de width y height dependerán del tamaño de las imágenes a mostrar -->
#viewport-shadow {
position: relative;
width: 635px;
}
#viewport, #box, .slide {
list-style:none;
height: 375px;
width: 635px;
}
.slide img{
height: 375px;
width: 600px;
}
#viewport {overflow: hidden;}
#time-indicator {
background-color: #2EDBAC;
height: 3px;
left:0px;
position: absolute;
top:388px;
width: 0px;
}
</style>
<!-- el HTML lo ponemos en un post o en un elemento HTML -->
<div id="viewport-shadow">
<div id="viewport">
<ul id="box">
<li class="slide"><img src="URL_imagen1"></li>
..... todas las imágenes que uno quiera .......
</ul>
</div>
<div id="time-indicator"></div>
</div>
<!-- el script lo ponemos al final de la pagina o después del HTML -->
<script src="URL_box-slider-all.jquery.min.js"></script>
<script>
$(function () {
var $box = $('#box'), $timeIndicator = $('#time-indicator'), slideInterval = 5000;
var switchIndicator = function ($c, $n, currIndex, nextIndex) {$timeIndicator.stop().css('width', 0);};
var startTimeIndicator = function () {$timeIndicator.animate({width: '600px'}, slideInterval);};
$box.boxSlider({
speed: 1000, autoScroll: true, timeout: slideInterval, effect: 'scrollVert3d', blindCount: 15, onbefore: switchIndicator, onafter: startTimeIndicator
});
startTimeIndicator();});
</script>
El otro script se llama Flux y también es un slider que incluye sofisticadas transiciones en 3D y cuyo demo original con todas las alternativas podemos ver acá.
En este caso, sólo intentaé usar el último, uno llamado Turn:
<!-- el CSS y el script los ponemos antes de </head> -->
<style>
div.surface{
-moz-box-sizing:content-box;
-webkit-box-sizing:content-box;
-ms-box-sizing:content-box;
box-sizing:content-box
width:100%;
}
</style>
<script src='URL_flux.min.js' type='text/javascript'/>
<script type='text/javascript'>
//<![CDATA[
$(function(){
if(!flux.browser.supportsTransitions)
alert("Flux Slider requires a browser that supports CSS3 transitions");
window.f = new flux.slider('#slider', {autoplay: false,pagination: false});
$('#trans3d').bind('click', function(event){
event.preventDefault();
if(!flux.browser.supports3d){alert("Teste navagedor no soporta transiciones");return;}
window.f.next('turn');
});
});
//]]>
</script>
<!-- y el HTML lo ponemos donde se nos ocurra mostrar el slider-->
<div class="container">
<div id="slidercontainer">
<div id="slider">
<img src="URL_imagen1" />
..... todas las imágenes que uno quiera .......
</div>
<a id="trans3d" href="#turn" class="new">Turn</a></div>
</div>
Otros tres packs de íconos |