Please help me make wordpress on my site ( https://giffs.ru ), so that the gifs would be launched by clicking or hovering, I myself am not new to scripts yet, and all the GIF Animation Preview and WP GIF Player plugins do not work, already week I fight. Ideally, I would like something like http://fishki.net/auto/2413484-podborka-avtomobilynyh-gifok.html like this!

  • one
    You need to contact the freelancer who will do this for you for the money. Either study and try, if something does not work, then they will help you here. - Nikita
  • //ΠΏΠ΅Ρ€Π²ΠΎΠ½Π°Ρ‡Π°Π»ΡŒΠ½ΠΎ ΠΏΠΎΠΊΠ°Π·Ρ‹Π²Π°Π΅Ρ‚Π΅ ΡΡ‚Π°Ρ‚ΠΈΡ‡Π΅ΡΠΊΡƒΡŽ ΠΊΠ°Ρ€Ρ‚ΠΈΠ½ΠΊΡƒ, Π° Π½Π΅ gif // Π±Π΅Ρ€Π΅ΠΌ основной Π±Π»ΠΎΠΊ с ΠΊΠ°Ρ€Ρ‚ΠΈΠ½ΠΊΠ°ΠΌΠΈ var div = document.getElementById("div"); //отслСТиваСм ΠΊΠ»ΠΈΠΊ ΠΏΠΎ ΠΊΠ°Ρ€Ρ‚ΠΈΠ½ΠΊΠ΅ div.onclick = function(event){ var target = event.target; //замСняСм ΠΊΠ°Ρ€Ρ‚ΠΈΠ½ΠΊΡƒ Π½Π° Π³ΠΈΡ„ΠΊΡƒ target.src = "ΠΏΡƒΡ‚ΡŒ ΠΊ Π³ΠΈΡ„ΠΊΠ΅"; }; I see it like this - Dmytryk
  • I would like to know how you add gif to your post? [WPGP gif_id = "147 β€³ width =" 1200 β€³] so? Try as indicated in the readme on github: [WPGP gif_id = "147" width = "600"] - LLENN
  • So I try and in this case, too, unfortunately, the preview image is not created ((( giffs.ru/123-2 - Eugene
  • only the inscription GIF and that's it ((( - Eugene

2 answers 2

Well, for example, like this

 jQuery(document).ready(function($) { $("img").hover(function() { var src = this.src; this.src = $(this).data("img"); $(this).data("img", src); }); }); 
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <img src="https://yt3.ggpht.com/-DBNBnMLsnrs/AAAAAAAAAAI/AAAAAAAAAAA/onFqjfb9JQs/s100-ck-no-mo-rj-c0xffffff/photo.jpg" data-img="http://liubavyshka.ru/_ph/177/2/403146738.gif"/> <img src="https://yt3.ggpht.com/-A58yPmvdnIc/AAAAAAAAAAI/AAAAAAAAAAA/2o1tCSQHEG0/s100-ck-no-mo-rj-c0xffffff/photo.jpg" data-img="http://lizasimpson.com/uploads/_pages/613/simpsons-avatars-2.gif"/> <img src="https://yt3.ggpht.com/-sEESfUOW2IM/AAAAAAAAAAI/AAAAAAAAAAA/7E_dHNhe9wI/s100-ck-no-mo-rj-c0xffffff/photo.jpg" data-img="https://vignette.wikia.nocookie.net/uncyclopedia/images/1/17/Simpsons-1.gif/revision/latest?cb=20081006234733"/>

On the hit / runaway of the mouse we swap the values ​​of the attributes src and data-img

  • I understand correctly that this code should be added to functions.php and after that such an insert should have such an effect? - Eugene
  • @ Eugene unfortunately is not familiar with WordPress. Try it - Anton Shchyrov

First show a non-animated picture and replace it with a gif.