SCSSDPPB

Slideshow CSS3 sem salto de página para Blogger

by Mairink Oemes

HTML

<ul id='css3-slider'>
    <li>
        <input type='radio' id='s1' name='num' checked='true' />
        <label for='s1'>1</label>
        <a href='/'>
            <img src='https://lh5.googleusercontent.com/-2Lhe2XTOWgE/VAUDY5VGfLI/AAAAAAAAGgo/KSOKfm_j0ho/w320-h200-no/Palfauer%2BWasserlochklamm%2BOhrwaschlbaum%2BNaturdenkmal.jpg' />
            <span>Tronco uma arvore</span>
        </a>
    </li>
    <li>
        <input type='radio' id='s2' name='num' />
        <label for='s2'>2</label>
        <a href='/'>
            <img src='https://lh5.googleusercontent.com/-kTLcLGmqfiE/VAUCxsqgFLI/AAAAAAAAGgM/DuMAcg1bpt8/w320-h200-no/Ucr%C3%A2nia%2BDemirci%2BRocks.%2BDemirci%2BYayla%2BSanctuary%2C%2BAutonomous%2BRepublic%2Bof%2BCrimea.jpg' />
            <span>Ucrânia Demirci rochas.  República Autónoma da Crimeia</span>
        </a>
    </li>
    <li>
        <input type='radio' id='s3' name='num' />
        <label for='s3'>3</label>
        <a href='/'>
            <img src='https://lh5.googleusercontent.com/-tC3EO3N9Z0U/VAUCiNPn3aI/AAAAAAAAGfk/Zb_w6wT7gsk/w320-h200-no/Serra%2Be%2Bpico%2BDedo%2Bde%2BDeus%2Bno%2BParque%2BNacional%2Bda%2BSerra%2Bdos%2B%C3%93rg%C3%A3os.jpg' />
            <span>Serra e pico Dedo de Deus no Parque Nacional da Serra dos Órgãos</span>
        </a>
    </li>
    <li>
        <input type='radio' id='s4' name='num' />
        <label for='s4'>4</label>
        <a href='/'>
            <img src='https://lh3.googleusercontent.com/-g-C_4k7rU-A/VAUBecy9HvI/AAAAAAAAGfE/a7pngjF3SF0/w320-h200-no/Pedraforca%2C%2BNature%2BPark%2BCad%C3%AD-Moixer%C3%B3.jpg' />
            <span>Pedraforca, Nature Park Cadí-Moixeró</span>
        </a>
    </li>
    <li>
        <input type='radio' id='s5' name='num' />
        <label for='s5'>5</label>
        <a href='/'>
            <img src='https://lh5.googleusercontent.com/-PJAA5_R2RZU/VAUBJmxxqgI/AAAAAAAAGeo/tsGDKWBrGdQ/w320-h200-no/European%2BRobin%2B%28Erithacus%2Brubecula%29.jpg' />
            <span>European Robin...

CSS

/*
 * Puro CSS3 Slideshow 
 * Mult-focos
 * http://mult-focos.blogspot.com.br/
 */

/* General */
#css3-slider {
  margin:30px auto;
  padding:0px 0px;
  width:448px;
  height:286px;
  position:relative;
}

#css3-slider li {
  list-style:none;
  margin:0px 0px;
  padding:0px 0px;
}

/* Navigation */
#css3-slider li input + label {
  position:absolute;
  bottom:5px;
  left:10px;
  z-index:999;
  font:bold 11px/16px Arial,Sans-Serif;
  background-color:black;
  color:white;
  padding:0px 0px;
  width:16px;
  text-align:center;
  cursor:pointer;
}

#css3-slider li:nth-child(2) label {left:28px;}
#css3-slider li:nth-child(3) label {left:46px;}
#css3-slider li:nth-child(4) label {left:64px;}
#css3-slider li:nth-child(5) label {left:82px;}

/* Images */
#css3-slider li img {
  border:none;
  outline:none;
  position:absolute;
  top:50%;
  left:50%;
  width:0px;
  height:0px;
  visibility:hidden;
  opacity:0;
  -webkit-transition:all 2s ease-in-out;
  -moz-transition:all 2s ease-in-out;
  -ms-transition:all 2s ease-in-out;
  -o-transition:all 2s ease-in-out;
  transition:all 2s ease-in-out;
  -webkit-transform:rotate(0deg) scale(0);
  -moz-transform:rotate(0deg) scale(0);
  -ms-transform:rotate(0deg) scale(0);
  -o-transform:rotate(0deg) scale(0);
  transform:rotate(0deg) scale(0);
}

/* Captions */
#css3-slider a {
  text-decoration:none !important;
}

#css3-slider li a span {
  display:block;
  position:absolute;
  right:0px;
  bottom:0px;
  left:0px;
  background-color:rgba(0,0,0,0.8);
  font:normal 11px/26px Arial,Sans-Serif;
  color:white;
  padding:0px 10px;
  text-align:right;
  opacity:0;
  viibility:hidden;
  -webkit-transition:all 2s ease-in-out;
  -moz-transition:all 2s ease-in-out;
  -ms-transition:all 2s ease-in-out;
  -o-transition:all 2s ease-in-out;
  transition:all 2s ease-in-out;
}

/* Active navigation */
#css3-slider li input:checked + label {
  background-color:#39f;
  color:white;
}

/* Show the image with transition */
#css3-slider li...

JavaScript

<ul id='css3-slider'>
    <li>
        <input type='radio' id='s1' name='num' checked='true' />
        <label for='s1'>1</label>
        <a href='/'>
            <img src='URL DA IMAGEM' />
            <span>Descrição da imagem</span>
        </a>
    </li>
    <li>
        <input type='radio' id='s2' name='num' />
        <label for='s2'>2</label>
        <a href='/'>
            <img src='URL DA IMAGEM' />
            <span>Descrição da imagem</span>
        </a>
    </li>
    <li>
        <input type='radio' id='s3' name='num' />
        <label for='s3'>3</label>
        <a href='/'>
            <img src='URL DA IMAGEM' />
            <span>Descrição da imagem</span>
        </a>
    </li>
    <li>
        <input type='radio' id='s4' name='num' />
        <label for='s4'>4</label>
        <a href='/'>
            <img src='URL DA IMAGEM' />
            <span>Descrição da imagem</span>
        </a>
    </li>
    <li>
        <input type='radio' id='s5' name='num' />
        <label for='s5'>5</label>
        <a href='/'>
            <img src='URL DA IMAGEM' />
            <span>Descrição da imagem</span>
        </a>
    </li>
</ul>
 <span style="font-size: 80%; float:right;">Adquira este <a href="http://mult-focos.blogspot.com/2014/09/slaideshow-puro-css3.html" target="_blank">widget</a></span>