/* 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>

Переход "2 в 1" demoIMGS0
















 
 
 
 
 
 
Вставляем в шаблон блога:
 
<style>
  .demoIMG { /* el rectángulo contenedor */
    position:relative; /* indicamos esto para poder posicionar su contenido de maera absoluta */
    height:330px; /* le damos una cierta altura */
    margin:0 auto; /* lo centramos */
    width:500px; /* le damos un cierto ancho */
  }
  .demoIMG img { /* el contenido */
    left: 0; /* posición izquierda */
    position:absolute; /* indicamos que su posición es absoluta con respecto al contenedor */
    top: 0; /* posición superior */
  }
  /* y ponemos propiedades en las clases de cada imagen */
  /* la primera no será visible por defecto */
  .demoIMG img.novisible {opacity:0;filter:alpha(opacity=0);}
  /* y se verá cuando pongamos el cursor encima del DIV */
  .demoIMG:hover img.novisible {opacity:1;filter:alpha(opacity=100);}
  /* la segunda se ocultara siempre que pongamos el cursor encima del DIV o de la imagen */
  .demoIMG:hover img.visible {opacity:0;filter:alpha(opacity=0);}
  .demoIMG img.visible:hover {opacity:0;filter:alpha(opacity=0);}  
<style>.demoIMGStrans {position:relative;height:330px;width:500px;margin:0 auto;} .demoIMGStrans img {height:330px;width:500px;cursor:pointer;position:absolute;left:0;-webkit-transition: all 1s ease-in-out;-moz-transition: all 1s ease-in-out;-o-transition: all 1s ease-in-out;transition: all 1s ease-in-out;} .demoIMGStrans img.novisible {opacity:0;filter:alpha(opacity=0);} .demoIMGStrans:hover img.novisible {opacity:1;filter:alpha(opacity=100);} .demoIMGStrans:hover img.visible {opacity:0;filter:alpha(opacity=0);} .demoIMGStrans img.visible:hover {opacity:0;filter:alpha(opacity=0);} #demoIMGS0 img {-webkit-transition: none;-moz-transition: none;-o-transition: none;transition: none;} #demoIMGS2 img.novisible {-webkit-transform:scale(0);-moz-transform:scale(0);-o-transform:scale(0);} #demoIMGS2:hover img.novisible {-moz-transform:scale(1);-o-transform:scale(1);-webkit-transform:scale(1);} #demoIMGS2:hover img.visible {-moz-transform:scale(0);-o-transform:scale(0);-webkit-transform:scale(0);} #demoIMGS3 img.novisible {-moz-transform:scale(1,0);-o-transform:scale(1,0);-webkit-transform:scale(1,0); } #demoIMGS3:hover img.novisible {-webkit-transform:scale(1);-moz-transform:scale(1);-o-transform:scale(1);} #demoIMGS3:hover img.visible {-webkit-transform:rotate(360deg) scale(0);-moz-transform:rotate(360deg) scale(0);-o-transform:rotate(360deg) scale(0);}</style>
</style>

Вставляем в поле сообщения:
<div id="demoIMGS0" class="demoIMGStrans"><img class="novisible" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEggpMgX-_R-YWV0Kar2iT1NksZMCl7yDdNo0KBhza9DKMASUDlV3sK0MYeZ_O_ZgxQOak9eRMGmFccFfZivnZOpfY4Bzj5CjvTvy5egiXdDDYNYXeMy_alDUl1_HMi79in1ruC95mqiWvTMc6io6ngZzD4CDzPWXmhf9OLSpI5C5OrNi5m-j2GzaxyR/s900/_DSC7468_22.jpg" /><img class="visible" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjkuT4MU4nRQf5K8s2bTaenVrmu0nrFKAxbCelSS6YP3lzuYNIl8ws6Zkpx9GbxlyyJqNPkdZTOH5m6xA8hY7oY6Yt5l5qJGThcedTOE6yHCF08Sw49bZXTkE3yx6H_DWh55n3TiW9X1cdq2Vmz21DPcUQQm1rMGE4lhCe9zODTkmG9S9hD_ltAa1kO/s900/_DSC7551_22.jpg" /><br />
<br />
<br />

</div>




Вращающий переход "2 в 1" demoIMGS3








 
 
 
 
 
 
 
 
 
 
 
 
 
 
 <div id="demoIMGS3" class="demoIMGStrans"><img class="novisible" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEik563s7tpaLUwfAhvTz6_70vi_ldPITeXDPHKFrGIerxildsnhB0jvm5TPUHaoJk3sHdv1NtLtgT9VSbzbp58rS_2AkzJKx8mQD4XO6c6IRUFMGVl_XjAH7BVR6tTZ1GsbfZlF1wba-FgP4ySpqw3BAwiyH77EZppZX-I-_X9_W7NGBusTKGPpI0fC/s900/_DSC7372_22.jpg" /><img class="visible" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjwKXW-c7Q1GmMdlHaeBXo6ICDrq7ukkHmgId1V6pxJriDZs-bWr_dkivXJFxqCjwTbCGiZvHIk2riIUMo_Whf1joZTE5rFX5n9sXL6cNjII4Chko0T1vWoh6lNO6fC6YRfwd3DXi7AfG3vtMqQrBrN1Z5Rps_Gcq2NytnT8842XDAoSf4ewENmI4Y8/s900/_DSC7337_22.jpg" /><br />
<br />
<br />

</div>

Выезжающий переход "2 в 1" demoIMGS2









 
 
 
 
 
 
 
 
 
 
 
 
 
<div dir="ltr" style="text-align: left;" trbidi="on">
<div class="demoIMGStrans" id="demoIMGS2">
<img class="novisible" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh_VjdgadA-lhgwktlqjMYFL75PCPchoYl1oI0iCNuTMbISRXDpkKr5oq3ovUtxCQo3AMQ1K4VSE-iThUsnxaBEadsl_FT6WbmtIy-vObHXvOz251JLoLjXupKcs4LOr4XgpSMLy1F3FG4mowTVQ3ACvz_UW04uaLw_qG5hWEssmXaoeNHgKbP-htQv/s900/_DSC7316_22.jpg" /><img class="visible" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh4VVOYxSIrpOSPRa99ZwHC0HnRjzV14RfeCjr4MnwPgxVxQBnaHo-xoTRl5BOb9-c_fnxkU81lvyqdQlwgqa0ryer6UYxR5zv9YJVSKsgd2MjO7StnIxs_EAPLeH9M_N8cVWdoLOzahuR-4Ikhjvv_C7QuHVAIS9bsx049iW-r3Ta2RfFMjWO_N_95/s900/_DSC7323_22.jpg" /><br />
<br />
<br />
<br />

<br /></div>
</div>

Плавные переходы 2 в 1 demoIMGS1














 
 
 
 
 
 
 
 
 
 
<div dir="ltr" style="text-align: left;" trbidi="on"><br />
<br />
<div class="demoIMGStrans" id="demoIMGS1"><img class="novisible" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh0c6OrQ2eZSbvZWP1Btc-KXPmcGmf0_FH41lKObySTrLFUu3KfgQThlpKrYQMHIB3aoaWYxYo_pSinD3_6Zkk0LabRHbOeGyA-GfJ-DmH514-AkZvKLQQxOHMfFqgUJeLUewNl3v31dMEiITBmmBZkcqlKyl2eJ-mAQ3osM4ANRVjstLBGPfXlVeqT/s320/_DSC7084_22.jpg" /><img class="visible" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgPQkHe3gkyFlpjkQc8leRtqu-ZlIc5H-UTsqwurvLc3mkZjb2c19kF3IIKwpwEredDaIh-5iqL05qTmknzEvd0I_9oyTonyGhfnWAPuyI-h0y36bXj9-0zxGq6yj9hjFXhwM9hD4iA2p0UYjhoxXL4PnAevHMaK8L9TJY8sr99Y46A8eLL2c2JZ_VP/s320/_DSC7156_22.jpg" /><br />
<br />
<br />
</div><br />
<br />
<br />
<br />
<br />
</div>

понедельник, 1 июня 2026 г.

Effect.toggle (для "Та, которая....)


 
МОСТЫ

<div dir="ltr" style="text-align: left;" trbidi="on">
<a href="http://www.blogger.com/blogger.g?blogID=132067137410115303#" onclick="Effect.toggle('Stay', 'slide'); return false;">TO A BUTTERFLY</a><br />
<div id="Stay" style="background: none repeat scroll 0% 0% rgb(fff, fff, fff); display: none;">
<div>

выделенное красным цветом меняем название, согласно названию записи



  Robert Frost ▼▲

 


Вставить в шаблон:

 <script src='//ajax.googleapis.com/ajax/libs/prototype/1.7.1.0/prototype.js'/>
<script src='//ajax.googleapis.com/ajax/libs/scriptaculous/1.9.0/scriptaculous.js'/>

    
    <script src='http://www.google.com/jsapi'/>
<script>
google.load(&quot;prototype&quot;, &quot;1.6.1.0&quot;);
google.load(&quot;scriptaculous&quot;, &quot;1.8.3&quot;);
</script>
    
    <style> 
    Effect.toggle(element, [&#39;appear&#39; | &#39;slide&#39; | &#39;blind&#39;], [options] );

Effect.toggle(&#39;id_of_element&#39;, &#39;appear&#39;);&#160;
Effect.toggle(&#39;id_of_element&#39;, &#39;slide&#39;, { delay: 0.5 });&#160;
Effect.toggle(&#39;id_of_element&#39;, &#39;blind&#39;, { duration: 2.0 });&#160;
    </style>
    
    
  </head>

Effect.toggle

<span style="font-size: small;"><a onclick="Effect.toggle('toggle', 'slide'); return false;" href="#"><i><b>Le parole</b></i> ▼▲</a></span>
<div id="toggle" style="background: #ffffff; display: none;">
<div>



Le parole ▼▲

spacegallery 1

 


Добавить в шаблон. Добавить, где он указывает адрес файлы загружены ранее, но очень важно к списку в порядке, показанном, иначе она не может работать.

<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js' type='text/javascript'/>
<script src='https://foglia2008.narod.ru/eye.js' type='text/javascript'/>
<script src='https://foglia2008.narod.ru/slaid_shou/utils.js' type='text/javascript'/>
<script src='https://foglia2008.narod.ru/slaid_shou/spacegallery.js' type='text/javascript'/>
<script type='text/javascript'>
//<![CDATA[
(function($){
var initLayout = function() {
var hash = window.location.hash.replace('#', '');
var currentTab = $('ul.navigationTabs a')
.bind('click', showTab)
.filter('a[rel=' + hash + ']');
if (currentTab.size() == 0) {
currentTab = $('ul.navigationTabs a:first');
}
showTab.apply(currentTab.get(0));
$('#myGallery').spacegallery({loadingClass: 'loading'});
};

var showTab = function(e) {
var tabIndex = $('ul.navigationTabs a')
.removeClass('active')
.index(this);
$(this)
.addClass('active')
.blur();
$('div.tab')
.hide()
.eq(tabIndex)
.show();
};

EYE.register(initLayout, 'init');
})(jQuery)
//]]>
</script>


<style type='text/css'>
#outer-wrapper{width:700px;margin:0px auto 0px;padding:0;text-align:$startSide;font:$bodyfont;}
#myGallery {
width: 700px;
height: 550px; /* Alto de todo el contenedor */
}
#myGallery img {
border: 2px solid #52697E; /* Borde de las imágenes */
}
a.loading {
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhbhffbURd9l8FxCQAKUU9yK4cE40fY1allBbSXYfnXcxDOunvP3XGgf5tNMhK44GLX7Tw5eKllW2w1I9xUumzJrnkSsxZRSgm_p4Un0IBjE00TldQpGniYY0TpD8xH4EC3E4ovFLBs9_0/) no-repeat center;
}
.spacegallery {
position: relative;
overflow: hidden;
}
.spacegallery img {
position: absolute;
left: 50%;
}
.spacegallery a {
position: absolute;
z-index: 1000;
display: block;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
</style>
    
<script type='text/javascript'>
jQuery(function(){
    jQuery(&#39;#myGallery&#39;).spacegallery();
});
</script>

spacegallery

 


<div class="spacegallery" id="myGallery">
<br />
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhb0K3LhuhlZgK-bHs3cx8m3L-vDMq9ma_1tN-tGdX4LN6FclwqFVOt41ku7CBjM7HX6V3IlTZLaJbGHY2oaGFEf2IwKk_DJq3t1fuuvBQnhHe1iAO0iwGYfFWjTTFRrwUiF3RxJ631a1E/s1600/DSC_4027_12_600.jpg" /><br />
<br />
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjf4XngN_KnmFMS2xk-Eh_qktVAdzHHXsU3vg66Ettzp7pD2O1lE5o6mr9jeQMNQtGOOTP7gU1auiCFiGGB1i5XU6MIHDs3y9mZyv-EiNt0xyDEiOxKQXp7O8dw3jjkNazpgBhjEcuTTY8/s1600/DSC_4411_600.jpg" /><br />
<br />
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj1xUq6GVAenbH20jVnICewGp-Nxhi5ST3pO-sV74GJ0F9uY4US9cP7HgMSnKBTDTLTdKnhShE5E5pcINxxe0mKZWCq9qolymsp72c7tvSUPElUPKdHrCPOtvehPZ6SvBi4GJ-x8nLDAao/s1600/DSC_5994_600.jpg" /><br />
<br />
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEieHRJjD7La27o2vvPop3oyP0HSmFQ8v7zxFBMr7zq328QN6qqkmmQC5YAcatlp94-2NtVSBqqfAAVxDXC96TGaVRBxYtsY4kOdWAz3zigB0NQu5F0-JUckr7Qrwi1Rp2TpuXlyUAPLpes/s1600/DSC_5015_500.jpg" /><br />
<br />
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiVVrBHd35m6lJLymU9Tq8PMluU7Bk5ZKbgvrayureYigHgJ8SPsTZ9hAb9pyM1gR0ELUASrHA7fwV0bR8wmBD69TmKWajdXLkwTTMiuoagqQklgQiWsXMp_W0ul6pVqXF219EyvaG21ck/s1600/DSC_3312_600.jpg" /><br />
<br />
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjXJlkJngHR5aYbvgXMTvxYK-LOn-Xs0f5pJAG4oa7CVpQcWgoMR0otKLKtHJfoab2J1bTfgnw_xOx1aBXqeGcMCDY1hZHW8fk6M_y4FT4P_j-wCHeqBoccJz153LVToxmEJpLWnklRUC8/s1600/_DSC4656_600.jpg" /><br />
<br />
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi6_5VD8jHZJbSdTCBr1D2Hn65RU7raQpmAmwKP6MPDrAG1miTK9WHMVBrmOSpGwv9oXBL7HWd7XXIQxzLWqgKZZzAovpHZtMgCfMRfyOLJ3-bkTFFUHyetLVl440afpUB5qZHMFzndGJU/s1600/_DSC4841_11_600.jpg" /><br />
<br />
<br /><br /><br />
<br /></div>
<br /><br />

Добавить в сообщение.