Как сделать кнопу Поделиться на всех картинках сайта? - Страница 3

Страница 3 из 3 « 1 2 3
Модератор форума: JonMagon

Сообщество uCoz » Вебмастеру » JavaScript, Flash и прочие технологии » Как сделать кнопу Поделиться на всех картинках сайта?

Как сделать кнопу Поделиться на всех картинках сайта?

Dogica

Сообщений: 1230

Репутация: 353

Уровень замечаний:

Сообщение # 31 | 17:15:41 14 Май 2015

мне нужно чтобы на все картинки кроме PNG был применен параметр id=box
пытался этого добиться вышеуказанным кодом

$Tiny$ посмотрите полигон.. думаю вам понравится =)
http://www.dogica.com/js/car.html

решил собирать там такие фотки.. тоже прикалывает морда этих насекомых прозумленная
хотя в реале пауки это одна из моих совсем немногих фобий

WWW.DOGICA.COM / WWW.DOGICA.ORG

Сообщение отредактировал Dogica - Четверг, 14 Май 2015, 20:27:34

$Tiny$

Сообщений: 193

Репутация: 62

Сообщение # 32 | 00:28:44 15 Май 2015

Dogica, ну тогда код можно несколько сократить:

Код

Т.е. просто формировать текст в зависимости от условий:

Код

(($(this).attr('src').toLowerCase().indexOf(".png") == -1) ? '" id="box' : '')

А это чтобы пустой alt не вставился, если его не было:

Код

(($(this).attr('alt')) ? ('" alt="' + $(this).attr('alt')) : '')

Да, я заходил на ту страничку. Страничка понравилась, однако странно, что на сайте про собак пауки теперь завелись biggrin

Dogica

Сообщений: 1230

Репутация: 353

Уровень замечаний:

Сообщение # 33 | 21:43:17 30 Май 2015

все пашет
спасибо!

Цитата $Tiny$ (

)

Страничка понравилась, однако странно, что на сайте про собак пауки теперь завелись biggrin

это ж полигон.. там всякая нечисть водится ;-)

Добавлено (30 Май 2015, 21:43:17)
---------------------------------------------
А возможно добавить кнопку с выдачей ссылки картинки на которой находится курсор?
Вот пример.. http://www.buzzfeed.com/arielle....MXy0qPy

WWW.DOGICA.COM / WWW.DOGICA.ORG

Inquisitоr

Сообщений: 900

Репутация: 338

Сообщение # 34 | 15:38:24 02 Июн 2015

Цитата Dogica (

)

А возможно добавить кнопку с выдачей ссылки картинки на которой находится курсор?

Ну можно конечно, вопрос в том, где это применяется, в конкретном модуле?

Учитесь читать, читая - вчитывайтесь, вчитываясь - вдумывайтесь, вдумываясь - понимайте, поняв - делайте. ©

Dogica

Сообщений: 1230

Репутация: 353

Уровень замечаний:

Сообщение # 35 | 14:37:28 03 Июн 2015

Цитата Inquisitоr (

)

Ну можно конечно, вопрос в том, где это применяется, в конкретном модуле?

применяется на статике HTML тут например.. http://www.dogica.com/car.html
модулей нет.

WWW.DOGICA.COM / WWW.DOGICA.ORG

Inquisitоr

Сообщений: 900

Репутация: 338

Сообщение # 36 | 14:30:45 04 Июн 2015

Dogica, на указанном как пример сайте алгоритм следующий:
У каждой картинки есть блок с кнопками, который по умолчанию скрыт.
При наведении на картинку - блок появляется, в этом блоке уже есть кнопка, которая отображает ту же ссылку, что и в img.
Т.е. Вам к каждой картинке на странице нужно прилепить кнопку, которая будет отображать ту же ссылку, что и в img.

Учитесь читать, читая - вчитывайтесь, вчитываясь - вдумывайтесь, вдумываясь - понимайте, поняв - делайте. ©

Dogica

Сообщений: 1230

Репутация: 353

Уровень замечаний:

Сообщение # 37 | 14:50:10 04 Июн 2015

у меня уже прилеплены 4 кнопки на каждую картинку, благодаря $TINY$ и этому топику! bye

хочу добавить 5ю со ссылкой на картинку под кнопкой которая будет показывать простую ссылку на картинку на которой курсор мыши
чтобы пользователь мог скопировать эту ссыль

WWW.DOGICA.COM / WWW.DOGICA.ORG

Сообщение отредактировал Dogica - Четверг, 04 Июн 2015, 20:48:07

$Tiny$

Сообщений: 193

Репутация: 62

Сообщение # 38 | 11:49:24 23 Июн 2015

Цитата Dogica (

)

хочу добавить 5ю со ссылкой на картинку под кнопкой которая будет показывать простую ссылку на картинку на которой курсор мыши

Как я понял, на buzzfeed.com при нажатии появляется окно и убирается нажатием на само изображение. Нужно ли также? В скрипт вставил так, чтобы кнопка первым кликом отображала окно, а втором убирала.

Код

<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: 160px;
bottom: 30px;
opacity:0;
display: inline;
}

.div_img:hover > .div_button{
opacity:1;
}

.copy-link {
width: 240px;
background: none repeat scroll 0% 0% #EEE;
border: 1px solid #CECECE;
border-radius: 5px;
position: absolute;
padding: 5px;
top: -55px;
left: -100px;
}

.copy-link input {
width: 100%;
}
</style>
<script type="text/javascript">
function copyurlfunction(copyimg) {
   $(copyimg).parent().find('.copy-link').css('display', (($(copyimg).parent().find('.copy-link').css('display') == 'none') ? '' : 'none'));
};
$(window).load(function() {
       $('img').not(".duplicate").each(function (){
         if ($(this).height() > 150) {
           $(this).replaceWith('<div class="div_img"><img src="' + $(this).attr("src") + '" height="' +
              $(this).height() +
              (($(this).attr('alt')) ? ('" alt="' + $(this).attr('alt')) : '') +
              '" width="' + $(this).width() +
              (($(this).attr('src').toLowerCase().indexOf(".png") == -1) ? '" id="box' : '') +
              '"><div class="div_button">' +
              '<div style="display:none;" class="copy-link">' +
              '<input value="' + $(this).attr('src') + '" type="text"></div>' +
              '<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://plus.google.com/share?url=http%3A%2F%2Fwww.dogica.com%2F" target="_blank"' +
              ' rel="nofollow"><img src="http://www.dogica.com/img/googleplus.png" height="30"  style="cursor:pointer;" ' +
              'alt="+ DOGICA®"></a><a href="http://twitter.com/intent/tweet?text=The+world' +
              's+only+free+and+complete+Encyclopedia+of+Dogs&url=http%3A%2F%2Fwww.dogica.com' +
              '%2F" target="_blank" rel="nofollow"><img src="http://www.dogica.com/img/twitter.png" height="30"' +
              ' style="cursor:pointer;" alt="TWEET DOGICA®"><a href="http://www.facebook.com/login.php?' +
              'next=https%3A%2F%2Fwww.facebook.com%2Fsharer%2Fsharer.php%3Fu%3Dhttp' +
              '%253A%252F%252Fwww.dogica.com%252F&display=popup" target="_blank"' +
              ' rel="nofollow"><img src="http://www.dogica.com/img/pinterest.png" height="30"' +
              '  style="cursor:pointer;" alt="LIKE! DOGICA®"></a>' +
              '<a href="javascript://" onclick="copyurlfunction(this);">' +
              '<img src="http://bloggingyourpassion.com/wp-content/uploads/2012/01/1325535135_Internet_link.jpg"' +
              ' height="30" style="cursor:pointer;" alt="Получить ссылку"></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" border="0" /><br />
<img class="duplicate" src="http://podrobnosti.ua/upload/news/2009/11/25/646608_3.jpg" border="0" />
<img src="http://podrobnosti.ua/upload/news/2009/11/25/646608_3.jpg" border="0" /></div>
</body>
</html>

Dogica

Сообщений: 1230

Репутация: 353

Уровень замечаний:

Сообщение # 39 | 13:31:54 23 Июн 2015

Здравствуйте =) и спасибо за помощь!

Все пашет ---> http://www.dogica.com/js/car.html

Есть 2 вопроса:

1) При нажатии на кнопку с линком показывается только часть пути к картинке... без домэна ----------- например: "/images/kartinka.jpg"
как сделать так чтобы показывался полный путь, включая домэн? ------------------ "http://www.dogica.com/images/kartinka.jpg"

2) Если кликнуть по показанному линку на картинку внутри открывшегося окошка 1 раз - идет переход на главную страничку сайта и очень тяжело отметить линк и скопировать.. как это исправить?

WWW.DOGICA.COM / WWW.DOGICA.ORG

Сообщение отредактировал Dogica - Вторник, 23 Июн 2015, 13:34:53

$Tiny$

Сообщений: 193

Репутация: 62

Сообщение # 40 | 14:29:44 23 Июн 2015

И вам доброго дня.

Цитата Dogica (

)

2) Если кликнуть по показанному линку на картинку внутри открывшегося окошка 1 раз - идет переход на главную страничку сайта и очень тяжело отметить линк и скопировать.. как это исправить?

Проблема появилась оттого, что картинки кликабельны. Будем пытаться исправить сначала это.

Код

<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: 160px;
bottom: 30px;
opacity:0;
display: inline;
}

.div_img:hover > .div_button{
opacity:1;
}

.copy-link {
width: 240px;
background: none repeat scroll 0% 0% #EEE;
border: 1px solid #CECECE;
border-radius: 5px;
position: absolute;
padding: 5px;
top: -55px;
left: -100px;
}

.copy-link input {
width: 100%;
}
</style>
<script type="text/javascript">
function copyurlfunction(copyimg) {
    $(copyimg).parent().find('.copy-link').css('display', (($(copyimg).parent().find('.copy-link').css('display') == 'none') ? '' : 'none'));
};
$(window).load(function() {
        $('img').not(".duplicate").each(function (){
          if ($(this).height() > 150) {
            $(this).replaceWith('<div class="div_img"><img src="' + $(this).attr("src") + '" height="' +
               $(this).height() +
               (($(this).attr('alt')) ? ('" alt="' + $(this).attr('alt')) : '') +
               '" width="' + $(this).width() +
               (($(this).attr('src').toLowerCase().indexOf(".png") == -1) ? '" id="box' : '') +
               '"><div class="div_button">' +
               '<div style="display:none;" class="copy-link"><a href="javascript://" onclick="$(this).children().select();">' +
               '<input value="' + $(this).attr('src') + '" type="text"></a></div>' +
               '<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://plus.google.com/share?url=http%3A%2F%2Fwww.dogica.com%2F" target="_blank"' +
               ' rel="nofollow"><img src="http://www.dogica.com/img/googleplus.png" height="30"  style="cursor:pointer;" ' +
               'alt="+ DOGICA®"></a><a href="http://twitter.com/intent/tweet?text=The+world' +
               's+only+free+and+complete+Encyclopedia+of+Dogs&url=http%3A%2F%2Fwww.dogica.com' +
               '%2F" target="_blank" rel="nofollow"><img src="http://www.dogica.com/img/twitter.png" height="30"' +
               ' style="cursor:pointer;" alt="TWEET DOGICA®"><a href="http://www.facebook.com/login.php?' +
               'next=https%3A%2F%2Fwww.facebook.com%2Fsharer%2Fsharer.php%3Fu%3Dhttp' +
               '%253A%252F%252Fwww.dogica.com%252F&display=popup" target="_blank"' +
               ' rel="nofollow"><img src="http://www.dogica.com/img/pinterest.png" height="30"' +
               '  style="cursor:pointer;" alt="LIKE! DOGICA®"></a>' +
               '<a href="javascript://" onclick="copyurlfunction(this);">' +
               '<img src="http://www.dogica.com/js/doglink.jpg"' +
               ' height="30" style="cursor:pointer;" alt="Получить ссылку"></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" border="0" /><br />
<img class="duplicate" src="http://podrobnosti.ua/upload/news/2009/11/25/646608_3.jpg" border="0" />
<img src="http://podrobnosti.ua/upload/news/2009/11/25/646608_3.jpg" border="0" /></div>
</body>
</html>

Добавлено (23 Июн 2015, 14:29:44)
---------------------------------------------

Цитата Dogica (

)

1) При нажатии на кнопку с линком показывается только часть пути к картинке... без домэна ----------- например: "/images/kartinka.jpg"
как сделать так чтобы показывался полный путь, включая домэн? ------------------ "http://www.dogica.com/images/kartinka.jpg"

Цитата $Tiny$ (

)

'<input value="' + $(this).attr('src') + '" type="text"></a></div>' +

"$(this).attr('src')" сменить на "this.src"

Dogica

Сообщений: 1230

Репутация: 353

Уровень замечаний:

Сообщение # 41 | 14:53:11 23 Июн 2015

ох ок... извините, это только на полигоне картинки кликабельны так что неактуально
по поводу полного пути сработало!
http://www.dogica.com/js/car.html
Спасибо!

WWW.DOGICA.COM / WWW.DOGICA.ORG

Сообщение отредактировал Dogica - Вторник, 23 Июн 2015, 22:32:32

dogicacom

Сообщений: 3

Репутация: 3

Сообщение # 42 | 12:35:07 30 Июл 2015

Хотел выразить БОЛЬШУЮ благодарность $TINY$
Желаю вам удаче в подводном мире Юкоза и обойти все камешки, а так же вытащить котов в мешке =)
Спасибо за помощь и участие. Спасибо за поддержку

$Tiny$

Сообщений: 193

Репутация: 62

Сообщение # 43 | 13:06:33 30 Июл 2015

В итоге код такой:

Код

<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;
position: relative;
}

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

.div_img:hover > .div_button{
opacity:1;
}

.copy-link {
width: 240px;
background: none repeat scroll 0% 0% #EEE;
border: 1px solid #CECECE;
border-radius: 5px;
position: absolute;
padding: 5px;
top: -40px;
left: -100px;
}

.copy-link input {
width: 100%;
}
</style>
<script type="text/javascript">
function copyurlfunction(copyimg) {
   $(copyimg).parent().find('.copy-link').css('display', (($(copyimg).parent().find('.copy-link').css('display') == 'none') ? '' : 'none'));
};
$(window).load(function() {
       $('img').not(".duplicate").each(function (){
         if ($(this).height() > 150) {
           $(this).replaceWith('<div class="div_img"><img src="' + $(this).attr("src") + '" height="' +
              $(this).height() +
              (($(this).attr('alt')) ? ('" alt="' + $(this).attr('alt')) : '') +
              '" width="' + $(this).width() +
              (($(this).attr('src').toLowerCase().indexOf(".png") == -1) ? '" id="box' : '') +
              '"><div class="div_button">' +
              '<div style="display:none;" class="copy-link">' +
              '<input value="' + this.src + '" type="text"></div>' +
              '<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://plus.google.com/share?url=http%3A%2F%2Fwww.dogica.com%2F" target="_blank"' +
              ' rel="nofollow"><img src="http://www.dogica.com/img/googleplus.png" height="30" style="cursor:pointer;" ' +
              'alt="+ DOGICA®"></a><a href="http://twitter.com/intent/tweet?text=The+world' +
              's+only+free+and+complete+Encyclopedia+of+Dogs&url=http%3A%2F%2Fwww.dogica.com' +
              '%2F" target="_blank" rel="nofollow"><img src="http://www.dogica.com/img/twitter.png" height="30"' +
              ' style="cursor:pointer;" alt="TWEET DOGICA®"><a href="http://www.facebook.com/login.php?' +
              'next=https%3A%2F%2Fwww.facebook.com%2Fsharer%2Fsharer.php%3Fu%3Dhttp' +
              '%253A%252F%252Fwww.dogica.com%252F&display=popup" target="_blank"' +
              ' rel="nofollow"><img src="http://www.dogica.com/img/pinterest.png" height="30"' +
              ' style="cursor:pointer;" alt="LIKE! DOGICA®"></a>' +
              '<a href="javascript://" onclick="copyurlfunction(this);">' +
              '<img src="http://bloggingyourpassion.com/wp-content/uploads/2012/01/1325535135_Internet_link.jpg"' +
              ' height="30" style="cursor:pointer;" alt="Получить ссылку"></a>' +
              '<a href="' + this.src + '" target="_blank">' +
              '<img src="http://s1.iconbird.com/ico/0912/IconBeastLite/w30h301347459086arrowbig09.png"' +
              ' height="30" style="cursor:pointer;" alt="В новом окне"></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" border="0" /><br />
<img class="duplicate" src="http://podrobnosti.ua/upload/news/2009/11/25/646608_3.jpg" border="0" />
<img src="http://podrobnosti.ua/upload/news/2009/11/25/646608_3.jpg" border="0" /></div>
</body>
</html>

Теперь есть кнопка для открытия картинки в новом окне + исправлен баг со сдвигом изображений от начального положения в некоторых браузерах.

dogicacom

Сообщений: 3

Репутация: 3

Сообщение # 44 | 13:06:54 30 Июл 2015

вот тут расположена готовая рабочая и обновленная версия гаджета-виджета от $TINY$,
который умеет шэрить картинки на 4 самые ходовые соц сети + показывать полный путь (url) к картинке + открывать картинку в новом окне + искать хозяина картинки (посредством сервиса TINEYE) - гаджет настроен так что на совсем маленькие картинки он не реагирует - чтобы не шэрить иконки и баннеры.

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

Страница 3 из 3
«
1
2
3