Ultimas entradas

blogger

PRESENTACIÓN DE IMÁGENES APILADAS EN BLOGGER

By Blogs Famag - domingo, septiembre 01, 2019

PRESENTACIÓN DE IMÁGENES APILADAS EN BLOGGER .





Cuando queremos mostrar una galería de imagenes en nuestro blog, pienso que la manera estética de hacerla es fundamental. 

Si es original y encima tiene animaciones como esta, no te digo 'na'. Utilizando el CSS3 y el Javascript se consigue esta presentación con las imagenes apiladas-desordenadas que al hacer click sobre ellas, 

estas van pasando como si lo hiciéramos con la mano.


Si quieres ponerla en tu blog o web, primero copia este código y pegalo en tu plantilla antes de </head>.

Un clic en “Plantilla”



Un clic en “Editar HTML”



 Ahora se te abrirá el Editor HTML de tu plantilla




En  este punto deberás presionar la tecla “Control” de tu teclado seguido de la tecla “F” para que aparezca el buscador integrado en la parte superior derecha de tu editor,
debes esperar unos segundos hasta que se muestre, aquí es donde tendrás que insertar el código para buscarlo e insertar los códigos correspondientes en el editor,



  Busca el siguiente código


</head>



Ahora justo encima (ó antes) de esa etiqueta, pegamos lo siguiente:









<script>
(function() {

var queue = false,
    touch = 'ontouchstart' in document.documentElement ? true : false,
    images = document.querySelector('.images'),
    imageWidth = images.firstElementChild.offsetWidth,
    imageOffset = images.firstElementChild.offsetLeft,
    cssTransition = function () {
      var body = document.body || document.documentElement,
          style = body.style,
          property = 'Transition',
          vendors = ['Moz', 'Webkit', 'O', 'ms'],
          vendorCount = vendors.length;

      if (typeof style[property.toLowerCase()] === 'string') {
        return true;
      }

      do {
        if (typeof style[vendors[vendorCount] + property] === 'string') {
          return true;
        }
      } while (vendorCount--);

      return false;
    },
    timeout = cssTransition() ? [300, 400] : [0, 0];

images.addEventListener(touch ? 'touchend' : 'click', function (event) {
  if (!queue) {
    queue = true;

    var direction = ((touch ? event.changedTouches[0].pageX : event.pageX) - imageOffset) > imageWidth / 2 ? 'slide-right' : 'slide-left',
        last = images.lastElementChild.classList;

    last.add(direction);

    setTimeout(function () {
      last.remove(direction);
      last.add('back');

      setTimeout(function () {
        images.insertBefore(images.lastElementChild, images.firstElementChild);
        last.remove('back');
        queue = false;
      }, timeout[0]);
    }, timeout[1]);
  }
}, false);

})();
  </script>


<style>
.images {
  cursor: pointer;position:relative;
}
.images:hover .image:nth-child(4) {
  -webkit-transform: rotate(10deg) translateX(50px);
  -moz-transform: rotate(10deg) translateX(50px);
  -ms-transform: rotate(10deg) translateX(50px);
  -o-transform: rotate(10deg) translateX(50px);
  transform: rotate(10deg) translateX(50px);
}
.images:hover .image:nth-child(3) {
  -webkit-transform: rotate(3deg) translateX(75px);
  -moz-transform: rotate(3deg) translateX(75px);
  -ms-transform: rotate(3deg) translateX(75px);
  -o-transform: rotate(3deg) translateX(75px);
  transform: rotate(3deg) translateX(75px);
}
.images:hover .image:nth-child(2) {
  -webkit-transform: rotate(-2deg) translateX(-50px);
  -moz-transform: rotate(-2deg) translateX(-50px);
  -ms-transform: rotate(-2deg) translateX(-50px);
  -o-transform: rotate(-2deg) translateX(-50px);
  transform: rotate(-2deg) translateX(-50px);
}
.images:hover .image:first-child {
  -webkit-transform: rotate(-8deg) translateX(-75px) translateY(-10px);
  -moz-transform: rotate(-8deg) translateX(-75px) translateY(-10px);
  -ms-transform: rotate(-8deg) translateX(-75px) translateY(-10px);
  -o-transform: rotate(-8deg) translateX(-75px) translateY(-10px);
  transform: rotate(-8deg) translateX(-75px) translateY(-10px);
}

.image {
  position: absolute;
  top: 50%;
  left: 50%;
  height: 250px;
  width: 300px;
  margin-top: -110px;
  margin-left: -105px;
  border: 5px solid #fff;
  border-bottom-width: 15px;
  -webkit-box-shadow: 7px 7px 5px rgba(50, 50, 50, 0.75);
-moz-box-shadow:    7px 7px 5px rgba(50, 50, 50, 0.75);
box-shadow:         7px 7px 5px rgba(50, 50, 50, 0.75);
  z-index: 2;
  -webkit-transition: -webkit-transform 0.3s ease-in-out;
  -moz-transition: -moz-transform 0.3s ease-in-out;
  -o-transition: -o-transform 0.3s ease-in-out;
  transition: transform 0.3s ease-in-out;
}
.image:first-child {
  -webkit-transform: rotate(8deg);
  -moz-transform: rotate(8deg);
  -ms-transform: rotate(8deg);
  -o-transform: rotate(8deg);
  transform: rotate(8deg);
}
.image:nth-child(2) {
  -webkit-transform: rotate(2deg);
  -moz-transform: rotate(2deg);
  -ms-transform: rotate(2deg);
  -o-transform: rotate(2deg);
  transform: rotate(2deg);
}
.image:nth-child(3) {
  -webkit-transform: rotate(-3deg);
  -moz-transform: rotate(-3deg);
  -ms-transform: rotate(-3deg);
  -o-transform: rotate(-3deg);
  transform: rotate(-3deg);
}
.image:nth-child(4) {
  -webkit-transform: rotate(-10deg);
  -moz-transform: rotate(-10deg);
  -ms-transform: rotate(-10deg);
  -o-transform: rotate(-10deg);
  transform: rotate(-10deg);
}
.image:last-child {
  -webkit-transform: rotate(-5deg);
  -moz-transform: rotate(-5deg);
  -ms-transform: rotate(-5deg);
  -o-transform: rotate(-5deg);
  transform: rotate(-5deg);
}
.image.slide-right {
  -webkit-transform: rotate(290deg) translateX(250px);
  -moz-transform: rotate(290deg) translateX(250px);
  -ms-transform: rotate(290deg) translateX(250px);
  -o-transform: rotate(290deg) translateX(250px);
  transform: rotate(290deg) translateX(250px);
}
.image.slide-left {
  -webkit-transform: rotate(-290deg) translateX(-250px);
  -moz-transform: rotate(-290deg) translateX(-250px);
  -ms-transform: rotate(-290deg) translateX(-250px);
  -o-transform: rotate(-290deg) translateX(-250px);
  transform: rotate(-290deg) translateX(-250px);
}
.image.back {
  z-index: 1;
}
  </style>


Ahora, cada vez que queramos mostrar esta presentación, agregamos el siguiente código,en un gadget “HTML-Javascript” añadiendo las urls de las imagenes.


Para instalarlo en vuestro Bloc en un gadget solo tenéis que seguir estos pasos:




 Un clic en “Diseño”



 Clic en “Añadir un gadget”



 Busca el widget que dice “HTML-Javascript” y ábrelo



 Coloca el siguiente código en el interior







<div class="images">
  <img class="image" src="URL DE LA IMAGEN" style="border:8px solid #ffffff;"/>
  <img class="image" src="URL DE LA IMAGEN" style="border:8px solid #ffffff;"/>
  <img class="image" src="URL DE LA IMAGEN" style="border:8px solid #ffffff;"/>
  <img class="image" src="URL DE LA IMAGEN" style="border:8px solid #ffffff;"/>
  <img class="image" src="URL DE LA IMAGEN" style="border:8px solid #ffffff;"/>
  <img class="image" src="URL DE LA IMAGEN" style="border:8px solid #ffffff;"/>
  <img class="image" src="URL DE LA IMAGEN" style="border:8px solid #ffffff;"/>
  <img class="image" src="URL DE LA IMAGEN" style="border:8px solid #ffffff;"/>
</div>


Despues de haber insertado el código, un clic en  "Guardar"




 Data de la Publicación; 02-09-2019

 Fuente; redeando

 Publicado por;                                                                             






  • Share:

You Might Also Like

0 comentarios