JMiur [E]

Las cosas se vuelven cada vez más complejas, las alternativas que combinan CSS y scripts van aprovechando las nuevas posibilidades que nos dan los navegadores más modernos y la imaginación de los desarrolladores hace el resto, presentándonos alternativas con las que nunca habíamos soñado.

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:

Teniendo jQuery en la plantilla, sólo se requiere un script, el que se llama box-slider-all.jquery.min.js que, en este caso, alojé en un servidor externo como DropBox.

<!-- 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>

No hay manera de explicar los detalles uno por uno y hay que ver la página del autor para descubrir las distintas opciones pero, si se quiere utilizar de modo elemental, no hace falta mucho más que eso.

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 script que necesitamos es flux.min.js que también podemos alojar el un servidor o colocar directamente en la plantilla y, como en el anterior, necesitamos tener jQuery instalado.

<!-- 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>

34 comentarios:

sølrαc  

Me gusta ;)

Responder
Unknown  

Increíble pero cierto :) me encanta el segundo.

Responder
Unknown  

Excelente!!! Respetuosos saludos al Master!

Responder
Benko  

Excelente, hace tiempo había visto una página que utilizaba estos slider para publicidad, con efectos 3D. Los estuve buscando por mucho tiempo, gracias JMiur.

Responder
Gabriel Villasante  

Muy bueno, gracias....

Responder
Cooperadora Hogar Crecer  

Retiro la pregunta, recargué la página y funcionó perfecto también en Chrome. Lástima IE !

Responder
Cocina  

Es perfecto maestro!!

Responder
Unknown  

Me gustan mucho, una pregunta, se puede agregar texto, como titulo y entraría la de una noticia, seria perfecto si es así, muchas gracias

Responder
Homo Inquietus  

Hola.
Excelentes transiciones y lo más importante que buscas la sencillez, con lo cual a uno le da menos miedo el hacer pruebas y experimentos 8-)))))

Responder
Neonius  

Muy buenos los efectos JMiur.

Saludos.

Responder
Emanuel  

que espectacular que es este efecto. lastima que el malvado de IE no pueda mostrarlo..

Responder
Lautarorx  

¿Como se agregaría el Array para elegir las transiciones que solo uno quiera?

JMiur  

Esos detalles tendrás que consultarlos en la página del autor del script.

Lautarorx  

Ok :(

Responder
Sergio Flores  

La verdad no entiendo, pongo el CSS y el script antes de "< /head >" y el código normal lo pongo en una página y no me funciona :S

Intento poner el CSS y el Script antes de "]]>" pero me da error en la plantilla. ¿Será que no se puede poner en páginas de blogger? ¿Cuál será el problema? Help!

Mira como queda: http://www.100recursos.com/p/blog-page_19.html
* Si lo ves arreglado estaré trasteando todo un poco.

Responder
Sergio Flores  

Ahh!! lo siento, ya está, solamente habían unas cosillas que no había arreglado... estoy re-construyendo el sitio :S
Ahora solo falta el botón, no me queda como te aparece a ti ¿por qué será?

JMiur  

Ese botón no es parte de los sliders, deberás personalizarlo manualmente.

Sergio Flores  

Ahh! ahora entiendo :S

Responder
sisgloese  

me sale error 500 La plantilla no es válida porque la etiqueta "div" aparece dentro de la etiqueta "head"

JMiur  

¿Y cuál es e DIV que has colocado en el head? No hay ninguno que deba ir ahí.

Responder
PuntaUy  

Hola Jmiur, como cambio las dmensiones de las imagenes en el Flux y tb como elimino lo de previus y next que me sale junto a la palabra turn, o mejor aun, como pongo un boton como el de tu ejemplo, gracias

JMiur  

El botón no es parte del script; es cualquier botónque lo ejecute; en este caso, ejecuta:
window.f.next('turn');

Más detalles sobre el funcionamiento de estos scripts no puedo darte. Sólo los he usado en esta entrada.

PuntaUy  

Si, ya vi lo del boton, pero el tamaño a mi me queda funcionando bien pero con imagenes pequeñas, donde modifico eso.....graciasJM

JMiur  

Que yo recuerde, no hay necesidad de dimesionar las imágenes, basta que sean iguales:
https://github.com/joelambert/Flux-Slider

Responder
Martillo de Guerra  

esta de lujo este slider !!!! >.<

Responder
Berta Fernández-Viña Fernández  

Hola J.Miur:Me encanta el segundo ejemplo, puse todo como indicas pero me salen las fotos todas seguidas.Si puedes echar un vistazo y así me indicas que hice mal te lo agradecería
http://localizarecursos.blogspot.com.es/p/otros.html

JMiur  

Para empezar, necesitas el script. Debes descargarlo, alojarlo en alguna parte y colcoar la url correcta.

Berta Fernández-Viña Fernández  

alojé el el script en Google Sites y copié la URL donde indicas pero sigue igual

JMiur  

Tampoco veo el CSS agregado. Deberías ver la página de los desarrolladores para saber cuáles son los requisitos.

Además, se ven varios errores de JavaScript que pueden o no influir en el funcionamiento de otros:

ReferenceError: event is not defined if (event.button==2) {
TypeError: d is undefined var da = d.split(' ');
oWind_ChimeLayer.setWindowAlignFixed is not a function oWind_ChimeLayer.setWindowAlignFixed('right');

Berta Fernández-Viña Fernández  

Hola: Miré la página de los desarrolladores y no me enteré de nada.Esto es muy complicado para mi.
Un saludo

JMiur  

Lo es.

Responder
Luckitas Moya  

Hola JMiur podrias ver mi página? usé el segundo ejemplo que diste, anduvo bien por unas semanas pero ahora se ven las imágenes una debajo de otra... Podrias ayudarme?
http://www.beel.com.ar/

JMiur  

Al parecer, elscript no está funcionando. No se carga o no es reconocido. Tal vez, podría probar colocándolo directamente en la plantilla.

Luckitas Moya  

Gracias JMiur... Puse el código del escript en la plantilla y volvió a funcionar... espero que siga funcionando je... un abrazo!!!

Responder

¿Quiere dejar un comentario?

recuerde que los comentarios están siendo moderados y serán publicados a la brevedad ...

Nota: sólo los miembros de este blog pueden publicar comentarios.

Si le gusta ir a lo seguro utilice este botón para abrir los comentarios en una ventana modal en esta misma pagina.

Si añora tiempos idos, use este enlace para agregar un comentario al viejo estilo ...

 
CERRAR