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

Сообщение # 16 | 14:47:36
Цитата Dogica ()
почему когда в <div> вместо текста обычного ставишь картинку + ссылку - процедура перестает работать?
Может быть, в коде, который вы вставляете есть одинарные кавычки? Попробуйте заменить на \' их.
Dogica
Сообщений: 1230
Репутация: 353
Уровень замечаний:

Сообщение # 17 | 15:50:30
Поверх картинки так же как в примере тут

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

при наводе на картинки слева внизу на картинке появляются 2 кнопки шэринга..

код который я пытаюсь вставить вот такой - в нем нет одинарных кавычек
когда его ставишь - ничего вообще не происходит при наводе мышью на картинку - как будто функции нет

Код
<a href="http://www.pinterest.com/pin/find/?url=http%3A%2F%2Fwww.dogica.com%2F" target="_blank" rel="nofollow">
<img src="/img/pinterest.png" height="30" style="cursor:pointer;" alt="PIN DOGICA®"></a>


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

Сообщение # 18 | 14:02:44
Dogica, однако, действительно, вставил все в пустую html-страницу - отображалось плохо с теми стилями.
Вот как отредактировал:
Код
<html>
<head>
<title>Spider</title>
<script type="text/javascript" src="http:https://s4.ucoz.net/src/jquery-1.7.2.js"></script>
<style>
.div_img{
padding: 10px;
display: inline-block;
}  

.div_button{
position:relative;
right: 70px;
bottom: 30px;
opacity:0;
display: inline;
}

.div_img:hover > .div_button{
opacity:1;
}
</style>
<script type="text/javascript">
$(window).load(function() {
     $('img').each(function (){
       if ($(this).height() > 150) {
         $(this).replaceWith('<div class="div_img"><img src="' + $(this).attr("src") + '"><div class="div_button">' +  
            '<a href="http://www.pinterest.com/pin/find/?url=http%3A%2F%2Fwww.dogica.com%2F" target="_blank" rel="nofollow">' +
            '<img src="http://www.dogica.com/img/pinterest.png" height="30" style="cursor:pointer;" alt="PIN DOGICA®"></a></div></div>'
         );
       }
     });
});
</script>
</head>
<body>
<div align="center"><img src="http://img1.liveinternet.ru/images/attach/c/1/55/237/55237463_8.jpg" alt="" border="0" /><br />
<img src="http://fufel.info/uploadss/pics/68/ag-8-57.jpg" alt="" border="0" /><br />
<img src="http://podrobnosti.ua/upload/news/2009/11/25/646608_3.jpg" alt="" border="0" />
<img src="http://podrobnosti.ua/upload/news/2009/11/25/646608_3.jpg" alt="" border="0" /></div>
</body>
</html>
Пробуйте открыть в браузере такую страничку и, если сработает, переделать как там. Будем смотреть на результаты.
Dogica
Сообщений: 1230
Репутация: 353
Уровень замечаний:

Сообщение # 19 | 15:12:49
этот вариант подходит и работает как нужно, спасибо вам! hello
но осталось пару вопросов:

1) у меня все картинки прописаны с указанием width и height - как заставить скрипт чтобы учел это а не менял размеры картинок на страничках в соответствии с картинкой? (сейчас он показывает все картинки на 100% длины и ширины.. это портит разметку страничек)

2) и еще вопросик - как добавить внутрь дива больше одной кнопки от пинтереста..
хочется 2-3 кнопки от разных соц сетей

Добавлено (12 Май 2015, 15:12:49)
---------------------------------------------
вот пример работы

http://www.dogica.com/js/car.html


WWW.DOGICA.COM / WWW.DOGICA.ORG
Сообщение отредактировал Dogica - Вторник, 12 Май 2015, 15:17:40
$Tiny$
Сообщений: 193
Репутация: 62

Сообщение # 20 | 20:05:37
Так будет учитывать ширину и высоту установленные:
Код
<html>
<head>
<title>Spider</title>
<script type="text/javascript" src="http:https://s4.ucoz.net/src/jquery-1.7.2.js"></script>
<style>
.div_img{
padding: 10px;
display: inline-block;
}   

.div_button{
position:relative;
right: 70px;
bottom: 30px;
opacity:0;
display: inline;
}

.div_img:hover > .div_button{
opacity:1;
}
</style>
<script type="text/javascript">
$(window).load(function() {
      $('img').each(function (){
        if ($(this).height() > 150) {
          $(this).replaceWith('<div class="div_img"><img src="' + $(this).attr("src") +
             '" height="' + $(this).height() + '" width="' + $(this).width() + '"><div class="div_button">' +   
             '<a href="http://www.pinterest.com/pin/find/?url=http%3A%2F%2Fwww.dogica.com%2F" target="_blank" rel="nofollow">' +
             '<img src="http://www.dogica.com/img/pinterest.png" height="30" style="cursor:pointer;" alt="PIN DOGICA®"></a> ' +   
             '<a href="http://www.pinterest.com/pin/find/?url=http%3A%2F%2Fwww.dogica.com%2F" target="_blank" rel="nofollow">' +
             '<img src="http://www.dogica.com/img/pinterest.png" height="30" style="cursor:pointer;" alt="PIN DOGICA®"></a></div></div>'
          );
        }
      });
});
</script>
</head>
<body>
<div align="center"><img src="http://img1.liveinternet.ru/images/attach/c/1/55/237/55237463_8.jpg" alt="" border="0" /><br />
<img src="http://fufel.info/uploadss/pics/68/ag-8-57.jpg" alt="" border="0" /><br />
<img src="http://podrobnosti.ua/upload/news/2009/11/25/646608_3.jpg" alt="" border="0" />
<img src="http://podrobnosti.ua/upload/news/2009/11/25/646608_3.jpg" alt="" border="0" /></div>
</body>
</html>

Кнопки вот тут (сейчас их две одинаковых):
Цитата
'<a href="http://www.pinterest.com/pin/find/?url=http%3A%2F%2Fwww.dogica.com%2F" target="_blank" rel="nofollow">' +
'<img src="http://www.dogica.com/img/pinterest.png" height="30" style="cursor:pointer;" alt="PIN DOGICA®"></a> ' +
'<a href="http://www.pinterest.com/pin/find/?url=http%3A%2F%2Fwww.dogica.com%2F" target="_blank" rel="nofollow">' +
'<img src="http://www.dogica.com/img/pinterest.png" height="30" style="cursor:pointer;" alt="PIN DOGICA®"></a></div></div>'
Здесь их надо вставлять. Или нужно другую кнопку как-то по-другому на изображении расположить?
Сообщение отредактировал $Tiny$ - Вторник, 12 Май 2015, 20:07:01
Dogica
Сообщений: 1230
Репутация: 353
Уровень замечаний:

Сообщение # 21 | 20:25:14
Цитата $;;Tiny$;1256587
Здесь их надо вставлять. Или нужно другую кнопку как-то по-другому на изображении расположить?
вы поняли все правильно - кнопки должны быть просто рядом на изображении

вопрос такой - почему картинки отьезжают налево вверх ?
посмотрите этот полигон - в конце загрузки странички картинки меняют свое положение

кроме этого все теперь работает как хотелось - огромное спасибо!
думаю пригодится не только мне


WWW.DOGICA.COM / WWW.DOGICA.ORG
Сообщение отредактировал Dogica - Вторник, 12 Май 2015, 21:05:11
$Tiny$
Сообщений: 193
Репутация: 62

Сообщение # 22 | 20:34:07

Dogica, это - лишний плюс.
Цитата
.....="cursor:pointer;" alt="PIN DOGICAВ®"></a> ' +
+ '<a href="http://tw......
Либо в конце строки, либо в начале следующей. Нужен только один.
Прикрепления: 2227238.jpg (61.0 Kb)
Сообщение отредактировал $Tiny$ - Вторник, 12 Май 2015, 20:34:38
$Tiny$
Сообщений: 193
Репутация: 62

Сообщение # 23 | 20:38:21
при "right: 120px;" в ".div_button" и без "NaN" кнопки отображаются нормально.
Прикрепления: 0735966.jpg (34.8 Kb)
$Tiny$
Сообщений: 193
Репутация: 62

Сообщение # 24 | 20:47:40
Цитата $Tiny$ ()
.div_img{
padding: 10px;
display: inline-block;
}

Зря убрали. Область появления кнопок теперь шире фотографии, а фото, расположенные на одной строке - переносятся на другую.
Прикрепления: 3163976.jpg (51.9 Kb)
Dogica
Сообщений: 1230
Репутация: 353
Уровень замечаний:

Сообщение # 25 | 14:40:53
вернул инлайн
настроил под сайт.. все пашет танком!
СПАСИБО ! up hello respect

http://www.dogica.com/js/car.html

Добавлено (13 Май 2015, 14:40:53)
---------------------------------------------
По ходу тестирования обнаружились такие вещи:

1) теряется параметр alt у картинки..

2) можно сделать чтобы функция не срабатывала на все картинки у которых расширение PNG?

3) есть несколько картинок (2-3) на которых не нужны эти кнопки - возможно как нибудь извлечь их из процесса?

еще раз спасибо! =)


WWW.DOGICA.COM / WWW.DOGICA.ORG
Сообщение отредактировал Dogica - Среда, 13 Май 2015, 18:50:30
$Tiny$
Сообщений: 193
Репутация: 62

Сообщение # 26 | 19:40:44
Цитата Dogica ()
1) теряется параметр alt у картинки..
Вставляется примерно также, как и src:
Цитата $Tiny$ ()
'" height="' + $(this).height() + '" width="' + $(this).width() + '">

Цитата $Tiny$ ()
'" height="' + $(this).height() + '" alt="' + $(this).attr('alt') + '" width="' + $(this).width() + '">

Цитата Dogica ()
2) можно сделать чтобы функция не срабатывала на все картинки у которых расширение PNG?
Можно, если формат определяется по адресу.
Цитата $Tiny$ ()
if ($(this).height() > 150) {

Цитата $Tiny$ ()
if (($(this).height() > 150) && ($(this).attr('src').toLowerCase().indexOf(".png") == -1)) {

Цитата Dogica ()
3) есть несколько картинок (2-3) на которых не нужны эти кнопки - возможно как нибудь извлечь их из процесса?
Можно применить только к картинкам в определенных элементах на странице.
Цитата $Tiny$ ()
$('img').each(function (){
Только к контейнеру с id="myid"
Цитата $Tiny$ ()
$('#myid').find('img').each(function (){
Только к контейнерам с class="myclass"
Цитата $Tiny$ ()
$('.myclass').find('img').each(function (){
Это как примеры. Задавать элементы здесь как в css можно.
Dogica
Сообщений: 1230
Репутация: 353
Уровень замечаний:

Сообщение # 27 | 20:03:27
за ALT спасибо - применил
по поводу PNG - повозился.. видимо где то не так ставлю кавычки или скобочку - работать не хочет
скопируйте, пожалуйста весь код

Цитата $;;Tiny$;1256697
Можно применить только к картинкам в определенных элементах на странице.

надо наоборот - Не применить к картинкам с определенным классом или ID


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

Сообщение # 28 | 23:09:58
Цитата Dogica ()
Не применить к картинкам с определенным классом или ID
Применить к картинкам, не имеющим класс duplicate
Код
$('img').not(".duplicate")

Цитата Dogica ()
весь код
Код
<html>
<head>
<title>Spider</title>
<script type="text/javascript" src="http:https://s4.ucoz.net/src/jquery-1.7.2.js"></script>
<style>
.div_img{
padding: 10px;
display: inline-block;
}    

.div_button{
position:relative;
right: 70px;
bottom: 30px;
opacity:0;
display: inline;
}

.div_img:hover > .div_button{
opacity:1;
}
</style>
<script type="text/javascript">
$(window).load(function() {
       $('img').not(".duplicate").each(function (){
         if (($(this).height() > 150) && ($(this).attr('src').toLowerCase().indexOf(".png") == -1)) {
           $(this).replaceWith('<div class="div_img"><img src="' + $(this).attr("src") + '" height="' +
              $(this).height()+ '" alt="' + $(this).attr('alt') + '" width="' + $(this).width() + '"><div class="div_button">' +    
              '<a href="http://www.pinterest.com/pin/find/?url=http%3A%2F%2Fwww.dogica.com%2F" target="_blank" rel="nofollow">' +
              '<img src="http://www.dogica.com/img/pinterest.png" height="30" style="cursor:pointer;" alt="PIN DOGICA®"></a> ' +    
              '<a href="http://www.pinterest.com/pin/find/?url=http%3A%2F%2Fwww.dogica.com%2F" target="_blank" rel="nofollow">' +
              '<img src="http://www.dogica.com/img/pinterest.png" height="30" style="cursor:pointer;" alt="PIN DOGICA®"></a></div></div>'
           );
         }
       });
});
</script>
</head>
<body>
<div align="center"><img src="http://www.compulenta.ru/upload/iblock/782/pxyfmvbdhb.png" alt="" border="0" /><br />
<img src="http://fufel.info/uploadss/pics/68/ag-8-57.jpg" alt="" border="0" /><br />
<img class="duplicate" src="http://podrobnosti.ua/upload/news/2009/11/25/646608_3.jpg" alt="" border="0" />
<img src="http://podrobnosti.ua/upload/news/2009/11/25/646608_3.jpg" alt="" border="0" /></div>
</body>
</html>
В данном коде - первая картинка png, а третья имеет класс "duplicate", и на них код не действует.
Dogica
Сообщений: 1230
Репутация: 353
Уровень замечаний:

Сообщение # 29 | 14:55:57
up

пытаюсь применить такую конструкцию.. не пашет - что не так?
вроде кавычки и скобки правильно расставлены
единственное изменение в тени - id="box" - она нужна для всех видов картинок кроме PNG

Код
<script type="text/javascript">     
     $(window).load(function() {     
           $('img').not(".duplicate").each(function ()
{     
             if (($(this).height() > 150) && ($(this).attr('src').toLowerCase().indexOf(".png") == -1))  
                 {     
                       $(this).replaceWith('<div class="div_img"><img id="box" src="' + $(this).attr("src") + '" height="' +     
                       $(this).height()+ '" alt="' + $(this).attr('alt') + '" width="' + $(this).width() + '">
                       <div class="div_button">' + '<a href="http://www.pinterest.com/pin/find/?url=http%3A%2F%2Fwww.dogica.com%2F"
                       target="_blank" rel="nofollow">' +  '<img src="http://www.dogica.com/img/pinterest.png" height="30"     
                       style="cursor:pointer;" alt=""></a> ' +  '<a href="http://www.pinterest.com/pin/find/?url=http%3A%2F%2Fwww.dogica.com%2F"                    target="_blank" rel="nofollow">' +  '<img src="http://www.dogica.com/img/pinterest.png" height="30" style="cursor:pointer;" alt=""></a></div></div>'     
                       );     
                   }

          else if (($(this).height() > 150) && ($(this).attr('src').toLowerCase().indexOf(".png") == true))  
                 {     
               $(this).replaceWith('<div class="div_img"><img src="' + $(this).attr("src") + '" height="' +     
                  $(this).height()+ '" alt="' + $(this).attr('alt') + '" width="' + $(this).width() + '"><div class="div_button">' +        
                  '<a href="http://www.pinterest.com/pin/find/?url=http%3A%2F%2Fwww.dogica.com%2F"  target="_blank" rel="nofollow">' +     
                  '<img src="http://www.dogica.com/img/pinterest.png" height="30" style="cursor:pointer;" alt=""></a> ' +        
                  '<a href="http://www.pinterest.com/pin/find/?url=http%3A%2F%2Fwww.dogica.com%2F" target="_blank" rel="nofollow">' +     
                  '<img src="http://www.dogica.com/img/pinterest.png" height="30" style="cursor:pointer;" alt=""></a></div></div>'     
                   );     
                 }     
        };);     
        };);     
     </script>


WWW.DOGICA.COM / WWW.DOGICA.ORG
Сообщение отредактировал Dogica - Четверг, 14 Май 2015, 15:03:36
$Tiny$
Сообщений: 193
Репутация: 62

Сообщение # 30 | 15:27:15
Цитата Dogica ()
($(this).attr('src').toLowerCase().indexOf(".png") == true)
Я не понимаю, чего вы хотите добиться этим условием. Но оно выполняется тогда, когда в src ".png" стоит начиная со второго символа.
А именно, если src="1.png", например. Во всех остальных случаях - не выполнится.
Цитата Dogica ()
A%2F%2Fwww.dogica.com%2F"
target="_blank"

А должно быть:
Цитата Dogica ()
A%2F%2Fwww.dogica.com%2F"' +
+ 'target="_blank"
Так как с новой строки.
Цитата Dogica ()
height="30"
style="cursor:pointer;"

Аналогично тут.
Цитата Dogica ()
width() + '">
<div class="div
И тут.
Также:
Цитата Dogica ()
};);
};);
Но, думаю, что эти две ошибки добавил редактор форума при редактировании сообщения вами.
Цитата Dogica ()
Сообщение отредактировал Dogica - Четверг, 14 Май 2015, 15:03:36
Сообщество uCoz » Вебмастеру » JavaScript, Flash и прочие технологии » Как сделать кнопу Поделиться на всех картинках сайта?
  • Страница 2 из 3
  • «
  • 1
  • 2
  • 3
  • »
Поиск: