CÓDIGO CSS
(colar abaixo de <head>)
<link href='https://cdn.rawgit.com/elainegaspareto/codigos/91219549/galeriadevideosbyelainegaspareto.css' rel='stylesheet' type='text/css'/>
<link href='https://cdn.rawgit.com/elainegaspareto/codigos/91219549/galeriadevideosbyelainegaspareto2.css' rel='stylesheet' type='text/css'/>
CÓDIGO JAVASCRIPT
(colar acima de </body>)
<script src='https://code.jquery.com/jquery-1.11.2.min.js' type='text/javascript'/>
<script src='https://cdn.rawgit.com/elainegaspareto/galeria/1912ae58/galeriadevideosbyelainegaspareto.js' type='text/javascript'/>
<script src='https://cdn.rawgit.com/elainegaspareto/galeria/1912ae58/galeriadevideosbyelainegaspareto-codigo2.js' type='text/javascript'/>
<script type='text/javascript'>
window.setTimeout(function() {
document.body.className = document.body.className.replace('loading', '');
}, 10);
</script>
<script type='text/javascript'>
jQuery(document).ready(function(){
jQuery("#gallery").unitegallery({
gallery_width:900, //gallery width
gallery_height:500, //gallery height
gallery_min_width: 400, //gallery minimal width when resizing
gallery_min_height: 300, //gallery minimal height when resizing
gallery_theme:"default", //default,compact,grid,slider - select your desired theme from the list of themes.
gallery_skin:"default", //default, alexis etc... - the global skin of the gallery. Will change all gallery items by default.
gallery_images_preload_type:"minimal", //all , minimal , visible - preload type of the images.
//minimal - only image nabours will be loaded each time.
//visible - visible thumbs images will be loaded each time.
//all - load all the images first time.
gallery_autoplay:false, //true / false - begin slideshow autoplay on start
gallery_play_interval: 3000, //play interval of the slideshow
gallery_pause_on_mouseover: true, //true,false - pause on mouseover when playing slideshow true/false
gallery_control_thumbs_mousewheel:false, //true,false - change this option, add more mousewheel choices
gallery_control_keyboard: true, //true,false - enable / disble keyboard controls
gallery_carousel:true, //true,false - next button on last image goes to first image.
gallery_preserve_ratio: true, //true, false - preserver ratio when on window resize
gallery_debug_errors:true, //show error message when there is some error on the gallery area.
gallery_background_color: "" //set custom background color. If not set it will be taken from css.
});
});
</script>
CÓDIGO HTML
(colar como gadget HTML/JAVASCRIPT)
<center><div id="gallery" style="display:none;">
<img alt="Youtube Video 1"
data-type="youtube"
data-videoid="eQYqeG2ZNnE"
data-description="Contador de visualizações individuais para cada post do blog" />
<img alt="Youtube Video 2"
data-type="youtube"
data-videoid="uQWvcPQ9xD8"
data-description="Postagens relacionadas ao final dos posts" />
<img alt="Youtube Video 3"
data-type="youtube"
data-videoid="Lruf3QqOgFY"
data-description="Como usar qualquer fonte no blog?" />
<img alt="Youtube Video 4"
data-type="youtube"
data-videoid="iroiR3tMLY4"
data-description="Como personalizar as legendas das imagens do blog?" />
<img alt="Youtube Video 5"
data-type="youtube"
data-videoid="LpF23UpMTNo"
data-description="Menu com abas multinível e caixa de pesquisa" />
<img alt="Youtube Video 6"
data-type="youtube"
data-videoid="P1WpmUSMxYU"
data-description="Como centralizar qualquer elemento de página na sidebar?" />
<img alt="Youtube Video 7"
data-type="youtube"
data-videoid="2q8icSnkLb0"
data-description="Como usar os comentários do Facebook e do Blogger ao mesmo tempo" />
<img alt="Youtube Video 8"
data-type="youtube"
data-videoid="9gAy_YqM7zs"
data-description="Como localizar qualquer linha de código no template do blog?" />
<img alt="Youtube Video 9"
data-type="youtube"
data-videoid="wIT7ZYZJvpc"
data-description="Minha cachorrinha Princesa, filhotinha" />
<img alt="Youtube Video 10"
data-type="youtube"
data-videoid="iroiR3tMLY4"
data-description="Personalizar as legendas das imagens do blog" />
<img alt="Youtube Video 11"
data-type="youtube"
data-videoid="TGXBssowhBE"
data-description="Contador de seguidores nas redes sociais" />
</div></center>
