это переклик с тех социальных кнопок что сделал верстальщик, на те что реально работают, но не стилизованы. (с помощью сервиса http://social-likes.js.org/ru/) (Добавляем в обертку ready )
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 |
jQuery('a.vk').click(function (e) { e.preventDefault(); jQuery('.social-likes__button_vkontakte').click(); }); jQuery('.fb').click(function (e) { e.preventDefault(); jQuery('.social-likes__button_facebook').click(); }); jQuery('a.ok').click(function (e) { e.preventDefault(); jQuery('.social-likes__widget_odnoklassniki').click(); }); jQuery('a.tw').click(function (e) { e.preventDefault(); jQuery('.social-likes__widget_twitter').click(); }); jQuery('a.ggl').click(function (e) { e.preventDefault(); jQuery('.social-likes__widget_plusone').click(); }); |
подключаем js и css с сайта http://social-likes.js.org/ru/
1 2 |
<link rel="stylesheet" href="css/social-likes_classic.css"> <script src="/js/social-likes.min.js"></script> |
вот базовая верстка — от дизайнера
1 2 3 4 5 6 7 |
<ul class="social"> <li><a href="#" class="vk" title="vkontakte">Vkontakte</a></li> <li><a href="#" class="fb" title="facebook">Facebook</a></li> <li><a href="#" class="ok" title="Odnoklassniki">Odnoklassnii</a></li> <li><a href="#" class="tw" title="Twitter">Twitter</a></li> <li><a href="#" class="ggl" title="Google+">Google+</a></li> </ul> |
вот то что дает этот сервис (http://social-likes.js.org/ru/), добавляем ниже верстки от дизайнера
1 2 3 4 5 6 7 |
<div class="social-likes" data-counters="no"> <div class="facebook" title="Поделиться ссылкой на Фейсбуке">Facebook</div> <div class="twitter" title="Поделиться ссылкой в Твиттере">Twitter</div> <div class="vkontakte" title="Поделиться ссылкой во Вконтакте">Вконтакте</div> <div class="odnoklassniki" title="Поделиться ссылкой в Одноклассниках">Одноклассники</div> <div class="plusone" title="Поделиться ссылкой в Гугл-плюсе">Google+</div> </div> |
добавляем display:none к той верстке что предоставил нам сервис
1 2 |
<div class="social-likes" data-counters="no" style="display:none"> </div> |
А теперь кликаем на иконки что сделал дизайнер)