/* Menu ----------------------------------------------- */




























суббота, 6 июня 2026 г.

lb-album (Морозник)

Expando Image script





Вставляем в шаблон блога:

/* Expando Image Script 2008 John Davenport Scheuer
as first seen in http://www.dynamicdrive.com/forums/
username: jscheuer1 - This Notice Must Remain for Legal Use
*/

if(document.images){(function(){var cos,a=/Apple/.test(navigator.vendor),times=a?20:40,speed=a?40:20;var expConIm=function(im){im=im||window.event;if(!expConIm.r.test(im.className))im=im.target||im.srcElement||null;if(!im||!expConIm.r.test(im.className))return;var e=expConIm,widthHeight=function(dim){return dim[0]*cos+dim[1]+'px';},resize=function(){cos=(1-Math.cos((e.ims[i].jump/times)*Math.PI))/2;im.style.width=widthHeight(e.ims[i].w);im.style.height=widthHeight(e.ims[i].h);if(e.ims[i].d&&times>e.ims[i].jump){++e.ims[i].jump;e.ims[i].timer=setTimeout(resize,speed);}else if(!e.ims[i].d&&e.ims[i].jump>0){--e.ims[i].jump;e.ims[i].timer=setTimeout(resize,speed);}},d=document.images,i=d.length-1;for(i;i>-1;--i)if(d[i]==im)break;i=i+im.src;if(!e.ims[i]){im.title='';e.ims[i]={im:new Image(),jump:0};e.ims[i].im.onload=function(){e.ims[i].w=[e.ims[i].im.width-im.width,im.width];e.ims[i].h=[e.ims[i].im.height-im.height,im.height];e(im);};e.ims[i].im.src=im.src;return;}if(e.ims[i].timer)clearTimeout(e.ims[i].timer);e.ims[i].d=!e.ims[i].d;resize();};expConIm.ims={};expConIm.r=new RegExp('\\bexpando\\b');if(document.addEventListener){document.addEventListener('mouseover',expConIm,false);document.addEventListener('mouseout',expConIm,false);}else if(document.attachEvent){document.attachEvent('onmouseover',expConIm);document.attachEvent('onmouseout',expConIm);}})();}
//]]>
</script>

<style type='text/css'>

img.expando{ /*sample CSS for expando images. Not required but recommended*/
border: none;
vertical-align: top; /*top aligns image, so mouse has less of a change of moving out of image while image is expanding*/
}

</style>

Вставляем в поле сообщения:
<img class="expando" 
src="https://blogger.googleusercontent.com/img/b/
R29vZ2xl/AVvXsEgd9pH5t3LQIdUgOJtQI0SW2sWu1mxUePPD946YGrlhF9oN28J97k4pOXwpB54HDF_
mtfH5knQs3b9jpmwi_GPPEuFwmXNG2N6Ex9Yeh7yI4-wu6P_n1yJWu0HhJbHt7Xw18UzrLfo0-KgH
/s1600/kv1b3.png"
 title="" 
original="https://blogger.googleusercontent.com/img/b/R29vZ2xl/
AVvXsEgd9pH5t3LQIdUgOJtQI0SW2sWu1mxUePPD946YGrlhF9oN28J97k4pOXwpB54HDF
_mtfH5knQs3b9jpmwi_GPPEuFwmXNG2N6Ex9Yeh7yI4-wu6P_n1yJWu0HhJbHt7Xw18UzrLfo0
-KgH/s1600/kv1b3.png"
 style="width: 680px; height: 349px;" width="600" border="0">  
 


пятница, 5 июня 2026 г.

hovergallery




 Вставляем в шаблон блога:

<style type='text/css'>
/*Credits: Dynamic Drive CSS Library */
/*URL: http://www.dynamicdrive.com/style/ */
.hovergallery img{
-webkit-transform:scale(0.8); /*Webkit: Scale down image to 0.5x original size*/
-moz-transform:scale(0.8); /*Mozilla scale version*/
-o-transform:scale(0.8); /*Opera scale version*/
-webkit-transition-duration: 0.5s; /*Webkit: Animation duration*/
-moz-transition-duration: 0.5s; /*Mozilla duration version*/
-o-transition-duration: 0.5s; /*Opera duration version*/
opacity: 1; /*initial opacity of images*/
margin: 0 10px 5px 0; /*margin between images*/
}
.hovergallery img:hover{
-webkit-transform:scale(1.1); /*Webkit: Scale up image to 2x original size*/
-moz-transform:scale(1.1); /*Mozilla scale version*/
-o-transform:scale(1.1); /*Opera scale version*/
box-shadow:0px 0px 30px gray; /*CSS3 shadow: 30px blurred shadow all around image*/
-webkit-box-shadow:0px 0px 30px gray; /*Safari shadow version*/
-moz-box-shadow:0px 0px 30px gray; /*Mozilla shadow version*/
opacity: 1;
}
</style>

 

Вставляем в поле сообщения:

 <div class="border3">  <div dir="ltr" style="text-align: left;" trbidi="on"><center><div class="hovergallery" style="clear: right; float: right; margin-bottom: 1em; margin-left: 1em;"><img height="213" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj1nIxe3PGlVrSop390EJsBSuMLdJfH7MwxjaQ_1wgW_wJ70qYK-ZTCCSwkdq6OcvGVb0BnI94vA3QMRYyJ7_D2RsbFqAurPCDxJIiRoP3kAsqxQN1m67rEXwv44PdLy-kxmwfDOPfmg0484EPUr-Zas2vk2o10PQeiUDQ9rAh3sG6v2S2nYApNKwYdgGQ/w320-h213/_DSC2380_19.jpg" width="320" /></div><div class="hovergallery" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img height="213" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgapHjVOueDqJ3f2umNWhJomDS8AcXpoxVrItoMjqYFgWppd7_sRw5hO1C7uIc0bfm4pGFElGwUqadBbRet42cWnbID50cZG6Re2t6_FK5iIy6lFq_6AI19wgDBpjBPTK5K5Zhf_JvDJMCfVMafgZodvGoyHNkFU6LlUHe4Sx-OgrmbrNbEvQxgJ0A0F9U/w320-h213/_DSC2304_19.jpg" width="320" /></div><div class="hovergallery" style="clear: right; float: right; margin-bottom: 1em; margin-left: 1em;"><img height="213" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhg2v2sF93Dm38t0g9ylXcI3_kBS8r1U-lIUdBwB5g6Lt3tlkhu4TSg_pYgsLwcePzSFW2fuascCC5BSb5U9RbM9CwOiSIlgOCi13Mtns1asD7F0mX0VUfREVJb63wvxKTcqpDbA8AE1l2NEJ6GTxoBO-hFTPgYqUFThUNl6-hnQoRhgsQUa2uwiiTQkIc/w320-h213/_DSC2057_19.jpg" width="320" /></div><div class="hovergallery" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img height="214" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiHpsjCKJOs4cdAGK2HOfZ3CVImZdkpKMrKSI3MrnTXh73Xu04-j2ywDrwYnpF4dqmKHjZDvIP_3NtOuxTMyLN26cD9u9XCnnRwr_APkxwVN51B_yesGuVQi24VJpAvQQiLGhhaifrEVYCTzauPIs2ReCsvKA9rB1sO9WqrgvdkWVyyDh06zgjKQytsl8o/w320-h214/_DSC2051_19.jpg" width="320" /></div><div class="hovergallery"></div></center><br />
<center><div class="hovergallery"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiF7cDs8F4r8iha7N0f-LAE9NRLl6Hz1H7oODZl2690WvtbiD4TkQSLmFyoZfPUaM_f_Bi_zDxMmkL-04F4Ddg-LN6DoMLTeUWlNZbx0vO0y7IK9GNv8jsQlg-NS4cESlod91Ohck91Q7wPkdQGhrcJOZYz_yUBxov1ecybFd8ddBzSpHTwiW4X2F7PKM4/s600/_DSC2184_19.jpg" /></div></center><br />
<br />
</div></div>

среда, 3 июня 2026 г.

ejemploGaleria_ Galería de imagenes muy sencilla

Esta es la primera imagen




Вставляем в шаблон блога:

<script type='text/javascript'>
function showPic (whichpic) {
 if (document.getElementById) {
  document.getElementById(&#39;imgContenedor&#39;).src = whichpic.href;
  if (whichpic.title) {
   document.getElementById(&#39;imgDescripcion&#39;).childNodes[0].nodeValue = whichpic.title;
  } else {
   document.getElementById(&#39;imgDescripcion&#39;).childNodes[0].nodeValue = whichpic.childNodes[0].nodeValue;
  }
  return false;
 } else {
  return true;
 }
}
</script>
    <style>
div#ejemploGaleria {
  background-color: #123;
  border: 3px solid #234;
  margin: 0 auto;
  padding: 10px;
  width: 650px;
}
span#imgDescripcion {
  color: #ABC;
  float: left;
  font-size: 18px;
  width: 250px;
}
ul#imgListaEjemplo{
  float: right;
  margin: 0;
}
ul#imgListaEjemplo li {
  display: inline;
  padding: 0 5px;
}
ul#imgListaEjemplo li a {
  font-size: 16px;
}
img#imgContenedor{
  margin-top: 10px;
}
</style> 

Вставляем в поле сообщения:
 <ul>
<li><a onclick="return showPic(this)" href="URL_imagen1" title="texto_imagen_1">1</a></li>
<li><a onclick="return showPic(this)" href="URL_imagen2" title="texto_imagen_2">2</a></li>
<li><a onclick="return showPic(this)" href="URL_imagen3" title="texto_imagen_3">3</a></li>
</ul>

<div id="imgDescripcion">el texto inicial</p>

<img id="imgContenedor" src="URL_imagenInicial" />
 ***
 <div id="ejemploGaleria"><span id="imgDescripcion">Esta es la primera imagen</span> 
<ul id="imgListaEjemplo"><li>
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhKAj_jtegMPKk-
0QqLIeoSilO_WUUJFoMcIQ50BwAjXke9QphLBbdQ2u0XAcgWW8oCRN4wCudJG1rIKZQLTQXRw_
3sE6Q7xfTYcZIOKMnde094NMzOCmmKnd7KFkCiKz-fH4Q8_pWoKks5-
QNp9tt5uzea-OKd8UWlMUL23Z1yQ_gQ3RpSH8E5V8Ei1ok/w640-h427/_DSC7251_22.jpg"
onclick="return showPic(this)" title="Esta es la primera imagen">1</a></li>
<li><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi3TcIxL
JwCmTgpd0UzwQChLZZ6vaL4qqXEaYnYoML8hnmNz9Qbl4sBGkTBJW3br
3AMoYeDmefIIHAhiiNvIXF4WpylcMfFgl7r82gEmQeVA25zpF2OUodKGj7I-ZChIg4e1fqUXwHamys
7qi6AjRShU8gHbrgo0NStjjTnpZ7rP4pfRhGhQtg-oWT64Lg/w640-h452/_DSC4760_20.jpg"
onclick="return showPic(this)" title="Esta es la segunda imagen">2</a></li><li>
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh5b8FvjVm0yaq_
SzBnEVFWXYdxNOxIkGVzr2xaKNUSFd3zVcPkp4BcmJMBRV8UY6YTD6ZONr
XLKeMNhwaa94hiBjje6YmqtcjOYrbSrCYqWNKPv-
MbtSayYrIPBvyqDam8HLbL3mQ2gMnl5Cz94aQ_BpRcGmIGSMnraWh
lB9jERZ5nZ9b3HyYTJ-RmM_c/w640-h428/_DSC4814_20.jpg"
onclick="return showPic(this)" title="Esta es la tercera imagen">3</a></li><li>
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhr
1GM2NUJWEVGHSpuNWv965dTyNifZ4eUAtnDAHxxTcuAxuo8P92olfczNQPM-D9XHBGmr
1jRcVySaS_5CvpCx4rlrkKemRNh36hdHTGzWZCmq_2SKW5PBrFgtwZ4UeCYJAwmCqwIy7fOZHZwRRxqs2ImC
OhrbapGI1xU1c8Lwyjr-l1D5gGa1rZ1gj9g/w640-h428/_DSC8039_20.jpg"
onclick="return showPic(this)" title="Esta es la última imagen">4</a></li></ul><br />
<img id="imgContenedor" src="https://blogger.googleusercontent.com/img/b/R29vZ2x
l/AVvXsEhGisBkpI3lnlTTxLLHdvdwVAWvcPb0CO9ISssj6_uo2XBZQhWTDveESLrNaf31bds1Nc_
p2gsuyxkUhqp8mMRy2DME8uNL1E8YCteH8W_nYsWznYp2c2Exf-hgBj_S0POk3raAXpdjjCqSJI
CeEymXf5JdUU2cA8dKQHtZ5supak64WFumoQH9r2LG6aw/w640-h480/_DSC3922_20.jpg" /></div><br />
 

 

thumbnail CSS Popup Image Viewer


Будапешт_2015


Вставляем в шаблон блога:

 <style type="text/css">

.thumbnail{
position: relative;
z-index: 0;
}

.thumbnail:hover{
background-color: transparent;
z-index: 50;
}

.thumbnail span{ /*CSS for enlarged image*/
position: absolute;
background-color: lightyellow;
padding: 5px;
left: -1000px;
border: 1px dashed gray;
visibility: hidden;
color: black;
text-decoration: none;
}

.thumbnail span img{ /*CSS for enlarged image*/
border-width: 0;
padding: 2px;
}

.thumbnail:hover span{ /*CSS for enlarged image on hover*/
visibility: visible;
top: 0;
left: 60px; /*position where enlarged image should offset horizontally */

}

</style>

 

Вставляем в поле сообщения:
 <a class="thumbnail" href="#thumb"><img 
src="http://i059.radikal.ru/1108/72/d56360593a9c.jpg" width="100px" 
height="66px" border="0" /><span><img 
src="http://i059.radikal.ru/1108/72/d56360593a9c.jpg" /><br 
/>Calopteryx virgo - Banded Demoiselle, male</span></a>

blockquote.purocss

Вот уеду, исчезну,
на года, навсегда,
кану в снежную бездну,
пропаду без следа.

Час прощанья рисую,
гладкий след от саней...
Я ничем не рискую,
кроме жизни своей.
Вероника Тушнова
.

  Вставляем в шаблон блога:

<style>
  blockquote.purocss {
    color: #888;
    font-family: Georgia,serif;
    font-size: 18px;
    font-style: italic;
    line-height: 1.3;
    margin: 20px auto;
    padding: 0.25em 40px;
    position: relative;
    width: 500px;
  }
  blockquote.purocss:before {
    color: #CCC;
   content: "\201C";
   display: block;
   font-size: 80px;
   left: -5px;
   position: absolute;
   top: -15px;
  }
  blockquote.purocss cite {
    color: #CCC;
    display: block;
    font-size: 18px;
    margin-top: 15px;
    text-align: right;
  }
  blockquote.purocss cite:before {
   content: "\2014 \2009";
  }
</style>
 Вставляем в поле сообщения:
 <blockquote class="purocss">
  ....... el texto .......
  <cite>el nombre del autor</cite>
</blockquote>

вторник, 2 июня 2026 г.

vmcc3

 
 

Вставляем в шаблон блога:

 <style>
  /* el contenedor */
  .vmcc3 {
    display: inline-block;
    position: relative;
  }
  .vmcc3 > a, .vmcc3 > a img {display: block;}
  .vmcc3 > a {position: relative;}
  /* el div oculto donde se mostrará la imagen completa y ocupará toda la pantalla */
  .vmoverlay{
    background-color: rgba(0, 0, 0, 0.9);
    height: 0;
    left: 0;
    overflow: hidden;
    position: fixed;
    text-align: center;
    top: 0;
    width: 0;
    z-index: 99;
  }
  /* el enlace para cerrar la ventana modal es un texto pero puede ser una imagen */
  .vmoverlay a.vmcerrar {
    color: #FFF;
    font-size: 20px;
    left: 50%;
    line-height: 26px;
    margin-left: -25px;
    opacity: 0;
    overflow: hidden;
    position: absolute;
    text-align: center;
    top: 70px;
    z-index: 1001;
    -moz-transition: opacity 0.3s linear 1.2s;
    -webkit-transition: opacity 0.3s linear 1.2s;
    -o-transition: opacity 0.3s linear 1.2s;
    -ms-transition: opacity 0.3s linear 1.2s;
    transition: opacity 0.3s linear 1.2s;
  }
  /* la imagen de tamaño completo */
  .vmoverlay img {
    max-height: 100%;
    position: relative;
  }
  /* la pseudo-clase es la que abrirá la ventana modal */
  .vmoverlay:target {
    bottom: 0;
    height: auto;
    padding-top: 100px;
    right: 0;
    width: auto;
  }
  /* las animaciones */
  .vmoverlay:target img {
    -moz-animation: fadeInScale 1.2s ease-in-out;
    -webkit-animation: fadeInScale 1.2s ease-in-out;
    -o-animation: fadeInScale 1.2s ease-in-out;
    -ms-animation: fadeInScale 1.2s ease-in-out;
    animation: fadeInScale 1.2s ease-in-out;
  }
  .vmoverlay:target a.vmcerrar { opacity: 1;}
  @-webkit-keyframes fadeInScale {
    0% { -webkit-transform: scale(0.6); opacity: 0; }
    100% { -webkit-transform: scale(1); opacity: 1; }
  }
  @-moz-keyframes fadeInScale {
    0% { -moz-transform: scale(0.6); opacity: 0; }
    100% { -moz-transform: scale(1); opacity: 1; }
  }
  @-o-keyframes fadeInScale {
    0% { -o-transform: scale(0.6); opacity: 0; }
    100% { -o-transform: scale(1); opacity: 1; }
  }
@-ms-keyframes fadeInScale {
    0% { -ms-transform: scale(0.6); opacity: 0; }
    100% { -ms-transform: scale(1); opacity: 1; }
  }
  @keyframes fadeInScale {
    0% { transform: scale(0.6); opacity: 0; }
    100% { transform: scale(1); opacity: 1; }
  }
</style>

Вставляем в поле сообщения:

 

<div class="vmcc3" id="ejemplo-1">
  <!-- la miniatura visible -->
  <a href="#image-1">
    <img src="URL_miniatura" />
  </a>
  <!-- la imagen completa oculta -->
  <div class="vmoverlay" id="image-1">
    <img src="URL_imagen" />
    <a href="#ejemplo-1" class="vmcerrar">cerrar</a>
  </div>
</div>