Problem: unable to post the desired picture.

html fragment

<div class="wrap-img"> <div class="share-img-soc"> <div class="skin skin_light"> <div class="share-link-list social-likes social-likes_visible"> <li class="share-img fb social-likes__widget social-likes__widget_facebook" data-service="facebook" data-url="" data-media="" data-image=""><span class="social-likes__button social-likes__button_facebook"><span class="social-likes__icon social-likes__icon_facebook"></span></span><span class="social-likes__counter social-likes__counter_facebook social-likes__counter_empty"></span></li> <li class="share-img vk social-likes__widget social-likes__widget_vkontakte" data-service="vkontakte" data-image=""><span class="social-likes__button social-likes__button_vkontakte"><span class="social-likes__icon social-likes__icon_vkontakte"></span></span><span class="social-likes__counter social-likes__counter_vkontakte social-likes__counter_empty"></span></li> <li class="share-img ok social-likes__widget social-likes__widget_odnoklassniki" data-service="odnoklassniki" data-image=""><span class="social-likes__button social-likes__button_odnoklassniki"><span class="social-likes__icon social-likes__icon_odnoklassniki"></span></span></li> </div> </div> </div> <img alt="" src="/images/mclasses/714//image20.jpg" style="width: 450px; height: 600px;"> </div>

Description: when hovering over pictures, icons with social networks appear, by pressing which only that picture in the area of ​​which I made the guidance should fast. In this case, I can not post the desired picture.

Trying to do by analogy how here
jqery

 $(function(){ $('body').on('click', '.share-img', function(){ var url = $(this).closest('wrap-img').attr('src'); if($(this).hasClass('fb')){ window.open('https://www.facebook.com/sharer/sharer.php?u='+url, 'Share Facebook', config='height=300, width=500'); } }); });

main library from here

  • c fb forever so, the pictures are big enough? small atoms he doesn’t pull up - Boris Runs
  • I have a width of 600px, usually it is 600x400 - Radik

1 answer 1

It does not work, because src: is not taken: forgot the class selector (point) in 'wrap-img' and the subsequent image search in the block. It is necessary to do a search for a picture in the DOM like this:

 var url = $(this).closest('.wrap-img').children('img').attr('src')

plus it is necessary to add http://имясайта.рф , the relative path it will not accept

  • and if so $ (function () {$ ("body"). on ("click", ".share-img", function () {var urlImg = $ (this) .closest (". wrap-img") .attr (" my.site.ru " + src); $ (". share-img"). attr ("data-media", urlImg)})}) - Radik
  • It seems to me that the first option will still be faster, but in principle, if you add the necessary attributes to these blocks, of course you can. - Vladislav Chernyavsky