Модератор форума: JonMagon |
Сообщество uCoz » Вебмастеру » JavaScript, Flash и прочие технологии » Как сделать кнопу Поделиться на всех картинках сайта? |
Как сделать кнопу Поделиться на всех картинках сайта? |
Как сделать чтобы появлялись пару - тройку кнопок при наводе мыши на все картинки что есть на сайте, которые больше определенного размера (не иконки)?
Пример того что хочется вот тут: http://www.thrillist.com/eat....-treats картинки не в галерее и не увеличиваются.. прописаны на страничках сайта через обычный <img> |
|
Говорю же, можно. Если элементарно показать, то:
Код <div class="div_img"> <div class="div_button">Здесь кнопки</div> <img src="http://ucoz.ru/image.png"> </div> <style> .div_img{ position:relative; z-index:5; } .div_img img{ position:relative; z-index:5; } .div_button{ position:absolute; top:0; left:0; z-index:10; opacity:0; } .div_img:hover > .div_button{ opacity:1 } </style> |
нереально обернуть каждую картинку в <div> по причине тысяч картинок на разных страницах сайта
пока нашел и пользуюсь вот таким вариантом, но он конечно подгружает кучу ненужного ****** http://uptolike.ru/widgets/pic-share.html Сообщение отредактировал Dogica - Воскресенье, 10 Май 2015, 17:11:40
|
Dogica, может этот сервис подойдёт? http://www.uptolike.ru/widgets/pic-share.html
Adguard - Рекламы не будет!
|
пока нашел и пользуюсь вот таким вариантом, но он конечно подгружает кучу ненужного ******(при отключенных счетчиках на кнопках сервис продолжает подключать 25-30 непоняток с домэнов соц сетей.. - мне не нужно все это) http://uptolike.ru/widgets/pic-share.html Добавлено (10 Май 2015, 17:30:02) --------------------------------------------- <div class="div_img"><div class="div_button">Здесь кнопки</div> <img src="http://ucoz.ru/image.png"> </div> Я имею ввиду прописать в КСС что то типа .img onhover{появление всплывающего окошка} чтобы применилось ко всем картинкам на сайте без оборота в див? Сообщение отредактировал Dogica - Воскресенье, 10 Май 2015, 20:04:01
|
Код <script type="text/javascript"> $(window).load(function() { $('img').each(function (){ $(this).replaceWith('<div class="div_img"><div class="div_button">Здесь кнопки</div><img src="' + $(this).attr("src") + '"></div>'); }); }); </script> ------ ------ Что ты выберешь, Нео? |
Cпасибочки $TINY$ !
еще бы изменить так чтобы на картинки высотой меньше 150px чтобы не выдавал никаких кнопок - было бы вообще зашибись (все что меньше этого размера - иконки - шэрить их не имеет смысла) кроме того предложенный код ставит то что в диве внутри него рядом с картинками а не поверх них это портит структуру странички до неузнаваемости Нео выбирает черную пилюлю (ее нет в опциях, но ведь все возможно...) Сообщение отредактировал Dogica - Воскресенье, 10 Май 2015, 20:49:55
|
Так не будет на картинки 150 и меньше.
Код <script type="text/javascript"> $(window).load(function() { $('img').each(function (){ if ($(this).height() > 150) { $(this).replaceWith('<div class="div_img"><div class="div_button">Здесь кнопки</div><img src="' + $(this).attr("src") + '"></div>'); } }); }); </script> А как должно быть? |
кнопки поверх картинки и при наведении мыши на картинку
это возможно или возни до фига? Добавлено (10 Май 2015, 21:32:31) |
Вот теперь я понял, что вы имели в виду. Вы без стилей этих скрипт вставили?
Код <style> .div_img{ position:relative; z-index:5; } .div_img img{ position:relative; z-index:5; } .div_button{ position:absolute; top:0; left:0; z-index:10; opacity:0; } .div_img:hover > .div_button{ opacity:1 } </style> |
Цитата $;;Tiny$;1256396 $(this).height() > 150 Так, к примеру, можно запихнуть картинку разрешением 1000 на 1000 пикселей с преднастроенным стилем width:100px;, и собственно для этого элемента код не сработает. В этом случае лучше использовать Код // берем все необходимые нам картинки var $img = $('img'); // ждем загрузки картинки браузером $img.load(function(){ // удаляем атрибуты width и height $(this).removeAttr("width") .removeAttr("height") .css({ width: "", height: "" }); // получаем заветные цифры var width = $(this).width(); var height = $(this).height(); }); // для тех браузеров, которые подгрузку с кеша не считают загрузкой, пишем следующий код $img.each(function() { var src = $(this).attr('src'); $(this).attr('src', ''); $(this).attr('src', src); }); Сообщение отредактировал K1l0 - Понедельник, 11 Май 2015, 12:49:30
|
|
| |||