• Страница 1 из 3
  • 1
  • 2
  • 3
  • »
Модератор форума: JonMagon  
Сообщество uCoz » Вебмастеру » JavaScript, Flash и прочие технологии » Как сделать кнопу Поделиться на всех картинках сайта?
Как сделать кнопу Поделиться на всех картинках сайта?
Dogica
Сообщений: 1230
Репутация: 353
Уровень замечаний:

Сообщение # 1 | 17:40:33
Как сделать чтобы появлялись пару - тройку кнопок при наводе мыши на все картинки что есть на сайте, которые больше определенного размера (не иконки)?
Пример того что хочется вот тут:

http://www.thrillist.com/eat....-treats

картинки не в галерее и не увеличиваются..
прописаны на страничках сайта через обычный <img>


WWW.DOGICA.COM / WWW.DOGICA.ORG
K1l0
Сообщений: 104
Репутация: 26

Сообщение # 2 | 22:52:48
То, что вы скинули имеет определенную конструкцию всего навсего. Делается это через CSS и HTML+JS, если хотите чтобы открывалось еще одно окно, а не вкладка.
Dogica
Сообщений: 1230
Репутация: 353
Уровень замечаний:

Сообщение # 3 | 23:33:57
без JS никак не обойтись?
мне нужно чтобы при наведении на картинку появлялось окно (скажем типа выслывающей подсказки с несколькими ссылками на шаринг в соц сетях.. окно готовое с ссылками есть)
без счетчиков и прочего нагруза..


WWW.DOGICA.COM / WWW.DOGICA.ORG
K1l0
Сообщений: 104
Репутация: 26

Сообщение # 4 | 00:06:09
Говорю же, можно. Если элементарно показать, то:

Код
<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>
Это все примерно, чтобы понять смысл.
Dogica
Сообщений: 1230
Репутация: 353
Уровень замечаний:

Сообщение # 5 | 16:15:54
нереально обернуть каждую картинку в <div> по причине тысяч картинок на разных страницах сайта
пока нашел и пользуюсь вот таким вариантом, но он конечно подгружает кучу ненужного ******

http://uptolike.ru/widgets/pic-share.html


WWW.DOGICA.COM / WWW.DOGICA.ORG
Сообщение отредактировал Dogica - Воскресенье, 10 Май 2015, 17:11:40
†Angel†
Сообщений: 387
Репутация: 128
Уровень замечаний:

Сообщение # 6 | 17:06:39
Dogica, может этот сервис подойдёт? http://www.uptolike.ru/widgets/pic-share.html

Adguard - Рекламы не будет!
Dogica
Сообщений: 1230
Репутация: 353
Уровень замечаний:

Сообщение # 7 | 17:30:02
Цитата Dogica ()
пока нашел и пользуюсь вот таким вариантом, но он конечно подгружает кучу ненужного ******(при отключенных счетчиках на кнопках сервис продолжает подключать 25-30 непоняток с домэнов соц сетей.. - мне не нужно все это)

http://uptolike.ru/widgets/pic-share.html


Добавлено (10 Май 2015, 17:30:02)
---------------------------------------------
Цитата K1l0 ()
<div class="div_img"><div class="div_button">Здесь кнопки</div>
<img src="http://ucoz.ru/image.png">
</div>
Код хорош.. но может быть возможно применить его как нибудь к картинкам без надобности оборота их в див?
Я имею ввиду прописать в КСС что то типа .img onhover{появление всплывающего окошка} чтобы применилось ко всем картинкам на сайте без оборота в див?


WWW.DOGICA.COM / WWW.DOGICA.ORG
Сообщение отредактировал Dogica - Воскресенье, 10 Май 2015, 20:04:01
$Tiny$
Сообщений: 193
Репутация: 62

Сообщение # 8 | 20:14:38
Код
<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>

------
Цитата Dogica ()
подгружает кучу ненужного ******

------

Что ты выберешь, Нео?
Dogica
Сообщений: 1230
Репутация: 353
Уровень замечаний:

Сообщение # 9 | 20:37:25
Cпасибочки $TINY$ !
еще бы изменить так чтобы на картинки высотой меньше 150px чтобы не выдавал никаких кнопок - было бы вообще зашибись (все что меньше этого размера - иконки - шэрить их не имеет смысла)
кроме того предложенный код ставит то что в диве внутри него рядом с картинками а не поверх них
это портит структуру странички до неузнаваемости

Нео выбирает черную пилюлю (ее нет в опциях, но ведь все возможно...)
tongue


WWW.DOGICA.COM / WWW.DOGICA.ORG
Сообщение отредактировал Dogica - Воскресенье, 10 Май 2015, 20:49:55
$Tiny$
Сообщений: 193
Репутация: 62

Сообщение # 10 | 21:05:50
Так не будет на картинки 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>


Цитата Dogica ()
кроме того предложенный код ставит то что в диве внутри него рядом с картинками а не поверх них
это портит структуру странички до неузнаваемости
А как должно быть?
Dogica
Сообщений: 1230
Репутация: 353
Уровень замечаний:

Сообщение # 11 | 21:32:31
кнопки поверх картинки и при наведении мыши на картинку
это возможно или возни до фига?

Добавлено (10 Май 2015, 21:32:31)
---------------------------------------------
вы знаете... я сегодня убил с час на поиск такой фишки
и как ни странно в свете популярности шэринга ничего подходящего кроме http://www.uptolike.ru/widgets/pic-share.html не нашел
даже не верится..



WWW.DOGICA.COM / WWW.DOGICA.ORG
$Tiny$
Сообщений: 193
Репутация: 62

Сообщение # 12 | 23:06:51
Цитата Dogica ()
ставит то что в диве внутри него рядом с картинками а не поверх них
Вот теперь я понял, что вы имели в виду. Вы без стилей этих скрипт вставили?
Код
<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>
K1l0
Сообщений: 104
Репутация: 26

Сообщение # 13 | 23:09:53
Цитата $;;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
Dogica
Сообщений: 1230
Репутация: 353
Уровень замечаний:

Сообщение # 14 | 00:58:23
1) почему когда в <div> вместо текста обычного ставишь картинку + ссылку - процедура перестает работать?
2) как сделать чтобы то что в диве показывалось поверх картинки а не сверху или сбоку?


WWW.DOGICA.COM / WWW.DOGICA.ORG
K1l0
Сообщений: 104
Репутация: 26

Сообщение # 15 | 12:51:55
Цитата Dogica ()
а не сверху или сбоку?
По центру что-ли? Вы как-нибудь поконкретнее объясните.
Сообщество uCoz » Вебмастеру » JavaScript, Flash и прочие технологии » Как сделать кнопу Поделиться на всех картинках сайта?
  • Страница 1 из 3
  • 1
  • 2
  • 3
  • »
Поиск: