The store is implemented on wordpress with the help of the wooCommerce plugin. It is necessary when you hover over the image of the goods with the mouse to start the sliding images of the goods. In principle, the js of the slider itself I wrote, now it remains to integrate the script into the theme. Here I have a lot of questions. The main one is that I do not know how to bind the addresses of the pictures to the script.

The script itself:

//функция ΠΏΠΎΠ΄ΠΌΠ΅Π½Ρ‹ src //elem - Π΅Π»Π΅ΠΌΠ΅Π½Ρ‚ Π½Π°Π΄ ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΌ происходят манипуляции //way - массив с путями ΠΊ ΠΊΠ°Ρ€Ρ‚ΠΈΠ½ΠΊΠ°ΠΌ //i - счСтчик function slider(elem, way, i) { elem.setAttribute('src', way[i]); // провСряСм Ρ‡Ρ‚ΠΎ - Π±Ρ‹ счСтчик Π½Π΅ Π±Ρ‹Π» большС Π΄Π»ΠΈΠ½Π½Ρ‹ массива, ΠΈΠ½Π°Ρ‡Π΅ сбрасываСм Π² 0 if (i == way.length - 1) { i = 0; } else { i++; } //устанавливаСм Ρ‚Π°ΠΉΠΌΠ΅Ρ€ ΠΈ рСкурсивно запускаСм Ρ„ΡƒΠ½ΠΊΡ†ΠΈΡŽ саму ΠΈΠ· сСбя var timer = setTimeout(slider, 1000, elem, way, i); //добавляСм событиС Π½Π° ΠΊΠΎΠ½Ρ‚Π΅ΠΉΠ½Π΅Ρ€ с ΠΊΠ°Ρ€Ρ‚ΠΈΠ½ΠΊΠΎΠΉ Π½Π° ΡƒΡ…ΠΎΠ΄ ΠΌΡ‹ΡˆΠΈ, удаляСм Ρ‚Π°ΠΉΠΌΠ΅Ρ€ ΠΈ устанавливаСм src Π² исходноС состояниС. container.addEventListener('mouseout', function() { clearTimeout(timer); elem.setAttribute('src', way[0]); }); } //собствСнно сам массив с путями ΠΊΠ°Ρ€Ρ‚ΠΈΠ½ΠΎΠΊ var arr = [ 'http://www.stihi.ru/pics/2011/04/07/8199.jpg', 'http://autowalls.ru/walls/porsche/autowalls_ru_390.jpg', 'http://wallpaperrs.com/uploads/nature/earth-forest-mind-blowing-wallpaper-91990-142978533514.jpg', 'http://mykartinka.ru/_ph/22/664889599.jpg', ]; var container = document.querySelector('.container'); // устанавливаСм событиС Π½Π° Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΠ΅ ΠΌΡ‹ΡˆΠΈ Π½Π° ΠΊΠΎΠ½Ρ‚Π΅ΠΉΠ½Π΅Ρ€ с ΠΊΠ°Ρ€Ρ‚ΠΈΠ½ΠΊΠΎΠΉ container.addEventListener('mouseover', function(event) { //провСряСм Ρ‡Ρ‚ΠΎ событиС Π²ΠΎΠ·Π½ΠΈΠΊΠ»ΠΎ Π½Π° ΠΊΠ°Ρ€Ρ‚ΠΈΠ½ΠΊΠ΅, устанавливаСм счСтчик Π² 1 ΠΈ запускаСм Ρ„ΡƒΠ½ΠΊΡ†ΠΈΡŽ ΠΏΠΎΠ΄ΠΌΠ΅Π½Ρ‹ src if (event.target == container.querySelector('img')) { var i = 1; slider(event.target, arr, i); } else return; }); 
 <div class="container"> <img width="200" height="150" src="http://www.stihi.ru/pics/2011/04/07/8199.jpg" alt=""> </div>

As you can see, the paths to the pictures are stored in the arr array. So here's how to stuff the paths of those pictures that the store administrator will indicate. I understand the pictures are added like this: enter image description here

The php is not strong and I know the wordpress engine is not so good, tell me which way to look.

  • Is it in the product card, or in the category where is the list of products? - Bookin
  • @Bookin in the category where the list of products. - pepel_xD

1 answer 1

Good afternoon!

I recommend doing it not through JS, but not through CSS.

In the template of the page where you want to display images of goods, place the code:

 <?php global $product; //ΠŸΠΎΠ»ΡƒΡ‡Π°Π΅ΠΌ список ID ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠΉ Ρ‚ΠΎΠ²Π°Ρ€Π° $attachment_ids = $product->get_gallery_attachment_ids(); //ΠŸΠ΅Ρ€Π΅Π±ΠΈΡ€Π°Π΅ΠΌ всС изобраТСния foreach( $attachment_ids as $attachment_id ) { //Π’Ρ‹Π²ΠΎΠ΄ΠΈΠΌ ссылку Π½Π° ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅ echo $image_link = wp_get_attachment_url( $attachment_id ); } ?>

Next, displaying images must be wrapped in any container (for example, in a div, class = "product-gallery").

In CSS:

 .product-gallery img { display:none; } .product-gallery img:first-child { display:block; } .product-gallery img:last-child { display:none; } .product-gallery:hover img:first-child { display:none; } .product-gallery:hover img:last-child { display:block; }

This design will work in the presence of two images.

In general, adding a little jQuery can extend the functionality. The main idea - do not use URL images in JS itself, access images through css-classes (either in * .css itself, or through functions in * .js).

  • Thanks, note. Actually, I was looking for at that time how to get and display pictures of attachments. I don’t remember how I did, but it didn’t work out very well, since the page was loaded for a long time due to the large number of pictures. - pepel_xD