JS cibler plusieurs élément et appliquer Canvas

Bonjour à tous,

Voila j'ai utilisé un petit script trouvé pour appliqué un effet liquide sur des images.
Sauf que dans leur exemple il ne s'applique qu'a un élément. en gros il va cherche .slide-item__image , il applique le filtre dans un Canvas et il met Canvas dans #content. Sauf que #content est un id donc il n'en prend qu'un et moi j'ai une liste li et pour chacun de ces li ils leurs faut la modifie Canvas...

Donc dans html .slide-item__image

<div class="wrapper_preview">
     
     <ul>
       <li class="preview" class="graphisme">
       		<div id="content" style=" position: relative;">		
				<img src="images/pict4.jpg" class="slide-item__image" width="100%" height="100%"> <!-- ratio 1:1 1000 x 1000-->		
			</div>
       </li>   


       <li class="preview" class="illustration">
       	<div id="content" style=" position: relative;">	
				<img src="images/pict4.jpg" class="slide-item__image" width="100%" height="100%"> <!-- ratio 1:1 1000 x 1000-->		
			</div>
       </li>

     </ul>
    </div>

Js récupère .slide-item__image , et charge l'image pour le filtre

<script>
			imagesLoaded(document.body, () => document.body.classList.remove('loading'));

			var spriteImages 	= document.querySelectorAll( '.slide-item__image' );
			var spriteImagesSrc = [];

			for ( var i = 0; i < spriteImages.length; i++ ) {
				var img = spriteImages[i];
				spriteImagesSrc.push( img.getAttribute('src' ) );
			}

			var initCanvasSlideshow = new CanvasSlideshow({
				sprites: spriteImagesSrc,
				displacementImage: 'images/dmaps/2048x2048/clouds.jpg',
				autoPlay: true,
				autoPlaySpeed: [10, 3],
				displaceScale: [200, 70]
			});
		</script>

ensuite la ligne qui permet d'ajouter le Canvas dans l'html

// Add canvas to the HTML   
        document.getElementById('content').appendChild( renderer.view );

et ensuite

.slide-item__image{ display:none; }

Comment appliquer le Canvas à tout mes élément ?
Ou peut être appliquer l'effet à l'aperçu lors de l'hover d'un élément de la liste:
comme ca : graphisme affiche image graphisme, illustration affiche illustration ect
Modifié par newger (26 Jan 2018 - 21:02)