Galeria de vídeos do Youtube em formato de slide dinâmico

Views:
CÓDIGO CSS
(colar abaixo de <head>)

<link href='https://sites.google.com/site/codigoselainegaspareto/scripts/galeriadevideosbyelainegaspareto.css' rel='stylesheet' type='text/css'/>
<link href='https://sites.google.com/site/codigoselainegaspareto/scripts/galeriadevideosbyelainegaspareto-codigo2.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://sites.google.com/site/codigoselainegaspareto/scripts/galeriadevideosbyelainegaspareto.js' type='text/javascript'/>            
<script src='https://sites.google.com/site/codigoselainegaspareto/scripts/galeriadevideosbyelainegaspareto-codigo2.js' type='text/javascript'/>

  <script type='text/javascript'>
    window.setTimeout(function() {
        document.body.className = document.body.className.replace(&#39;loading&#39;, &#39;&#39;);
      }, 10);
  </script>

<script type='text/javascript'>

                               jQuery(document).ready(function(){

                                               jQuery(&quot;#gallery&quot;).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:&quot;default&quot;,                                                                 //default,compact,grid,slider - select your desired theme from the list of themes.
                                                               gallery_skin:&quot;default&quot;,                                                                                       //default, alexis etc... - the global skin of the gallery. Will change all gallery items by default.

                                                               gallery_images_preload_type:&quot;minimal&quot;,                  //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: &quot;&quot;                                                         //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>


Home Sobre mim Tutoriais Loja de templates Portfólio Fanpage