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

Сообщение # 31 | 17:15:41
мне нужно чтобы на все картинки кроме 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
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).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">' +    
              '<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" 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>
Т.е. просто формировать текст в зависимости от условий:
Код
(($(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
все пашет
спасибо!
Цитата $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
Цитата Dogica ()
А возможно добавить кнопку с выдачей ссылки картинки на которой находится курсор?

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

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

Сообщение # 35 | 14:37:28
Цитата Inquisitоr ()
Ну можно конечно, вопрос в том, где это применяется, в конкретном модуле?
применяется на статике HTML тут например.. http://www.dogica.com/car.html
модулей нет.


WWW.DOGICA.COM / WWW.DOGICA.ORG
Inquisitоr
Сообщений: 900
Репутация: 338

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

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

Сообщение # 37 | 14:50:10
у меня уже прилеплены 4 кнопки на каждую картинку, благодаря $TINY$ и этому топику! bye
хочу добавить 5ю со ссылкой на картинку под кнопкой которая будет показывать простую ссылку на картинку на которой курсор мыши
чтобы пользователь мог скопировать эту ссыль


WWW.DOGICA.COM / WWW.DOGICA.ORG
Сообщение отредактировал Dogica - Четверг, 04 Июн 2015, 20:48:07
$Tiny$
Сообщений: 193
Репутация: 62

Сообщение # 38 | 11:49:24
Цитата 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
Здравствуйте =) и спасибо за помощь!

Все пашет ---> 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
И вам доброго дня.
Цитата 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
ох ок... извините, это только на полигоне картинки кликабельны так что неактуально
по поводу полного пути сработало!
http://www.dogica.com/js/car.html
Спасибо!
up


WWW.DOGICA.COM / WWW.DOGICA.ORG
Сообщение отредактировал Dogica - Вторник, 23 Июн 2015, 22:32:32
dogicacom
Сообщений: 3
Репутация: 3

Сообщение # 42 | 12:35:07
Хотел выразить БОЛЬШУЮ благодарность $TINY$
Желаю вам удаче в подводном мире Юкоза и обойти все камешки, а так же вытащить котов в мешке =)
Спасибо за помощь и участие. Спасибо за поддержку
$Tiny$
Сообщений: 193
Репутация: 62

Сообщение # 43 | 13:06:33
В итоге код такой:
Код
<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
вот тут расположена готовая рабочая и обновленная версия гаджета-виджета от $TINY$,
который умеет шэрить картинки на 4 самые ходовые соц сети + показывать полный путь (url) к картинке + открывать картинку в новом окне + искать хозяина картинки (посредством сервиса TINEYE) - гаджет настроен так что на совсем маленькие картинки он не реагирует - чтобы не шэрить иконки и баннеры.

http://www.dogica.com/js/car.html
Сообщество uCoz » Вебмастеру » JavaScript, Flash и прочие технологии » Как сделать кнопу Поделиться на всех картинках сайта?
  • Страница 3 из 3
  • «
  • 1
  • 2
  • 3
Поиск: