Galerie Javascript – Premier site en local sur wordpress

Exercice concret:

Pour intégrer dans la page html, placer juste avant le </body> le chemin du fichier.

<script src="js/galeries01.js"></script>

Dans le fichier .js, pour récupérer, placer:

var galerie = document.querySelector('#galerie-01');

var afficheur = galerie.querySelector('.afficheur');

var liens =galerie.querySelectorAll('a');

Pour récupérer toutes les photos, il nous faut faire une boucle:

for (let i=0; i<liens.length; i++){

liens[i].onclick=function(){

afficheur.src=this.href;

returnfalse;

}

}

Pour un résultat:

Pour rajouter un le titre de l’image, sous l’image nous rajoutons dans le html:

<div class="titreImage">Le titre de l'image</div>

Pour rajouter un le titre de l’image, sous l’image nous rajoutons dans le js:

var titreImage = document.querySelector('.titreImage');

Pour rajouter le titre de l’image, sous l’image nous rajoutons dans la boucle et la fonction:

titreImage.innerHTML = this.title;

Autre exercice:

Pour arriver au même résulta mais sans rien ajouter au html:

var galerie = document.querySelector('#galerie-01'); 
var afficheur = document.createElement('img'); 
afficheur.classList.add('afficheur'); 
galerie.appendChild(afficheur); 

var titreImage = document.createElement('div'); 
titreImage.classList.add('titre-image'); 
galerie.appendChild(titreImage); 

var liens = galerie.querySelectorAll('a'); 

for ( let i=0 ; i<liens.length ; i++ ) { 
liens[i].onclick=function() { 
afficheur.src=this.href; 
titreImage.innerHTML=this.title; 
return false; 
} 
}

Autre galerie:

var galerie = document.querySelector('#galerie-01');

var afficheur = document.createElement('img');

afficheur.classList.add('afficheur');

galerie.appendChild(afficheur);

var titreImage = document.createElement('div');

titreImage.classList.add('titre-image');

galerie.appendChild(titreImage);

var liens = galerie.querySelectorAll('a');

for ( let i=0 ; i<liens.length ; i++ ) {

liens[i].onclick=function() {

afficheur.src=this.href;

titreImage.innerHTML=this.title;

returnfalse;

}

}

Le résultat:

Slider:

Préparer les dossiers:

Sur le site http://sachinchoolur.github.io/lightslider/index.html

Récupérer le contenu des lightSlider.css et lightSlider.js et récuperer aussi l’image dans le dossier image.

https://github.com/sachinchoolur/lightslider/tree/master/dist

Ou télécharger tout le dossier:

https://github.com/sachinchoolur/lightslider

Le déziper en sortir le contenu du dossier dist et le placer dans notre dossier www avec la page html

Dans le head de la page html placer:

<link type="text/css" rel="stylesheet" href="css/lightslider.css" /> 
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script> 
<script src="js/lightslider.js"></script>

Dans le bas de page avant </body> placer:

<script type="text/javascript"> 
$(document).ready(function() { 
$("#light-slider").lightSlider();  
}); 
</script>

Et pour le contenu:

<ul id="light-slider">
<li>
<imgsrc = "https://lp.trucdev.fr/paysages/400/200/1">
</li>
<li>
<imgsrc = "https://lp.trucdev.fr/paysages/400/200/2">
</li>

</ul>

Nous pouvons modifier le slider, pour par exemple, rendre notre slider automatique(en passant les valeur false en true):

<script type="text/javascript">

        $(document).ready(function() {
            $("#light-slider").lightSlider({auto:true,});
        });

    </script> // entre accolade nous pouvons changer beaucoup de chose 
{item:1,auto:true,speed:2000,pause:3000,}

Voila notre slider avec défilement automatique.

Pour intégrer une galerie seul:

Nous procédons un peu de la même manière. Toujours sur le même site.

https://github.com/sachinchoolur/lightGallery

Sortir le contenu du dossier dist et le placer dans notre dossier www avec la page html

Dans le head placé

<linktype="text/css"rel="stylesheet"href="css/lightgallery.css"/>

Le même script que pour le slider(sauf si celui-ci y est déjà):

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>

Et :

<script src="js/lightgallery.js"></script>

Dans le bas de page:

<script type="text/javascript">

$(document).ready(function() {
$("#ma-galerie").lightGallery();
});

</script>

Pour le contenu:

<divid="ma-galerie">

<ahref="https://lp.trucdev.fr/paysages/12000/1000/1"><imgsrc="https://lp.trucdev.fr/paysages/100/100/1"></a>
<ahref="https://lp.trucdev.fr/paysages/12000/1000/2"><imgsrc="https://lp.trucdev.fr/paysages/100/100/2"></a>
<ahref="https://lp.trucdev.fr/paysages/12000/1000/3"><imgsrc="https://lp.trucdev.fr/paysages/100/100/3"></a>

</div>

Pour intégrer un slider et une galerie:

Nous procédons de la même manière que pour le slide.

Dans le head de la page html placer:

<link type="text/css" rel="stylesheet" href="css/lightslider.css" /> 
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script> 
<script src="js/lightslider.js"></script>

Dans le bas de page:

<script type="text/javascript">

$(document).ready(function() {

$('#slider-galerie-01').lightSlider({
item:1,
auto:true,
speed:2000,
pause:3000,
gallery:true,
thumbItem:12,
onSliderLoad:function (el) {
el.lightGallery({
selector:'#slider-galerie-01 .lslide'

});
}
})
});
</script>

Pour le contenu:

<h1>Slider-galerie 01</h1>

<divid="slider-galerie-01"class="slider">

<divdata-thumb="https://lp.trucdev.fr/trains/100/50/1"data-src="https://lp.trucdev.fr/trains/1200/800/1"><imgsrc="https://lp.trucdev.fr/trains/1200/400/1"alt=""></div>

<divdata-thumb="https://lp.trucdev.fr/trains/100/50/2"data-src="https://lp.trucdev.fr/trains/1200/800/2"><imgsrc="https://lp.trucdev.fr/trains/1200/400/2"alt=""></div>

<divdata-thumb="https://lp.trucdev.fr/trains/100/50/3"data-src="https://lp.trucdev.fr/trains/1200/800/3"><imgsrc="https://lp.trucdev.fr/trains/1200/400/3"alt=""></div>

</div>

Le data-src, renvoi à l’url de l’image correspondant au slide dans la galerie.

Si nous voulions placer les slides et galerie ensemble, il ne serait pas nécessaire de doubler certain liens en commun.

Ex:

<link type="text/css" rel="stylesheet" href="css/lightslider.css" />
<scriptsrc="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<scriptsrc="js/lightslider.js"></script>
<linktype="text/css"rel="stylesheet"href="css/lightgallery.css"/>
<scriptsrc="js/lightgallery-all.js"></script>
<linkrel="stylesheet"href="css/slider01.css">

<script type="text/javascript">
$(document).ready(function() {

$("#light-slider").lightSlider({auto:true, gallery:true,item:1,});

$("#ma-galerie").lightGallery({thumbnail :true,thumbItem:14,});

$('#slider-galerie-01').lightSlider({
item:1,
auto:true,
speed:2000,
pause:3000,
gallery:true,
thumbItem:12,
onSliderLoad:function (el) {
el.lightGallery({
selector:'#slider-galerie-01 .lslide'
});
}
})
});
</script>

Smooth scroll:

A l’adresse https://github.com/flynnham/jetpack.js Dans dist prendre jetpack.js et en faire un fichier dans le dossier .js

Dans le head placer:

<script src="js/jetpack.js"></script>

Dans le bas de page(imperativement):

<script>

varjet = newjetpack({duration:200});
jet.hookAnchors();

</script>

Pour le css nous fixons la navigation-principale en: position:sticky; et top:0; (les deux vont ensemble);