Primero del todo ponemos este código ANTES de </head> o bien debajo de de ]]></b:skin> vamos probando ya que un poco más arribo o un poco más abajo la porción de código debe ir ahí o arriba de head o abajo de b:skin
<script type='text/javascript'>
// remove the registerOverlay call to disable the controlbar
hs.registerOverlay(
{
thumbnailId: null,
overlayId: 'controlbar',
position: 'top right',
hideOnMouseOut: true
}
);
hs.graphicsDir = 'http://getlostpodcast.info/highslide/graphics/'
hs.align = "center";
</script>
<!-- 1 ) Reference to the file containing the javascript. This file must be located on your server. -->
<script src='http://getlostpodcast.info/highslide/highslide.js' type='text/javascript'></script>
<!-- 2) Optionally override the settings defined at the top of the highslide.js file. The parameter hs.graphicsDir is important! -->
<script type='text/javascript'>
// remove the registerOverlay call to disable the controlbar
hs.registerOverlay(
{
thumbnailId: null,
overlayId: 'controlbar',
position: 'top right',
hideOnMouseOut: true
}
);
hs.graphicsDir = 'http://getlostpodcast.info/highslide/graphics/'
hs.align = "center";
</script>
<script type="text/javascript">
if (window.jstiming) window.jstiming.load.tick('headEnd');
</script>
<style type='text/css'>
* {
font-family: Verdana, Helvetica;
font-size: 10pt;
}
.highslide {
cursor: url(http://getlostpodcast.info/highslide/graphics/zoomin.cur), pointer;
outline: none;
}
.highslide-active-anchor img {
visibility: hidden;
}
.highslide img {
border: 2px solid gray;
}
.highslide:hover img {
border: 2px solid green;
}
.highslide-wrapper {
background: white;
}
.highslide-image {
border: 2px solid white;
}
.highslide-image-blur {
}
.highslide-caption {
display: none;
border: 2px solid white;
border-top: none;
font-family: Verdana, Helvetica;
font-size: 10pt;
padding: 5px;
background-color: white;
}
.highslide-loading {
display: block;
color: black;
font-size: 8pt;
font-family: sans-serif;
font-weight: bold;
text-decoration: none;
padding: 2px;
border: 1px solid black;
background-color: white;
padding-left: 22px;
background-image: url(http://getlostpodcast.info/highslide/graphics/loader.white.gif);
background-repeat: no-repeat;
background-position: 3px 1px;
}
a.highslide-credits,
a.highslide-credits i {
padding: 2px;
color: silver;
text-decoration: none;
font-size: 10px;
}
a.highslide-credits:hover,
a.highslide-credits:hover i {
color: white;
background-color: gray;
}
.highslide-move {
cursor: move;
}
.highslide-overlay {
display: none;
}
a.highslide-full-expand {
background: url(http://getlostpodcast.info/highslide/graphics/fullexpand.gif) no-repeat;
display: block;
margin: 0 10px 10px 0;
width: 34px;
height: 34px;
}
/* Controlbar example */
.controlbar {
background: url(http://getlostpodcast.info/highslide/graphics/controlbar_flat_alpha.png);
width: 224px;
height: 50px;
}
.controlbar a {
display: block;
float: left;
/*margin: 0px 0 0 4px;*/
height: 50px;
}
.controlbar a:hover {
background-image: url(http://getlostpodcast.info/highslide/graphics/controlbar_invert2_alpha.png);
}
.controlbar .previous {
width: 53px;
}
.controlbar .next {
width: 59px;
background-position: -53px 0;
}
.controlbar .highslide-move {
width: 60px;
background-position: -112px 0;
}
.controlbar .close {
width: 51px;
background-position: -172px 0;
}
/* Necessary for functionality */
.highslide-display-block {
display: block;
}
.highslide-display-none {
display: none;
}
</style>
Una vez colocado o si has visto que funciona el visor de imágenes Highslide una vez hayas hecho el post introduciendo el html necesario que a continuación explicaré estaría bien subir por lo menos archivos tipo imagen (gif. png. etc) a un sitio donde alojar imágenes. Para no hacer Hotlinking o robo de transferencia. y por supuesto el archivo con extension .js (http://getlostpodcast.info/highslide/highslide.js)
Esto sería una imagen simple:
Y este sería el código para aplicar el anterior ejemplo:
<div style="text-align: center;"><a style="" class="highslide " id="thumb1" onclick="return hs.expand(this)" href="Foto-Ampliada"><img title="Familia Simpsons" alt="Highslide JS" src="Miniatura"></a></div>
Ahora una galería es algo más complejo, pero se puede hacer.
Esta larga porción de código para poder usar la llamada "controlbar" o botones de navegación que nos ayudarán a movernos de una foto a otra.
<div style="text-align: center;" class="shashin_thumb"><a style="" href="Foto-Ampliada" class="highslide " id="shashin_thumb_link_1" onclick="return hs.expand(this, { autoplay: false, slideshowGroup: 'group18' })"><img style="width: 350px; height: 264px;" src="Foto-Miniatura" alt="" id="shashin_thumb_image_1" title=""></a></div><div id="controlbar" class="highslide-overlay controlbar"> <a href="http://www.blogger.com/post-edit.g?blogID=4692657733368354410&postID=6602220271571914952#" class="previous" onclick="return hs.previous(this)" title="Previous (left arrow key)"></a> <a href="http://www.blogger.com/post-edit.g?blogID=4692657733368354410&postID=6602220271571914952#" class="next" onclick="return hs.next(this)" title="Next (right arrow key)"></a> <a href="http://www.blogger.com/post-edit.g?blogID=4692657733368354410&postID=6602220271571914952#" class="highslide-move" onclick="return false" title="Click and drag to move"></a> <a href="http://www.blogger.com/post-edit.g?blogID=4692657733368354410&postID=6602220271571914952#" class="close" onclick="return hs.close(this)" title="Close"></a> </div>
Aquí hay que tener especial cuídado ya que en cada galería o tabla (por cada post)que creemos no podemos repetir el número de grupo (ej: slideshowGroup: 'group22')
también por cada foto veremos que en las clases shashin tenemos que mantener por cada foto el mismo número en dos parte (esto antes de llegar al close) sería por ej:
shashin_thumb_link_1, y shashin_thumb_image_1 . Para la siguiente miniatura deberíamos poner cualquier otro número pero repetido en cada clase del ID "SHASHIN". Y así sucesivamente, ya que si no las imagenes se mezclarian unas con las de otros posts y nos liariamos (que es lo que me pasó a mí al principio).
Más información sobre cómo aplicar Highslide en el tutorial de la misma página, eso si si quieres poner una galería cómo no uses (ya se que es un poco largo) el código que aquí os he mostrado no creo que lo consigas ya que en Blogger es otra historia, estuve varios días dandole vueltas y si no se hace así a lo engorroso no hay manera.
Espero haber sido lo más claro posible, si tenéis alguna duda, me lo decís en los comentarios y veré en que os puedo ayudar, en mi blog de pruebas tenéis más ejemplos, y aquí el tutorial de la página oficial.
0 comments:
Post a Comment