ejemploGaleria_ Galería de imagenes muy sencilla

Esta es la primera imagen

• 1
• 2
• 3
• 4

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

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