Tutoriels sur Joomla et la création de site

Les scripts mentionnés dans le présent article doivent être entrés dans l'afficheur de code source html de votre éditeur. Chaque JavaScript doit être activé sous l'onglet Javascripts dans la configuration.

Multibox

• Prend en charge une variété de formats multimédia: images, flash, video, mp3s, html!

• Auto détecte les formats ou vous pouvez spécifier le format

• descriptions Html

• Groupement d'images, vidéos, etc.

• Active/désactive la superposition de page lorsque multibox apparaît (via les paramètres de template)

• Active/désactive les contrôles (via les paramètres de template)

Pour activer multibox, utilisez ce qui suit autour de n'importe quelle image.
Voici 3 exemples de multibox utilisé sur certaines images :

<a href="https://www.shape5.com/demo/images/multibox1_lrg.jpg" id="mb1" title="Image Example #1:"> <img src="https://www.shape5.com/demo/images/multibox1.jpg" class="boxed" alt="" /> </a> <div class="s5_multibox mb2">Multiple Image #1. It can support <strong>html</strong>.</div>

<a href="https://www.shape5.com/demo/images/multibox2_lrg.jpg" id="mb2" title=" Image Example #2:"> <img src="https://www.shape5.com/demo/images/multibox2.jpg" class="boxed" alt="" /> </a> <div class="s5_multibox mb3">Multiple Image #2. It can support <strong>html</strong>.</div>

<a href="https://www.shape5.com/demo/images/multibox3_lrg.jpg" id="mb3" title=" Image Example #3:"> <img src="https://www.shape5.com/demo/images/multibox3.jpg" class="boxed" alt="" /> </a> <div class="s5_multibox mb4">Multiple Image #3. It can support <strong>html</strong>.</div>

Comment regrouper les images ci-dessus? :

Pour des images de groupe il suffit d'ajouter un nom à la balise rel, qui est appelée à l'intérieur de l<a>. Vous pouvez inventer n'importe quel nom, mais simplement être sûr d'utiliser le même nom dans toutes les images que vous voulez afficher dans un groupe particulier. Par exemple, pour ajouter des images dans un groupe nommé "firstset" vous le feriez à l'aide de ce qui suit rel="[firstset]" sur chaque élément:

<a href="https://www.shape5.com/demo/images/multibox1_lrg.jpg" id="mb1" rel="[firstset]" class="s5mb" title="Grouped Image Example #1:"> <img src="https://www.shape5.com/demo/images/multibox1.jpg" class="boxed" alt="" /> </a> <div class="s5_multibox mb2">Multiple Image #1. It can support <strong>html</strong>.</div>

<a href="https://www.shape5.com/demo/images/multibox2_lrg.jpg" id="mb2" rel="[firstset]" class="s5mb" title="Grouped Image Example #2:"> <img src="https://www.shape5.com/demo/images/multibox2.jpg" class="boxed" alt="" /> </a> <div class="s5_multibox mb3">Multiple Image #2. It can support <strong>html</strong>.</div>

<a href="https://www.shape5.com/demo/images/multibox3_lrg.jpg" id="mb3" rel="[firstset]" class="s5mb" title="Grouped Image Example #3:"> <img src="https://www.shape5.com/demo/images/multibox3.jpg" class="boxed" alt="" /> </a> <div class="s5_multibox mb4">Multiple Image #3. It can support <strong>html</strong>.</div>

Exemple Youtube :

Vous pouvez utiliser les formats vidéo suivants : flv, mov, wmv, real et swf. Il suffit d'insérer l'URL vers les vidéos dans le href du lien hypertexte, voici un exemple de la manière dont nous l'avons fait pour une vidéo Youtube:

<a href="https://www.youtube.com/v/VGiGHQeOqII" id="youtube" class="s5mb" title="Youtube.com Video"> Youtube.com Video - CLICK ME </a> <div>UP: Carl and Ellie </div>

Comment saisir l'URL vidéo de youtube convenablement ?:

Tutoriel Youtube: Il suffit de cliquer droit sur une vidéo youtube et de copier le code embed, ensuite collez-le dans un éditeur de texte, recherchez le embed src et utiliser cette URL dans votre lien hypertexte.

<embed src= https://www.youtube.com/v/VGiGHQeOqII

Exemple MP3:

<a href="https://www.shape5.com/demo/images/music.mp3" id="mb8" class="s5mb" title="Music">MP3 example</a> <div>mp3 example - CLICK ME</div>

Exemple d'iFrame :

<a href="https://www.getfirebug.com" rel="width:790,height:600" id="mb28" title="https://getfirebug.com/">iFrame/HTML Example - CLICK ME</a> <div>getfirebug.com</div>

Lazy Load (Chargement différé)

Le script de chargement différé est un excellent moyen d'économiser la bande passante et de charger vos pages beaucoup plus rapidement. Les images qui ne sont pas visibles lors du chargement de la page initiale ne sont pas chargées jusqu'à ce qu'elles arrivent dans la zone d'affichage principale. Une fois qu'une image arrive dans la vue, elle est alors téléchargée et apparaît dans un effet « fade ».

Le réglage est très facile! Par défaut, ce script est désactivé, afin de lui permettre de choisir tout simplement toutes les images ou d'images individuelles à partir de la liste déroulante, comme illustré ci-dessous, à partir de la page de configuration du template.

« All Images » va charger chaque image standard sur la page avec lazy load. Il n'y a aucune configuration ou code supplémentaire à ajouter à cette configuration, cela se fera automatiquement.
« Individual images » sera utilisé si vous voulez que certaines images soit chargées avec ce script mais pas toutes. Pour ce faire, il suffit d'ajouter à l'image comme ceci:

<img class="s5_lazyload" src="/image.jpg"></img>

Tooltips : ( info-bulles )

Remarque - Le script infobulles est désactivé par défaut. Si vous souhaitez l'utiliser, vous devez activer ce script dans la zone de configuration du template. Cela comprend également les installations site shaper.

Image simple :

<a onmouseover="Tip('This is a sample tooltip.', WIDTH, 140, OPACITY, 80, ABOVE, true, OFFSETX, 1, FADEIN, 200, FADEOUT, 300,SHADOW, true, SHADOWCOLOR, '#000000',SHADOWWIDTH, 2, BGCOLOR, '#000000',BORDERCOLOR, '#000000',FONTCOLOR, '#FFFFFF', PADDING, 9)" href="https://www.shape5.com/demo/etensity/">

<img class="boxed2" alt="" src="https://www.shape5.com/demo/smart_blogger/images/tooltip.jpg"/>

</a>

Image avec info-bulle :

<a href="/demo/salon_n_spa/index.htm" onmouseover="Tip('Image Demo

<img src=https://www.shape5.com/demo/smart_blogger/images/tooltip.jpg width=220 height=147>')">Demo 2 Image Tool Tip </a>

Image avec info-bulle :

<a href="#" onmouseover="Tip('Image Demo<br /> <br /><img src=https://www.shape5.com/demo/smart_blogger/images/tooltip.jpg width=220 height=147>',SHADOW, true, BGCOLOR, '#000000', FADEIN, 400, FADEOUT, 400, SHADOWCOLOR, '#000000', BORDERCOLOR, '#000000',OPACITY, 90,FONTCOLOR, '#FFFFFF')"><strong>Demo 3 Image Tool Tip</strong></a>

Info Slide

Le script info slide (diapositive d'info) est une excellente...