Este software nos permite crear vistosas galerias al estilo de venatanas modales, con variedad de estilos para las miniaturas y para las ventanas mismas.
Descripción del sitio web de Visual LightBox:
Visual Lightbox JS es un programa libre asistente que te ayuda a generar fácilmente galerías de fotos web con una caja de luz: agradable efecto de superposición de estilos, en unos pocos clics sin tener que escribir una sola línea de código.
Solo arrastre sus imagenes en la ventana de Visual Lightbox, presione "publicar" y su propia galeria web con hermosos efectos se abrira en su navegador instantaneamente!
Sin codigos javascript,css,html, Sin edicion de imagenes, solo con un click tendra su galeria lista.
Visual LightBox esta disponible tanto para Prototype como para jQuery, para windows y Mac. Ha sido traducida por voluntarios a 25 idiomas!
Visual LightBox
Demos
Descarga
Visual LightBox puede descargarse de forma gratuita, sin embargo se les agrega una pequeña marca de agua (muy pequeña) en la parte inferior a cada imagen.
Este llamativo efecto de nieve se ha hecho muy conocido para la epoca de navidad, pero nunca está de más recordarlo:
Para agregarlo a la plantilla debemos buscar (Ctrl+f) la etiqueta </head> y justo antes de ella pegar:
<script type="text/javascript" src="snow.js"></script>
El script lo puedes descargar desde
aqui.
Demo: El efecto está funcioando en este blog.
Como segunda parte de este post he querido mostrar como añadir el efecto para mover cada nube con tan sólo cogerla. La verdad es que no tiene mucha utilidad por si sola, pero logra distraer un poco, y he sabido de visitantes que se ponen a "jugar" con las nubes en
Z-Graphics :)
El codigo html que ya teniamos es:
<div id="
nube1"><img src="images/
nube.png" /></div>
<div id="
nube2"><img src="images/
nube2.png" /></div>
<div id="
nube3"><img src="images/
nube.png" /></div>
Lo primero que debemos hacer es (si es que no lo hemos hecho) agregar la libreria jQuery a la plantilla (justo antes de </head>):
<script src="https://www.google.com/jsapi"></script>
<script>
google.load('jquery', '1.3.1');
</script>
O tambien podemos usar:
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js"></script>
Despues de esto debemos agregar tambien los scripts del efecto:
<script type="text/javascript" src="ui.core.js"></script>
<script type="text/javascript" src="ui.draggable.js"></script>
Los dos archivos anteriores los puedes descargar de aqui:
ui.core.js y
ui.draggable.js. Puedes usar estas direcciones si no tienes donde alojar los scripts, pero te recomiendo que la cambies.
Despues de agregar las librerias creamos el efecto:
<script type="text/javascript">
$(function() {
$(".movible").draggable();
});
</script>
Y añadimos unos cuantos estilos a la clase "movible":
<style type="text/css">
.movible {
cursor:url(images/hand.png), pointer;
position:absolute;
z-index:1;
}
</style>
Por ultimo agregamos la clase movible, que es la que tiene el efecto, a las nubes. Para eso reemplazamos el código html que teniamos antes:
<div id="nube1"><img src="images/cloud.png" class="
movible" /></div>
<div id="nube2"><img src="images/cloud2.png" class="
movible" /></div>
<div id="nube3"><img src="images/cloud.png" class="
movible" /></div>
Demo
| Este particular efecto convierte la cabecera de nuestro blog/pagina web en un atractivo más. Acabo de implementarlo en Z-Graphics y he sabido de algunos visitantes que se ponen a jugar con las nubes :) (aunque en esta parte del tutorial solo explicaré cómo poner la animación).
|
La libreria que vamos a utilizar para agregar movimiento se llama
$fx y es de libre descarga. Lo primero que debemos hacer es bajarla a nuestro computador y subirla a cualquier servidor; una vez hecho esto se le debe añadir a la plantilla:
<script type="text/javascript" src="url-fx.js"></script>
Buscamos (Ctrl+f) la etiqueta: </head> y justo antes pegamos el siguiente código Javascript:
<script type="text/javascript">
var ani = {
var_nube1: {
type: 'left',
from: 5,
to: screen.availWidth,
step: 1,
delay: 50
},
var_nube2: {
type: 'left',
from: 0,
to: screen.availWidth,
step: 1,
delay: 100,
onstart: function(){
this.style.display = 'block';
}
},
var_nube3: {
type: 'left',
from: 600,
to: screen.availWidth,
step: 1,
delay: 100,
onstart: function(){
this.style.display = 'block';
}
},
};
function startAnimation(){
$fx('#nube1').fxAdd(ani.var_nube1).fxRun(null,-1);
$fx('#nube2').fxAdd(ani.var_nube2).fxRun(null,-1);
$fx('#nube3').fxAdd(ani.var_nube3).fxRun(null,-1);
}
</script>
Lo que acabamos de hacer es crear las cada una de las variables necesarias para cada nube, es decir definir el tipo de movimiento (de izquierda a derecha: left), desde donde debe iniciarse la animación, hasta donde deberá ir la animación: screen.availWidth que se refiere al ancho de la ventana, y la velocidad con la que se moverá la nube.
Seguido de este código debemos pegar también los estilos:
<style type="text/css">
#nube1{
position:absolute;
top:5%;
left:5%;
width:125px;
height:67px;
filter:alpha(opacity=5);
-moz-opacity:.5;
opacity:.5
}
#nube2{
position:absolute;
top:10%; left:15%;
width:125px;
height:67px;
filter:alpha(opacity=7);
-moz-opacity:.7;
opacity:.7
}
#nube3{
position:absolute;
top:20%;
right:5%;
width:125px;
height:67px;
filter:alpha(opacity=7);
-moz-opacity:.7;
opacity:.7
}
</style>
Para cada capa (#
nube1, #
nube2 y #
nube3) se define un ancho (width), un alto (height) y una posición: top y left. si la animacion fuera de derecha a izquierda la posición no estaría dada por left sino por right. los atributos filter:alpha(opacity=7); -moz-opacity:.7; opacity:.7 se refieren a la opacidad de la capa, se definen tres porque no todos los navegadores usan el mismo.
La animación aparecerá donde ubiquemos las nubes, en este caso deberá ser en la cabecera del blog, pero como las hemos definido con posición absoluta podemos ponerlas justo debajo del <body>:
<div id="
nube1"><img src="images/
nube.png" /></div>
<div id="
nube2"><img src="images/
nube2.png" /></div>
<div id="
nube3"><img src="images/
nube.png" /></div>
Una última cosa: para que la animación funcione debemos llamarla, los metodos los podemos encontrar en la documentación de la libreria pero para no entrar en complicaciones la llamaremos desde el body sustituyendo
<body> por
<body onload="startAnimation();">
Es muy común en estos días que cuando por fin hemos terminado de retocar nuestra pagina web o blog, la probemos en varios navegadores para ver como se visualiza en cada uno de ellos. El problema es que a veces los cambios son muy drásticos y seria bueno dar cierto aviso a nuestros visitantes.
La manera mas fácil de solucionarlo es con un script que nos permita identificar el navegador desde el cual se visita nuestra página y dependiendo de ello mostrar un mensaje o imagen. El siguiente script debemos ponerlo en donde queremos que aparezca el mensaje (puede ser cualquier etiqueta HTML como por ejemplo: imágenes y texto).
<script type="text/javascript">
//verifico si es internet explorer
var navegador = navigator.appName;
if (navegador == "Microsoft Internet Explorer"
){
document.write('Aqui va lo que aparece en caso de ser Internet Explorer');
}
else{
//Verifico si es google chrome
var is_chrome = navigator.userAgent.toLowerCase().indexOf('chrome') > -1;
if(is_chrome
){
document.write('Aqui va lo que aparece en caso de ser Google Chrome');
}else{
//Verifico si es mozilla firefox
var is_firefox = navigator.userAgent.toLowerCase().indexOf('firefox') > -1;
if(is_firefox
){
document.write('Aqui va lo que aparece en caso de ser Mozilla Firefox');
}
}
}
</script>
Donde el textoen
azul representa cualquier mensaje que se nos ocurra, por ejemplo:
- Para mandar un un mensaje de alerta, cambiamos el document.write por alert y escribimos un mensaje.
- Si queremos mostrar un enlace (para descargar mozilla si es internet explorer, por ejemplo) debemos dejar el document.write y entre comillas '<a href="#tu-enlace>el texto o imagen</a>'.
Demo (Verás un mensaje dependiendo del navegador que estes usando) :
Y aqui dejo algunas imagenes por si resultan de tu agrado:
Antes que nada, quiero agradecer a todos por tenerme paciencia...han sido unos dias muy ocupados y lamentablemente no he podido mantener mi querido blog como siempre.
Hace unos dias
Xabier me
preguntaba como hacer que las scrollbars (las barras de desplazamiento de los navegadores) personalizados tambien se visualizen en mozilla y no solo en internet explorer. Me acordé que hace mucho trabajé con un script qu me lo permitió y he querido compartirlo debido a que los resultados son sorprendentes y que muy bien :)
Primero que todo debemos adjuntar a la plantilla el archivo
javascript y el
css de FleXcroll:
<link href="url-flexcrollstyles.css" rel="stylesheet" type="text/css" />
<script type='text/javascript' src="url-flexcroll.js"></script>
Despues de adjuntar el script y el css, lo primero será crear la capa (div) a la que le queremos agregar el scroll personalizado. En este ejmplo se llamará "
miscroll". Es importante y no se debe olvidar que la capa debe tener como clase la palabra
flexcroll.
<div id="
miscroll" class="flexcroll">
...el contenido debe ir aqui...
<div>
A esta capa vamos a añadirle algunos estilos:
#miscroll {
width: 200px;
height: 100px;
overflow: auto;
background: #D5EADE;
padding: 10px;
}
Donde la propiedad
overflow determina si se aplica o no el scroll, en este caso (auto) las barras solo aparecen si el contenido es mayor a las dimensiones de la capa dadas en
width (ancho) y
height (alto).
Añadiendo un poco de texto nuestro ejemplo deberá verse asi:
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Pellentesque ultrices facilisis risus. Aenean sollicitudin imperdiet justo. Nam sed nulla sed metus blandit pretium. Morbi odio. Maecenas vestibulum dolor. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nullam in elit. Nam venenatis urna id diam. Quisque porta. Sed ultricies, sem vel gravida mollis, pede lectus vehicula orci, quis sodales mauris velit vitae dui. Sed tincidunt mauris ut libero. Suspendisse potenti. Praesent adipiscing. Sed sem. Ut non justo. Cras pretium nibh scelerisque nibh hendrerit venenatis.
Nullam lobortis, dui nec accumsan molestie, ligula libero porta urna, in tincidunt ante lacus ac diam. Vestibulum erat risus, scelerisque non, mattis sit amet, aliquet convallis, enim. Sed mattis. Phasellus tristique. Nullam metus ipsum, sagittis at, tempor non, consectetuer eget, massa. Curabitur metus lacus, fringilla ac, interdum condimentum, hendrerit non, est. Morbi iaculis. Aenean lacus lectus, lacinia eget, hendrerit id, imperdiet ac, nisl. Praesent metus. Morbi mi elit, lacinia fringilla, luctus ut, tempor at, diam. Nulla arcu nibh, condimentum fringilla, nonummy et, volutpat eget, orci. Suspendisse et dui. Integer eget lorem. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos. Suspendisse vitae odio. Sed risus nisl, mattis vitae, imperdiet et, semper nec, tellus. Quisque adipiscing, neque id faucibus fringilla, eros augue ultricies orci, quis tincidunt tortor elit gravida ligula. Suspendisse suscipit sem sit amet ipsum. Etiam elit.
Aenean ullamcorper leo a neque. Ut eros risus, ornare sed, luctus sit amet, mollis ut, nisl. Proin dui. Aliquam suscipit. Vestibulum nisl wisi, eleifend at, placerat et, lobortis vitae, dui. Nulla dapibus pretium nulla. In hac habitasse platea dictumst. Cras ultricies nisl eu est. Aliquam ultrices, orci in dapibus facilisis, tortor pede bibendum neque, eget vestibulum lectus wisi vitae orci. Phasellus quis metus. In turpis diam, varius in, pulvinar sit amet, commodo ut, wisi. Donec leo nibh, iaculis in, facilisis non, mollis eget, eros. Morbi sem.
Nunc sed arcu. Phasellus euismod tincidunt eros. Proin ac purus. In dictum ante vitae libero. Proin pede. Pellentesque tellus ipsum, semper quis, dapibus eget, ultricies ac, pede. Aenean tristique tincidunt lorem. Aenean eget eros quis tellus tincidunt condimentum. Aliquam tempor, erat sit amet condimentum sagittis, ante sapien dapibus lectus, in tempor mauris sem non metus. Nam id orci. Nulla dignissim, felis in euismod tempor, neque turpis suscipit urna, id tristique mauris eros et dui.
Aliquam eget felis id elit congue tempus. Maecenas a velit. Sed egestas malesuada sapien. In sapien. Integer sit amet massa vitae justo vulputate viverra. Fusce suscipit, mi a lacinia lobortis, urna enim consectetuer risus, et ultrices ante nulla nec mauris. Integer pulvinar aliquet turpis. Phasellus fermentum diam at mauris. Ut nulla est, rhoncus sed, malesuada eget, rutrum ac, nunc. Curabitur in ante.
Aenean ullamcorper leo a neque. Ut eros risus, ornare sed, luctus sit amet, mollis ut, nisl. Proin dui. Aliquam suscipit. Vestibulum nisl wisi, eleifend at, placerat et, lobortis vitae, dui. Nulla dapibus pretium nulla. In hac habitasse platea dictumst. Cras ultricies nisl eu est. Aliquam ultrices, orci in dapibus facilisis, tortor pede bibendum neque, eget vestibulum lectus wisi vitae orci. Phasellus quis metus. In turpis diam, varius in, pulvinar sit amet, commodo ut, wisi. Donec leo nibh, iaculis in, facilisis non, mollis eget, eros. Morbi sem.
Nunc sed arcu. Phasellus euismod tincidunt eros. Proin ac purus. In dictum ante vitae libero. Proin pede. Pellentesque tellus ipsum, semper quis, dapibus eget, ultricies ac, pede. Aenean tristique tincidunt lorem. Aenean eget eros quis tellus tincidunt condimentum. Aliquam tempor, erat sit amet condimentum sagittis, ante sapien dapibus lectus, in tempor mauris sem non metus. Nam id orci. Nulla dignissim, felis in euismod tempor, neque turpis suscipit urna, id tristique mauris eros et dui.
Aliquam eget felis id elit congue tempus. Maecenas a velit. Sed egestas malesuada sapien. In sapien. Integer sit amet massa vitae justo vulputate viverra. Fusce suscipit, mi a lacinia lobortis, urna enim consectetuer risus, et ultrices ante nulla nec mauris. Integer pulvinar aliquet turpis. Phasellus fermentum diam at mauris. Ut nulla est, rhoncus sed, malesuada eget, rutrum ac, nunc. Curabitur in ante.
Si quieres que tambien aparezca la barra horizontal hay que añadir dentro de
miscroll otra capa con un ancho mayor, algo como esto:
#miscrollHorizontal {
width:300px;
}
y el html debe quedar asi:
<div id="
miscroll" class="flexcroll">
<div id="
miscrollHorizontal">
...el contenido debe ir aqui...
</div>
<div>
nos debe quedar asi:
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Pellentesque ultrices facilisis risus. Aenean sollicitudin imperdiet justo. Nam sed nulla sed metus blandit pretium. Morbi odio. Maecenas vestibulum dolor. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur
ridiculus mus. Nullam in elit. Nam venenatis urna id diam. Quisque porta. Sed ultricies, sem vel gravida mollis, pede lectus vehicula orci, quis sodales mauris velit vitae dui. Sed tincidunt mauris ut libero. Suspendisse potenti. Praesent adipiscing. Sed sem. Ut non justo. Cras pretium nibh scelerisque nibh hendrerit venenatis.
Nullam lobortis, dui nec accumsan molestie, ligula libero porta urna, in tincidunt ante lacus ac diam. Vestibulum erat risus, scelerisque non, mattis sit amet, aliquet convallis, enim. Sed mattis. Phasellus tristique. Nullam metus ipsum, sagittis at, tempor non, consectetuer eget, massa. Curabitur metus lacus, fringilla ac, interdum condimentum, hendrerit non, est. Morbi iaculis. Aenean lacus lectus, lacinia eget, hendrerit id, imperdiet ac, nisl. Praesent metus. Morbi mi elit, lacinia fringilla, luctus ut, tempor at, diam. Nulla arcu nibh, condimentum fringilla, nonummy et, volutpat eget, orci. Suspendisse et dui. Integer eget lorem. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos. Suspendisse vitae odio. Sed risus nisl, mattis vitae, imperdiet et, semper nec, tellus. Quisque adipiscing, neque id faucibus fringilla, eros augue ultricies orci, quis tincidunt tortor elit gravida ligula. Suspendisse suscipit sem sit amet ipsum. Etiam elit.
Aenean ullamcorper leo a neque. Ut eros risus, ornare sed, luctus sit amet, mollis ut, nisl. Proin dui. Aliquam suscipit. Vestibulum nisl wisi, eleifend at, placerat et, lobortis vitae, dui. Nulla dapibus pretium nulla. In hac habitasse platea dictumst. Cras ultricies nisl eu est. Aliquam ultrices, orci in dapibus facilisis, tortor pede bibendum neque, eget vestibulum lectus wisi vitae orci. Phasellus quis metus. In turpis diam, varius in, pulvinar sit amet, commodo ut, wisi. Donec leo nibh, iaculis in, facilisis non, mollis eget, eros. Morbi sem.
Nunc sed arcu. Phasellus euismod tincidunt eros. Proin ac purus. In dictum ante vitae libero. Proin pede. Pellentesque tellus ipsum, semper quis, dapibus eget, ultricies ac, pede. Aenean tristique tincidunt lorem. Aenean eget eros quis tellus tincidunt condimentum. Aliquam tempor, erat sit amet condimentum sagittis, ante sapien dapibus lectus, in tempor mauris sem non metus. Nam id orci. Nulla dignissim, felis in euismod tempor, neque turpis suscipit urna, id tristique mauris eros et dui.
Aliquam eget felis id elit congue tempus. Maecenas a velit. Sed egestas malesuada sapien. In sapien. Integer sit amet massa vitae justo vulputate viverra. Fusce suscipit, mi a lacinia lobortis, urna enim consectetuer risus, et ultrices ante nulla nec mauris. Integer pulvinar aliquet turpis. Phasellus fermentum diam at mauris. Ut nulla est, rhoncus sed, malesuada eget, rutrum ac, nunc. Curabitur in ante.
Aenean ullamcorper leo a neque. Ut eros risus, ornare sed, luctus sit amet, mollis ut, nisl. Proin dui. Aliquam suscipit. Vestibulum nisl wisi, eleifend at, placerat et, lobortis vitae, dui. Nulla dapibus pretium nulla. In hac habitasse platea dictumst. Cras ultricies nisl eu est. Aliquam ultrices, orci in dapibus facilisis, tortor pede bibendum neque, eget vestibulum lectus wisi vitae orci. Phasellus quis metus. In turpis diam, varius in, pulvinar sit amet, commodo ut, wisi. Donec leo nibh, iaculis in, facilisis non, mollis eget, eros. Morbi sem.
Nunc sed arcu. Phasellus euismod tincidunt eros. Proin ac purus. In dictum ante vitae libero. Proin pede. Pellentesque tellus ipsum, semper quis, dapibus eget, ultricies ac, pede. Aenean tristique tincidunt lorem. Aenean eget eros quis tellus tincidunt condimentum. Aliquam tempor, erat sit amet condimentum sagittis, ante sapien dapibus lectus, in tempor mauris sem non metus. Nam id orci. Nulla dignissim, felis in euismod tempor, neque turpis suscipit urna, id tristique mauris eros et dui.
Aliquam eget felis id elit congue tempus. Maecenas a velit. Sed egestas malesuada sapien. In sapien. Integer sit amet massa vitae justo vulputate viverra. Fusce suscipit, mi a lacinia lobortis, urna enim consectetuer risus, et ultrices ante nulla nec mauris. Integer pulvinar aliquet turpis. Phasellus fermentum diam at mauris. Ut nulla est, rhoncus sed, malesuada eget, rutrum ac, nunc. Curabitur in ante.
El creador,
www.hesido.com, nos ofrece una cantidad de ejemplos en
esta carpeta comprimida. Para cambiar la imagen de cada barra tendrás que modificar el archivo css llamado
flexcrollstyles correspondiente en cada ejemplo.
Facebox es una ventana modal (lightwindow) ligera que puede mostrar imagenes, divs (capas) o paginas enteras a traves de ajax. Utiliza la libreria jQuery por lo que si utilizamos Scriptaculous o prototype podria presentarnos problemas con los efectos.
Tiene una apariencia parecida al visualizador de facebook, de ahi su nombre.
Podemos ver algunos ejemplos en funcionamiento en
esta pagina.
Para agregar la laightwindow descargamos el
zip y alojamos los archivos en nuestro servidor, si no quieres meterte en ese cuento o de verdad no sabes como, puedes usar mis archivos (en caso de cambiar de servidor publicaré una entrada con los nuevos links):
Lista de archivos.
Lo siguiente será adjuntar la hoja de estilos y los archivos js (ambos antes de </head>):
<script src="url-jquery-1.2.2.pack.js" type="text/javascript"></script>
<link href="url-facebox.css" media="screen" rel="stylesheet" type="text/css" />
<script src="url-facebox.js" type="text/javascript"></script>
<script type="text/javascript">
jQuery(document).ready(function($) {
$('a[rel*=facebox]').facebox()
})
</script>
y los archivos los añadimos de la siguiente forma:
Para una imagen :
<a href="listenmusic.jpg" rel="facebox">Girl listening to music</a>
Para una capa (div) esccondida:
<p><a href="
#mydiv"
rel="facebox">View DIV with id="mydiv" on the page</a></p>
<div id="
mydiv" style="display:none">
El contenido de esta capa solo sera visible si presionamos click sobre el enlace anterior, que contiene el id mydiv
</div>
Un archivo html externo (solo si esta en el mismo servidor):
<a href="archivo_externo.htm" rel="facebox">View "External.htm" fetched via Ajax</a>
y para añadir un html externo(como el anterior) dando estilos css:
<style type="text/css">
.estilo{
background: silver;
}
</style>
<a href="arcchivo_externo.htm" rel="facebox[.estilo]">View "External.htm" fetched via Ajax, further styled with ".thickstyle" CSS class</a>
Este bonito efecto me lo he encontrado en
Theme Forest, y sirve para obtener una vista previa de imagenes cuando pasamos el cursor del mouse sobre una imagen. Mira estos ejemplos:
Si quieres agregar este efecto en tu blog solo sigue los siguientes pasos:
Ve a
edición de HTML, busca </head> y justo antes pega el siguiente codigo:
<style type='text/css'>
#lightbox {
background-color:#EAEAEA;
border:1px solid #BABABA;
padding:5px;
width:590px;
min-height:300px;
}
</style>
<script src='http://www.fileden.com/files/2009/4/24/2416448/lightbox_preview.txt' type='text/javascript'/>
<script src='http://www.fileden.com/files/2009/4/24/2416448/lightview.txt' type='text/javascript'/>
y eso es todo, el efecto ha sido agregado a tu plantilla. Al momento de poner una imagen con vista previa solo debes pegar las imagenes dentro de una capa con el id(nombre unico) "doc_body" con la siguiente estructura:
<div id="doc_body"><img alt="texto alternativo al pasar el cursor" onmousemove="showlightbox(this, 'url-imagen-en-tamaño-mayor');" src="url-imagen-en-tamaño-menor" />
</div> Y si quieres añadir un enlace seria:
<div id="doc_body">
<a href="url-de-destino"><img alt="texto alternativo al pasar el cursor" onmousemove="showlightbox(this, 'url-imagen-en-tamaño-mayor');" src="url-imagen-en-tamaño-menor" />
</a></div>
Uno de los ejemplos que estoy usando es:
<div id="doc_body">
<img alt="title" border="0" height="80" onmousemove="showlightbox(this, 'http://s3.envato.com/files/141692/01_presentation.__large_preview.jpg');" src="http://s3.envato.com/files/141691.jpg" width="80" />
</div>
Hace unos dias explicaba como
poner un letrero flotante con la posibilidad de cerrarse y abrirse con un simple click. Leyendo un poco sobre codigos condicionales en blogger se me ocurrio que tal vez podriamos mostrar un mensaje dependiendo del area del blog en la que nos encontremos. Por ejemplo, si estamos entrando a una etiqueta en especial se mostraria un letrero como este: "Estas entrando a la zona juegos, no olvides calificarme en juegos.com" o algo como "Pareces estar interesado en esta movida, entra al grupo en facebook y participa del foro"...las posibilidades son infinitas y no solo se puede hacer con las etiquetas, sino tambien con la pagina principal, las paginas individuales, segun la dirección de un post o el nombre de una entrada. Esta última nos puede servir cuando algo de lo que se dice ahi haya cambiado, por ejemplo que un script deje de funcionar o alguna actualización que requiera la atención del lector.
Los codigos no son para aprenderselos, pero en
esta entrada J.Miur de
Vagabundia nos explica paso por paso como funcionan y como podemos hacerlos trabajar juntos.
Los siguientes codigos deben pegarse donde se quiere que aparezcan:
Aviso Flotante solo en la pagina principalCualquier texto, imagen o codigo que se ponga entre las siguientes lineas solo se verá en la pagina principal:
<b:if cond='data:blog.url == data:blog.homepageUrl'>
esto se mostrará sólo en el home
</b:if>
O podemos hacer que NO se muestre cuando estemos en la pagina principal cambiando solo una parte de la primera linea:
<b:if cond='data:blog.url != data:blog.homepageUrl'>
esto se mostrará sólo en el home
</b:if>
Aviso Flotante solo en las paginas individualesCualquier texto, imagen o codigo que se ponga entre las siguientes lineas solo se verá en una pagina individual, es decir una pagina que solo contenga una entrada:
<b:if cond='data:blog.pageType == "item"'>
esto sólo se mostrará en una entrada individual
</b:if>
Aviso Flotante solo cuando se navegue en una etiquetaCualquier texto, imagen o codigo que se ponga entre las siguientes lineas solo se verá cuando estemos navegando por una etiqueta, es decir cuando se listen las entradas con esa etiqueta en comun:
<b:if cond='data:blog.pageName == "NOMBRE_ETIQUETA"'>
esto sólo se mostrará cuando se navegue por la etiqueta NOMBRE_ETIQUETA
</b:if>
o bien:
<b:if cond='data:blog.url == "http://miBlog.blogspot.com/search/label/NOMBRE_ETIQUETA"'>
esto sólo se mostrará cuando se navegue por la etiqueta NOMBRE_ETIQUETA
</b:if>
Aviso Flotante solo cuando se navegue en determinada entrada
Cualquier texto, imagen o codigo que se ponga entre las siguientes lineas solo se verá cuando estemos navegando por una entrada en especial, es decir cuando visitemos la pagina que contiene la entrada que especifiquemos:
<b:if cond='data:blog.url == "http://miBlog.blogspot.com/2009/02/nombre-de-la-entrada.html"'>
Esto solo se mostrará si navegamos por una entrada con esta dirección
</b:if>
o bien:
<b:if cond='data:blog.pageName == "Nombre de la entrada"'>
Esto solo se mostrará si navegamos por una entrada con este nombre
</b:if>
Si queremos agregar mas de un codigo condicional en el blog lo mejor es que los relacionemos, es decir que una condicion se cumpla si y solo si otra no se cumple. El porque de hacer esto puede explicarse como una posible confución con el script para cerrar el letrero y puede observarse si ponemos una condición para las paginas individuales y a la vez una para una entrada en especial (que a su vez tambien es pagina individual). Piensalo con un ejemplo cotidiano...por ejemplo si mañana no voy a trabajar entonces me quedo en casa con mi familia, pero si voy a trabajar no podré pasar el dia con ellos.
Es muy facil si lo piensas de esa manera:
Empezamos creando una condición, en ella decimos que su contenido se debe mostrar en una pagina individual:
<b:if cond='data:blog.pageType == "item"'>
Aqui el contenido
</b:if>
Ahora creamos una condicion dentro de esa condición, la instrucción es que si no estamos en una entrada de nombre
script entonces se debe mostrar su contenido:
<b:if cond='data:blog.pageType == "item"'>
<b:if cond='data:blog.pageName != "script"'>
El contenido a mostrar si no estamos en una entrada de nombre script
</b:if>
</b:if>
Pero ¿que pasa si estamos en esa entrada?, para eso agregamos una especie de "entonces se debe mostrar esto otro" (
<b:else/>) :
<b:if cond='data:blog.pageType == "item"'>
<b:if cond='data:blog.pageName != "script"'>
El contenido a mostrar si no estamos en una entrada de nombre script
<b:else/>
Contenido que se va a mostrar si estamos en una pagina individual y la entrada no se llama script
</b:if>
</b:if>
Todos estos ejemplos puedes verlos en
este blog y para probar como se verán los avisos en el tuyo es recomendable poner los codigos dentro de las siguientes lineas (lo que esté dentro solo podrá ser visto por el administrador del blog una vez se haya identificado ante blogger)
<span class="item-control blog-admin">
Aqui el codigo a probar
</span>
Desde hace algun tiempo se ha difundido la idea de las faviconeras, de algún modo son eficaces porque nos dan a conocer en diferentes espacios y lugares. Me parece que su eficacia radica en cuan atractiva lusca y cuanto poder de convencimiento tenga.
Despues de todo me ha gustado la idea y con un poco de imaginación pensé en como hacerla, la adelanté bastante...pero despues de todo me enredé con el script, asi que me encontré con
Alternativas web de
Gustavo Beauregard que muy amablemente se ofrecio a ayudarme. Despues de algunas horas, el ayudandome con el codigo y yo terminando el css, el resultado se dio.
Si quieres agregar tu pagina llena los siguientes datos, descuida no te pediré nada a cambio.
Tambien puedes agregar un comentario con tu opinion.
| Demo |
Este codigo JavaScript nos permite mostrar toda clase de frases segun la hora establecida en el computador del visitante. Los mensajes a mostrar puedes modificarlos según tus intereses, al igual que las propiedades css. |
Este es el script y donde lo pongas aparecerá el mensaje:
<script language="javascript" type="text/javascript">
document.write("<div id='
saludo'>")
day = new Date()
hr = day.getHours()
if (hr == 1) document.write("
Son mas de la 1 am, ¿aun despierto?")
if (hr == 2) document.write("
Son mas de la 2 am, ¿aun despierto?")
if (hr == 3) document.write("
Son mas de la 3 am, ¿aun despierto?")
if (hr == 4) document.write("
Son mas de la 4 am, ¿aun despierto?")
if (hr == 5) document.write("
Son mas de la 5 am, ¿aun despierto?")
if (hr == 6) document.write("
Son mas de las 6 am, Bostezoo!")
if (hr == 7) document.write("
Buenos dias! Ya son mas de las 7 am.")
if (hr == 8) document.write("
Son mas de las 8 am, organiza bien tu dia.")
if (hr == 9) document.write("
Son mas de las 9 am")
if (hr == 10) document.write("
Son mas de las 10 am, Hora del café!")
if (hr == 11) document.write("
Son mas de las 11 am")
if (hr == 12) document.write("
Es de mediodía")
if (hr == 13) document.write("
Ya son mas de la 1 pm, buenas tardes!")
if (hr == 14) document.write("
Son mas de las 2 pm")
if (hr == 15) document.write("
Son mas de las 3 pm")
if (hr == 16) document.write("
Son mas de las 4 pm")
if (hr == 17) document.write("
Good Evening! It's after 5 pm")
if (hr == 18) document.write("
Ya son mas de las 6 pm, hora de cenar!")
if (hr == 19) document.write("
Son mas de las 7 pm")
if (hr == 20) document.write("
Son mas de las 8 pm")
if (hr == 21) document.write("
Son mas de las 9 pm")
if (hr == 22) document.write("
Son mas de las 10 pm")
if (hr == 23) document.write("
Son mas de las 11 pm, a la cama!")
if (hr == 0) document.write("
ya es media noche.")
document.write("</div>")
</script>
si lo dejas asi verás algo como esto en tu plantilla:
Pero podemos acomodar un poco el css para darle un toque de personalidad a la capa #saludo.
#saludo {
width:200px;
background:#69C url(url-fontdo.png) right bottom no-repeat;
color:#FFF;
font-weight:bold;
font-family:Arial, Helvetica, sans-serif;
text-align:center;
padding: 77px 4px 10px 4px;
cursor:pointer;
border: 2px solid #6CC;
-ms-border-radius: 5px;
-moz-border-radius:5px;
-webkit-border-radius: 5px;
-khtml-border-radius: 5px;
border-radius: 5px;
}
Y el resultado es este:
Nuestra cajita de frases ya está terminada, pero quise añadir un pequeño efecto con scriptaculous visto en
vagabundia, asi que encerré el script dentro de la capa #CambiarOpacidad.
<div id="CambiarOpacidad" style="filter:alpha(opacity=100); opacity:1;" onclick="javascript:changeOpacity('CambiarOpacidad')"></div>
y agregué este codigo antes de </head> :
<script type="text/javascript">
//<![CDATA[
function changeOpacity(id) {
$opacityStatus = $(id);
if($opacityStatus.value==0) {
new Effect.Opacity(id, {duration:0.5, from:0.4, to:1.0});
$opacityStatus.value = 1;
} else {
new Effect.Opacity(id, {duration:0.5, from:1.0, to:0.4});
$opacityStatus.value= 0;
}
}
//]]>
</script>
Finalmente puedes ver como funciona
aqui.
| Demo | Hace algunos dias agregué un pequeño sistemita para dar formato al texto, gracias a un comentario de Gem@ me he propuesto explicar como funciona mi nuevo mini editor para los comentarios, sino lo conoces puedes mirar mas abajo y dejar un comentario si te ha gustado :)
En realidad es algo sencillo y consta de dos partes importantes: agregar emoticones a los comentarios y poner un sistemita para introducir código a un textarea por medio de un botón. NO OLVIDES hacer una copia de respaldo de tu plantilla antes de hacer cualquier cambio.
|
Agregando los EmoticonesBasado en esta entrada de ayuda para mi web, los pasos a seguir son los siguientes:
1. Para agregar el javascript buscamos la etiqueta </body> y justo antes pegamos el siguiente codigo:
<b:if cond='data:blog.pageType == "item"'>
<script src='http://agudovk.googlepages.com/Emoticonos.js' type='text/javascript'/>
<script type='text/javascript'>
emoticonComentario();
</script>
</b:if>
2. Para que nuestros visitantes se enteren de cómo agregarlos vamos a poner alguna imagen o aviso antes del editor de blogger, lo que Ayuda para mi web nos ofrece es una tabla:
<table width='400px'>
<tr>
<td colspan='10'>Emoticonos en blogger</td>
<td colspan='3'><a href='http://ayudaparamiweb.com'><img src='http://agudovk.googlepages.com/ayudaweb.png' style='border:0;'/></a></td>
</tr>
<tr>
<td><img src='http://agudovk.googlepages.com/com-smile.gif'/></td>
<td><img src='http://agudovk.googlepages.com/com-cry.gif'/></td>
<td><img src='http://agudovk.googlepages.com/com-sad.gif'/></td>
<td><img src='http://agudovk.googlepages.com/com-tongue.gif'/></td>
<td><img src='http://agudovk.googlepages.com/com-lol.gif'/></td>
<td><img src='http://agudovk.googlepages.com/com-oops.gif'/></td>
<td><img src='http://agudovk.googlepages.com/com-blink.gif'/></td>
<td><img src='http://agudovk.googlepages.com/com-neutral.gif'/></td>
<td><img src='http://agudovk.googlepages.com/com-secreto.gif'/></td>
<td><img src='http://agudovk.googlepages.com/com-sorpresa1.gif'/></td>
<td><img src='http://agudovk.googlepages.com/com-sorpresa2.gif'/></td>
<td><img src='http://agudovk.googlepages.com/com-mad.gif'/></td>
<td><img src='http://agudovk.googlepages.com/com-confuso.gif'/></td>
</tr>
<tr>
<td>:)</td>
<td>:'(</td>
<td>:(</td>
<td>:P</td>
<td>:D</td>
<td>:$</td>
<td>;)</td>
<td>:-I</td>
<td>:-X</td>
<td>:o</td>
<td>:O</td>
<td>O</td>
<td>:/</td>
</tr>
</table>
Para agregarla debemos expandir plantillas de artilugios, buscar el siguiente código y pegar la tabla anterior justo antes.
<iframe allowtransparency='true' class='blogger-iframe-colorize' frameborder='0' height='275' id='comment-editor' scrolling='no' src='' width='100%'/>
El problema de agregarla es que el script mismo reemplaza el texto por las imágenes correspondientes, así que es aconsejable poner una imagen. De nuevo buscamos el <iframe> y pegamos lo que está en rojo :
<div class='comment-form'>
<a name='comment-form'/>
<h4 id='comment-post-message'><data:postCommentMsg/></h4>
<p><data:blogCommentMessage/></p>
<data:blogTeamBlogMessage/>
<img src="url-de-la-imagen" alt="alguna-frase" id="emoticones" /><a expr:href='data:post.commentFormIframeSrc' id='comment-editor-src'/>
<iframe allowtransparency='true' class='blogger-iframe-colorize' frameborder='0' height='275' id='comment-editor' scrolling='no' src='' width='100%'/>
<data:post.iframeColorizer/>
</div>
Con imagen me refiero a algo como lo que usan
Vagabundia y
Gem@a blog:
El ID de la imagen te permite agregar propiedades CSS para posicionarla o "embellecerla”.
Para modificarPara empezar, te recomiendo que descargues el script y lo alojes tu mismo (puedes bajarlo desde
aquí). De esa manera podrás modificar el texto con el que aparecerá cada emoticón y cambiar las imágenes por las que te gusten.
Como modificar el script[+/-]Veamos, no soy muy bueno en esto pero intentaré explicarlo bien.
function emoticonComentario() {
if(!document.getElementById) {return;} // no soportado
bodyText = document.getElementById('comments');
comentario = bodyText.innerHTML;
// :)comentario = comentario.replace(/
:)/g,'<img style=”border:none;vertical-align:middle;” src="
http://agudovk.googlepages.com/com-smile.gif" /> ');
// :'(comentario = comentario.replace(/
;(/g,'<img style=”border:none;vertical-align:middle;” src="
http://agudovk.googlepages.com/com-cry.gif" /> ');
// :(comentario = comentario.replace(/
:(/g,'<img style=”border:none;vertical-align:middle;” src="
http://agudovk.googlepages.com/com-sad.gif" /> ');
// :Pcomentario = comentario.replace(/
:P/g,'<img style=”border:none;vertical-align:middle;” src="
http://agudovk.googlepages.com/com-tongue.gif" /> ');
// :Dcomentario = comentario.replace(/
:D/g,'<img style=”border:none;vertical-align:middle;” src="
http://agudovk.googlepages.com/com-lol.gif" /> ');
// xDcomentario = comentario.replace(/
xD/g,'<img style=”border:none;vertical-align:middle;” src="
http://agudovk.googlepages.com/com-lol.gif" /> ');
// :$comentario = comentario.replace(/
:$/g,'<img style=”border:none;vertical-align:middle;” src="
http://agudovk.googlepages.com/com-oops.gif" /> ');
// ;)comentario = comentario.replace(/
;)/g,'<img style=”border:none;vertical-align:middle;” src="http://agudovk.googlepages.com/com-blink.gif" /> ');
// :-Icomentario = comentario.replace(/
:-I/g,'<img style=”border:none;vertical-align:middle;” src="
http://agudovk.googlepages.com/com-neutral.gif" /> ');
// :-Xcomentario = comentario.replace(/
:-X/g,'<img style=”border:none;vertical-align:middle;” src="
http://agudovk.googlepages.com/com-secreto.gif" /> ');
// :ocomentario = comentario.replace(/
:o/g,' <img style=”border:none;vertical-align:middle;” src="
http://agudovk.googlepages.com/com-sorpresa1.gif" /> ');
// :Ocomentario = comentario.replace(/
:O/g,' <img style=”border:none;vertical-align:middle;” src="
http://agudovk.googlepages.com/com-sorpresa2.gif" /> ');
// |Ocomentario = comentario.replace(/
|O/g,' <img style=”border:none;vertical-align:middle;” src="
http://agudovk.googlepages.com/com-mad.gif" /> ');
// :comentario = comentario.replace(/
:\/g,' <img style=”border:none;vertical-align:middle;” src="
http://agudovk.googlepages.com/com-confuso.gif" /> ');
bodyText.innerHTML = comentario;
}
El texto en
rojo es la dirección de cada imagen, el texto en
verde es un comentario (muy útil de hecho) que señala la palabra con la que aparece cada imagen y el texto en
morado es ese texto, así que si quieres cambiarlo debes reemplazarlo.
En
esta página encontrarás toda una variedad de emoticones por si deseas personalizar un poco.
Armando el mini-editorPara empezar hay que definir que botones deseas agregar, para así mismo definir el Java Script. El código fuente lo he conseguido después de varios minutos vagando en la red así que si encuentras algún error te agradecería que me lo comentaras (además porque no soy muy bueno en ello :) ).
Vale la pena aclarar que lo que ves cerca al editor de blogger es un iframe (que contiene al mini-editor). He decidido hacerlo así para no causar problemas en la plantilla y facilitar un poco el trabajo.
El mini-editor que estoy usando tiene varias funciones que son:
1-agregar un enlace[+/-]function inslink(){
var input = document.form1.commenteditor;
if(typeof document.selection != 'undefined' && document.selection) {
var str = document.selection.createRange().text;
input.focus();
var my_link = prompt("Introduce la URL:","http://");
if (my_link != null) {
if(str.length==0){
str=my_link;
}
var sel = document.selection.createRange();
sel.text = "<a href="" + my_link + "">" + str + "</a>";
sel.select();
}
return;
}else if(typeof input.selectionStart != 'undefined'){
var start = input.selectionStart;
var end = input.selectionEnd;
var insText = input.value.substring(start, end);
var my_link = prompt("Enter URL:","http://");
if (my_link != null) {
if(insText.length==0){
insText=my_link;
}
input.value = input.value.substr(0, start) +"<a href="" + my_link +"">" + insText + "</a>"+ input.value.substr(end);
input.focus();
input.setSelectionRange(start+11+my_link.length+insText.length+4,start+11+my_link.length+insText.length+4);
}
return;
}else{
var my_link = prompt("Ingresar URL:","http://");
var my_text = prompt("Ingresar el texto del link:","");
input.value+=" <a href="" + my_link + "">" + my_text + "</a>";
return;
}
}
function insimg(){
var input = document.form1.commenteditor;
if(typeof document.selection != 'undefined' && document.selection) {
var str = document.selection.createRange().text;
input.focus();
var my_img = prompt("Introduce la URL de la imagen:","http://");
if (my_img != null) {
if(str.length==0){
str=my_img;
}
var sel = document.selection.createRange();
sel.text = "<img src="" + my_img + "" />";
sel.select();
}
return;
}else if(typeof input.selectionStart != 'undefined'){
var start = input.selectionStart;
var end = input.selectionEnd;
var insText = input.value.substring(start, end);
var my_img = prompt("Introduce la URL de la imagen:","http://");
if (my_img != null) {
if(insText.length==0){
insText=my_img;
}
input.value = input.value.substr(0, start) +"<img src="" + my_img +"" />" + input.value.substr(end);
input.focus();
input.setSelectionRange(start+11+my_img.length+insText.length+4,start+11+my_img.length+insText.length+4);
}
return;
}
}
(Negrita, Cursiva y Subrayado)
[+/-]
function instag(tag){
var input = document.form1.commenteditor;
if(typeof document.selection!='undefined'&&document.selection) {
var str = document.selection.createRange().text;
input.focus();
var sel = document.selection.createRange();
sel.text = "<" + tag + ">" + str + "</" +tag+ ">";
sel.select();
return;
}
else if(typeof input.selectionStart != 'undefined'){
var start = input.selectionStart;
var end = input.selectionEnd;
var insText = input.value.substring(start, end);
input.value = input.value.substr(0, start) + '<'+tag+'>' + insText + '</'+tag+'>'+ input.value.substr(end);
input.focus();
input.setSelectionRange(start+2+tag.length+insText.length+3+tag.length,start+2+tag.length+insText.length+3+tag.length);
return;
}
else{
input.value+=' <'+tag+'>Reemplace este texto</'+tag+'>';
return;
}
}
Los he agrupado en dos archivos java script
formato texto.js e
img.js.
Para agregarlos a la plantilla copia y pega estos códigos antes de </head>
<script src='url-formato texto.js'/></script>
<script src='url-img.js'/></script>
El siguiente paso es, dentro del <body>, crear el formulario y dentro de el poner el textarea:
<form name="form1" method="post" action="">
<textarea name="commenteditor" style="margin-top:5px; height:50px; width:184px;">
</textarea>
</form>
Teniendo el formulario y las funciones Java Script solo faltan los botones:
<form name="form1" method="post" action="">
<input class=" clase1" type="button" name="Submit" onClick="instag('b')"/>
<input class=" clase2" type="button" name="Submit3" onClick="instag('u')" />
<input class=" clase3" type="button" name="Submit4" onClick="instag('i')" />
<input class=" clase4" type="button" name="Submit2" onClick="inslink()" />
<input class="clase5" type="button" name="Submit5" onClick="insimg()" />
<br>
<textarea name="commenteditor" style="margin-top:5px; height:50px; width:184px;">
</textarea>
</form>
Donde el texto en
azul son las funciones y el texto en
rojo es la etiqueta a añadir, es decir
<
etiqueta>< /
etiqueta>
En este caso son
b (Negrita),
u (Subrayado), e
i (Cursiva).
Hasta aquí deberían funcionar muy bien los botones e insertar el formato en el textarea, si todo va bien podemos continuar. Algo que me pareció muy practico fue que al dar click en cada emoticón este también inserte su texto, pero para no complicarme mas con funciones javascript busqué y busqué hasta que encontré esto:
<a href="javascript:void(0);" title="texto-alternativo"><img style="propiedades" onClick="document.
form1.
commenteditor.value+=' TEXTO-A-AGREGAR '" src="url-de-la-imagen" /></a>
Solo tendrías que modificarlo según tus necesidades y reproducirlo debajo del textarea con cada emoticón. Por ultimo se me ocurrió agregar dos botones mas : uno para copiar el código (aunque solo funciona en internet explorer) y otro para borrar lo que haya escrito (Reset).
Para el botón de copiar[+/-]copia y pega antes de </head>
<script type="text/javascript">
<!--
var copytoclip=1;
function HighlightAll(theField) {
var tempval=eval("document."+theField);
tempval.focus();
tempval.select();
if (navigator.appName.indexOf("Microsoft") != -1&©toclip==1){
therange=tempval.createTextRange();
therange.execCommand("Copy");
window.status="Contents highlighted and copied to clipboard!";
setTimeout("window.status=''",1800);
}
}
//-->
</script>
Y el botón seria:
<a class="highlighttext" href="javascript:HighlightAll('form1.commenteditor')"><img border="0" src="url-de-la-imagen" /></a>
<input type="reset" class="reset" style="propiedades">
Y hasta aqui va el editor, solo tienes que agregar las propiedades css a tu gusto. O puedes copiar el que estoy usando en este momento (si lo haces no olvides alojar las imágenes y los archivos Js en tu propio servidor, ya que los míos están en uno gratuito).
Mini-editor z-graphics
Como agregar el iframe a bloggerSi lo quieres agregar junto con el editor de blogger, expande plantillas de artilugios, busca el siguiente código y agrega lo que está en
rojo:
<iframe allowtransparency='true' class='blogger-iframe-colorize' frameborder='0' height='275' id='comment-editor' scrolling='no' src='' width='100%'/>
<iframe allowtransparency='true' frameborder='0' id='commenteditor' name='commenteditor' scrolling='no' src='DIRECCION-DE-TU-ARCHIVO-HTML'/>
Agregalo antes o despues, como desees. Y lo puedes posicionar agregando propiedades CSS al ID commenteditor. Estas son las propiedades que yo uso, puedes variar los valores para adaptarlo a tu plantilla:
#commenteditor{
position:relative;
top:-300px;
left:412px;
height:350px !important;
width: 360px !important;
}
Y eso es todo, te podrás dar cuenta que algunas etiquetas HTML no están permitidas en los comentarios de blogger, pero seguro sabrás darle un buen uso.
Una pequeña modificaciónLos comentarios 21 y 23 de
Manolo y
Gem@ me han hecho caer en cuenta que el botón para insertar imagenes por medio de la url resulta poco eficiente, ya que blogger no permite esta etiqueta en los comentarios. La solucion que propone gem@ es que la funcion JavaScript nos muestre el codigo para introducir una imagen, es decir:
<img src="url-de-la-imagen" />
Si estas de acuerdo con el cambio solo debes reemplazar el archivo img.js anteriormente nombrado por
este. Para verlo en accion Click
aqui
RequerimientosCarousel.js necesita de ambas librerías Prototype y Script.aculo.us para su funcionamiento.
Puedes descargarlas desde
aqui y
aqui o en su lugar usar las que nos ofrece google:
<script src='http://www.google.com/jsapi'></script>
<script>
google.load("prototype","1.6.0.3");
google.load("scriptaculous", "1.8.2");
</script>
Uso1.Descargue
carousel.js o
carousel-min.js2.Adjunte el script en su pagina, después las librerías
Prototype y
Script.aculo.us:
<script type="text/javascript" src="url-prototype.js"></script>
<script type="text/javascript" src="url-scriptaculous.js"></script>
<script type="text/javascript" src="url-carousel.js"></script>
HTML y CSSEl minimo de capas que debe tener el cuerpo del carrusel son:
- Carousel-wrapper: Es el contenedor mayor y en el se encuentra el carousel.
- Carousel-content: Esta capa contiene los slides, en ella se pueden incluir el numero de diapositivas que se quiera.
- slide: esta pequeña capa contiene lo que se va a mostrar en cada diapositiva, ya sean imágenes, archivos de flash, html, etc.
<div id="carousel-wrapper">
<div id="carousel-content">
<div class="slide"></div>
<div class="slide"></div>
...
<div class="slide"></div>
</div>
</div>
#carousel-wrapper {/*se definen las propiedades del contenedor mayor*/
width: 500px;
height: 500px;
overflow: hidden; /*se esconden las barras de scroll*/
}
#carousel-content {
width: 2500px; /*se define el ancho que podrán tener todos los slides juntos, si se exceed el carousel va a formar un "Segundo piso" asi que no importa el valor, cuanto mas ancho mejor.*/
}
#carousel-content .slide {/*define las propiedades de cada diapositiva*/
float: left;
width: 500px;
height: 500px;
}
Esto generará un carrusel de 500px por 500px con un movimiento horizontal. El cambio a movimiento vertical es tan simple como establecer el ancho de #carousel-content por 500px y la altura de una sola diapositiva.
Iniciar Carousel.js
Usted debe inciar su script asi:
new Carousel(wrapper, slides, triggers, {options});
por ejemplo, para el codigo de arriba, el script podria quedar de la siguiente manera:
new Carousel('carousel-wrapper', $$('#carousel-content .slide'), $$('a.carousel-control', 'a.carousel-jumper'));
DisparadoresHay dos categorías de elementos que desencadenan el movimiento del carrusel: los que provocan directamente un salto a la diapositiva seleccionada (salto a la diapositiva "x"), y los que iniciar una relación saltar (salto a la primera / última / anterior / siguiente diapositiva). La combinación de un disparador de la clase atributos rel y class decididen la conducta del Carrusel.
Por ejemplo, al hacer clic en:
<a href="javascript:" class="carousel-jumper" rel="slide-1">Ir a slide 1</a>
El carrusel irá a la diapositiva que tiene el id "slide-1". Y si:
<a href="javascript:" class="carousel-control" rel="prev">Slide Anterior</a>
El carrusel irá al slide anterior. Las opciones disponibles para el atributo rel son: first, last, prev y next.
Opciones DisponiblesSe dan opciones como el ultimo parámetro en la inicialización del script:{option: value, option: value}
Opciones |
Predeterminado |
Descripcion |
| duration | 1 | La duracion de un salto o movimiento |
| auto | false | Cuando sea TRUE el carrusel se moverá sin necesidad de disparadores, útil para pases de diapositivas. |
| frequency | 3 | Cuando el atributo auto está en modo true, este dicta cuanto tiempo permanecen las diapositivas hasta el próximo movimiento. |
| visibleSlides | 1 | A pesar de que múltiples diapositivas se pueden hacer visibles a la vez, por el estilo, este parámetro es necesario en algunas ocasiones. |
| circular | false | Por opciones predeterminadas, cuando la primera/ultima diapositiva se alcanza, el llamado prev/next no hace nada. Si desea que el efecto continúe, usted debe hacer dos cosas: establecer el parámetro circular en modo true y duplicar la primera diapositiva en el HTML. Es la única manera de dar la impresión de un movimiento continuo. |
| wheel | true | True o false para deslizar el carrusel utilizando la rueda del ratón. |
| effect | scroll | Puede elegir entre los efectos scroll y fade. Cuando use el fade, no son necesarios los parámetros circular y el duplicar la primera diapositiva (vea el ejemplo 3 para el efecto fade) |
| transition | sinoidal | Los dos tipos de transiciones son : sinoidal y spring (vea el ejemplo 2 para aprender mas sobre el efecto spring) |
| selectedClassName | carousel-selected | Cuando se activa un salto de carrusel con carousel-jumper (salta a la diapositiva especificada), esta clase de CSS, se añadirá al gatillo o botón, lo que le ayudará visualmente a poner en relieve los enlaces.(ver el ejemplo online) |
| beforeMove | null | Función de usuario que se ejecutará antes de que los saltos se inicien. Por ejemplo: (beforeMove: function () (alert ( "Aquí voy!");)) |
| afterMove | null | Al igual que beforeMove, sólo se le llama después de que el traslado se ha completado |
| Demo | Acabo de implementar en el blog un sistemita de imagenes aleatorias, visto en macuoren, para ir arriba del blog. es muy sencillo de añadir a nuestra pagina web, solo tienes que añadir los siguientes codigos y si quieres cambia las url de las imagenes. |
Este es el codigo para que las imagenes se muestren como aleatorias cada vez que refresques la pagina:
<script language="javascript">
<!--
function VecImagenes()
{
n=0;
this[n++]=”url_imagen_1.gif“;
this[n++]=”url_imagen_2.png“;
this[n++]=”url_imagen_3.png“;
this[n++]=”url_imagen_4.png”
this.N=n;
}
var Imagenes=new VecImagenes();
src= Imagenes[ Math.floor(Math.random() * Imagenes.N) ] ;
document.write(”<IMG SRC=”+src+”>”);
//–>
</script>
Donde url_imagen_4.png se refiere a la ubicacion de la imagen, el nombre y el formato.
Ahora hay que incluir las imagenes en una capa y darle la posicion, en este caso será en la parte inferior derecha, sin olvidar poner el enlace al que queremos que nos lleve la imagen.
<
div style="display:scroll; position:fixed; bottom:-4px; right:0px;border:0;">
<
a href="#">
<
script language="javascript">
<!--
function VecImagenes()
{
n=0;
this[n++]="url_imagen_1.gif";
this[n++]="url_imagen_2.png";
this[n++]="url_imagen_3.png";
this[n++]="url_imagen_4.png"
this.N=n;
}
var Imagenes=new VecImagenes();
src= Imagenes[ Math.floor(Math.random() * Imagenes.N) ] ;
document.write("<IMG SRC="+src+">");
//–>
</
script>
</
a>
</
div>
y eso es todo, aunque al momento de agregarlo a la plantilla blogger me ha dado problemas asi que lo soluciones poniendo el contenido del script en un archivo adjunto a la plantilla y me ha funcionado de maravilla(el enlace al archivo adjunto se coloca en el mismo lugar donde está el script).
El autor del post original ha dejado un sodigo fuente con algunas imagenes que el ha diseñado y es el siguiente:
<div style="display:scroll; position:fixed; bottom:-4px; right:0px;border:0; ">
<a href="#">
<script language=”javascript”>
<!–
function VecImagenes()
{
n=0;
this[n++]="http://media.share.ovi.com/m1/original/0297/4342542a4f1a475ea6a5da4dac4c71e0.gif";
this[n++]="http://farm2.static.flickr.com/1269/887518968_421100aa52_o.png";
this[n++]="http://media.share.ovi.com/m1/original/0313/ae58536641924587bf1459e1ca6324f3.png";
this[n++]="http://media.share.ovi.com/m1/original/0297/49750ac796e843dd99d3974a5431d024.png";
this[n++]="http://media.share.ovi.com/m1/original/0297/7563bcec1d1c485ea671fa9fe617b21b.png";
this[n++]="http://media.share.ovi.com/m1/original/0313/d7df10299864447a8f5d687b86d54f02.png";
this[n++]="http://media.share.ovi.com/m1/original/0313/8ed17fbd23a74513a1ada08d73e25d4c.gif";
this[n++]="http://media.share.ovi.com/m1/original/0313/768f59fa8e344382b1d95d4df5297541.png";
this[n++]="http://media.share.ovi.com/m1/original/0313/265ffca483644e78bea550f677366779.png";
this[n++]="http://media.share.ovi.com/m1/original/0298/47f3b95f9bfe4a12becc24723ae269b0.png";
this[n++]="http://media.share.ovi.com/m1/original/0298/bd669312ccac4e179b454b386d1692a8.png"
this.N=n;
}
var Imagenes=new VecImagenes();
src= Imagenes[ Math.floor(Math.random() * Imagenes.N) ] ;
document.write("<IMG SRC="+src+">");
//–>
</script>
</a>
</div>
Despues de unos minutos este es mi resultado y aunque son pocas comenta si te ha sido de ayuda o de algo te ha servido:) :
Tal vez te interesen
algunos iconos
| Demo | Este es un menu hecho con listas y con un efecto hover muy atractivo y singular. Para hacer uno como este necesitamos adjunatr a nuestra plantilla o pagina web la libreria jQuery y el segmento de javascript que nos genere el efecto animado. Ademas de esto son necesarias las imagenes que nos servirán de fondo en cada enlace. Dado que serian muchas, puesto que hay que tener en cuenta dos imagenes por enlace(una cuando el puntero del mouse no esté sobre el enlace y otra cuando si lo esté), vamos a usar un sprite y un fondo para el menu. |
Descarga el archivo javascript jQuery desde
aquiCodigo css
/* Menu Body */
ul#menu {
width:100%;
height:122px;
background:url(http://img10.imageshack.us/img10/3126/68018218.png) repeat-x; /* url del bg */
list-style:none;
margin:0;
padding:0;
padding-top:20px;
}
/* Menu Body */
/* Float LI Elements - horizontal display */
ul#menu li {
float:left;
}
/* Link - common attributes */
ul#menu li a {
background:url(http://img14.imageshack.us/img14/808/spritepmu.png) no-repeat scroll top left; /* url del sprite */
display:block;
height:81px;
position:relative;
}
/* Specify width and background position attributes specifically for the class: "inicio" */
ul#menu li a.inicio {
width:159px;
}
/* Specify width and background position attributes specifically for the class: "mantenimiento" */
ul#menu li a.mantenimiento {
width:157px;
background-position:-159px 0px;
}
/* Specify width and background position attributes specifically for the class: "redes" */
ul#menu li a.redes {
width:157px;
background-position:-316px 0px;
}
/* Specify width and background position attributes specifically for the class: "portfolio" */
ul#menu li a.portafolio {
width:157px;
background-position:-477px 0px;
}
/* Span (on hover) - common attributes */
ul#menu li a span {
background:url(http://img14.imageshack.us/img14/808/spritepmu.png) no-repeat scroll bottom left;/* url del sprite */
display:block;
position:absolute;
top:0;
left:0;
height:100%;
width:100%;
z-index:100;
}
/* Span (on hover) - display pointer */
ul#menu li a span:hover {
cursor:pointer;
}
/* Shift background position on hover for the class: "inicio" */
ul#menu li a.inicio span {
background-position:0px -81px;
}
/* Shift background position on hover for the class: "mantenimiento" */
ul#menu li a.mantenimiento span {
background-position:-159px -81px;
}
/* Shift background position on hover for the class: "redes" */
ul#menu li a.redes span {
background-position:-316px -81px;
}
/* Shift background position on hover for the class: "portfolio" */
ul#menu li a.portafolio span {
background-position:-477px -81px;
}
codigo javascript
<!-- Include jQuery Library -->
<script src="jquery.js" type="text/javascript"></script>
<!-- Let's do the animation -->
<script type="text/javascript">
$(function() {
// set opacity to nill on page load
$("ul#menu span").css("opacity","0");
// on mouse over
$("ul#menu span").hover(function () {
// animate opacity to full
$(this).stop().animate({
opacity: 1
}, 'slow');
},
// on mouse out
function () {
// animate opacity to nill
$(this).stop().animate({
opacity: 0
}, 'slow');
});
});
</script>
Codigo HTML
<ul id="
menu">
<li><a href="#" class="inicio"><span></span></a></li>
<li><a href="#" class="mantenimiento"><span></span></a></li>
<li><a href="#" class="redes"><span></span></a></li>
<li><a href="#" class="portafolio"><span></span></a></li>
</ul>
Enlaces a modificar
http://img10.imageshack.us/img10/3126/68018218.png aloja la imagen bg.png en un servidor y cambia la url
http://img14.imageshack.us/img14/808/spritepmu.png has tu propio sprite, alojalo y cambia la url
jquery.js- descarga el archivo javascript, alojalo en un servidor y cambia la url
