1 <h1>Image viewer</h1>2 3 <div id="container"></div>4 5 <div id="buttons">6 <button onclick="mi_picvi.select(mi_picvi.getSelectedId()-1);"> < </button>7 <button onclick="mi_picvi.select(mi_picvi.getSelectedId()+1);"> > </button>8 </div>9 10 <script type="text/javascript">11 12 var container = document.getElementById('container');13 var mi_picvi = new PicVi(container);14 15 mi_picvi.add('http://quelindoesmipaisaje.files.wordpress.com/2011/02/paisaje.jpg');16 mi_picvi.add('http://www.segurosmoto.com.es/images/motos-bmw-s1000rr-competicion-superbikes-2-seguros-moto.jpg');17 mi_picvi.add('http://www.lasicilia.es/imagenes/mini_coche_por_sicilia.jpg');18 mi_picvi.add('http://static.freepik.com/foto-gratis/ordenador-portatil_17-827044425.jpg');19 mi_picvi.add('http://aulainformatica.files.wordpress.com/2007/10/800px-ibm_pc_5150.jpg');20 mi_picvi.add('http://www.npg.si.edu/exhibit/feature/images/schoeller_full.jpg');21 mi_picvi.add('http://juicy.tuxboard.com/wp-content/uploads/2011/03/Christopher-Walken-portrait.jpg');22 mi_picvi.add('http://1.bp.blogspot.com/-pB9LyJGzjUg/TeXzdLiUyiI/AAAAAAAAAPA/YkpZzdMY25M/s1600/platon_photographer-president-mahmoud-ahmadinejad-portrait.jpg');23 mi_picvi.add('http://www.windows2universe.org/earth/images/apollo8_earth_sm.jpg');24 mi_picvi.add('http://www.entreclick.com/wp-content/uploads/2013/02/Firefox-OS-021.jpg');25 26 mi_picvi.select(3);27 28 function updateSlider(v) {29 document.getElementById('slide_label').innerHTML = v;30 }31 32 33 34 35 36 </script>37 38 <style type="text/css">39 40 #container {41 position: absolute;42 top: 0;43 left: 0;44 right: 0;45 bottom: 0;46 }47 48 h1 {49 text-align: center;50 position: absolute;51 top: 0;52 left: 0;53 right: 0;54 }55 56 #buttons {57 position: absolute;58 bottom: 0;59 right: 0;60 left: 0;61 text-align: center;62 }63 64 #buttons button {65 padding: 20px;66 }67 </style>Enlace
El enlace para compartir es: