io toolbox

Menu

Composants externes

Multimédia

Royal Sliders

Si nécessaire la documentation complète est disponible sur RoyalSlider

Slider en page simple (id="gallery-2")

Html

				
Lorem ipsum dolor sit amet
Lorem ipsum dolor sit amet
Lorem ipsum dolor sit amet
Lorem ipsum dolor sit amet

JS

                      $('#gallery-2').royalSlider({
                        fullscreen: {
                          enabled: true,
                          nativeFS: true
                        },
                        controlNavigation: 'bullets',
                        autoScaleSlider: true, 
                        autoHeight: true,
                        autoScaleSliderWidth: 900,     
                        autoScaleSliderHeight: 600,
                        loop: true,
                        slidesSpacing: 0,
                        imageScaleMode: 'fit-if-smaller',
                        imageScalePadding: 0,
                        navigateByClick: true,
                        numImagesToPreload:2,
                        arrowsNav:true,
                        arrowsNavAutoHide: true,
                        arrowsNavHideOnTouch: true,
                        keyboardNavEnabled: true,
                        fadeinLoadedSlide: true,
                        globalCaption: false,
                        globalCaptionInside: false,
                        buttonFS: false,
                        thumbs: {
                          appendSpan: true,
                          firstMargin: true,
                          paddingBottom: 0
                        }
                        
                      });
  
				

Slider Galerie photos (id="gallery-1")

Html

				
				

JS

		  $('#gallery-1').royalSlider({
			fullscreen: {
			  enabled: true,
			  nativeFS: true
			},
			controlNavigation: 'none',
			autoScaleSlider: true, 
			autoHeight: true,
			autoScaleSliderWidth: 900,     
			autoScaleSliderHeight: 600,
			loop: true,
			slidesSpacing: 0,
			imageScaleMode: 'fit-if-smaller',
			imageScalePadding: 0,
			navigateByClick: true,
			numImagesToPreload:2,
			arrowsNav:true,
			arrowsNavAutoHide: true,
			arrowsNavHideOnTouch: true,
			keyboardNavEnabled: true,
			fadeinLoadedSlide: true,
			globalCaption: false,
			globalCaptionInside: false,
			thumbs: {
			  appendSpan: true,
			  firstMargin: true,
			  paddingBottom: 0
			}
		  });
  
				

Slider Galerie photos thumbnails (id="gallery-3")

Html

				
				

JS

              $('#gallery-3').royalSlider({
                fullscreen: {
                  enabled: true,
                  nativeFS: true
                },
                controlNavigation: 'thumbnails',
                autoScaleSlider: true, 
                autoHeight: true,
                autoScaleSliderWidth: 900,     
                autoScaleSliderHeight: 564,
                loop: true,
                slidesSpacing: 0,
                imageScaleMode: 'fill',
                imageScalePadding: 0,
                navigateByClick: true,
                numImagesToPreload:2,
                arrowsNav:true,
                arrowsNavAutoHide: true,
                arrowsNavHideOnTouch: true,
                keyboardNavEnabled: true,
                fadeinLoadedSlide: true,
                globalCaption: false,
                globalCaptionInside: false,
                thumbs: {
                  appendSpan: true,
                  firstMargin: false,
                  paddingBottom: 0
                }
              });
  
				

Slider Videos gallery (id="video-gallery")



Html

			
				

JS

		  $('#video-gallery').royalSlider({
			arrowsNav: false,
			fadeinLoadedSlide: true,
			controlNavigationSpacing: 0,
			controlNavigation: 'thumbnails',
		
			thumbs: {
			  autoCenter: false,
			  fitInViewport: true,
			  orientation: 'vertical',
			  spacing: 0,
			  paddingBottom: 0
			},
			keyboardNavEnabled: true,
			imageScaleMode: 'fill',
			imageAlignCenter:true,
			slidesSpacing: 0,
			loop: false,
			loopRewind: true,
			numImagesToPreload: 3,
			video: {
			  autoHideArrows:true,
			  autoHideControlNav:false,
			  autoHideBlocks: true
			}, 
			autoScaleSlider: true, 
			autoScaleSliderWidth: 1020,     
			autoScaleSliderHeight: 450,
		  });
  
				

Video player (sublimevideo)

Pour ajouter un player vidéo, il est indispensable d'enregistrer le site et les nom de domaines sur sublimevideo.net. L'inclusion JS est différente pour chaque site.

Example




Sound player

Documentation au besoin sur MediaElement



Html

                	
                

JS / CSS

                
                
                $('audio').mediaelementplayer();
				


Modal box


Réseaux sociaux

Boutons de partage

Facebook "Like" Box

La configuration doit se faire directement depuis cette page: Facebook Likebox.


Services Google

Google Maps

La documentation complète est disponible sur le site de Google Developers.
Pour des exemples de maps ayant un style différent: Snazzy Maps

Example



Html

				                

                

Google Analytics

A insérer directement après la balise body, remplacer le UA-00000-0 par l'identifiant Google Analytics.

					
				

Google Tag Manager


Publicité

Reload des publicité