Модератор форума: JonMagon |
Сообщество uCoz » Вебмастеру » JavaScript, Flash и прочие технологии » Как сделать кнопу Поделиться на всех картинках сайта? |
Как сделать кнопу Поделиться на всех картинках сайта? |
мне нужно чтобы на все картинки кроме PNG был применен параметр id=box
пытался этого добиться вышеуказанным кодом $Tiny$ посмотрите полигон.. думаю вам понравится =) http://www.dogica.com/js/car.html решил собирать там такие фотки.. тоже прикалывает морда этих насекомых прозумленная хотя в реале пауки это одна из моих совсем немногих фобий Сообщение отредактировал Dogica - Четверг, 14 Май 2015, 20:27:34
|
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' : '') Код (($(this).attr('alt')) ? ('" alt="' + $(this).attr('alt')) : '') Да, я заходил на ту страничку. Страничка понравилась, однако странно, что на сайте про собак пауки теперь завелись ![]() |
все пашет
спасибо! Страничка понравилась, однако странно, что на сайте про собак пауки теперь завелись biggrin Добавлено (30 Май 2015, 21:43:17) |
|
|
Dogica, на указанном как пример сайте алгоритм следующий:
У каждой картинки есть блок с кнопками, который по умолчанию скрыт. При наведении на картинку - блок появляется, в этом блоке уже есть кнопка, которая отображает ту же ссылку, что и в img. Т.е. Вам к каждой картинке на странице нужно прилепить кнопку, которая будет отображать ту же ссылку, что и в img. Учитесь читать, читая - вчитывайтесь, вчитываясь - вдумывайтесь, вдумываясь - понимайте, поняв - делайте. ©
|
у меня уже прилеплены 4 кнопки на каждую картинку, благодаря $TINY$ и этому топику!
![]() хочу добавить 5ю со ссылкой на картинку под кнопкой которая будет показывать простую ссылку на картинку на которой курсор мыши чтобы пользователь мог скопировать эту ссыль Сообщение отредактировал Dogica - Четверг, 04 Июн 2015, 20:48:07
|
хочу добавить 5ю со ссылкой на картинку под кнопкой которая будет показывать простую ссылку на картинку на которой курсор мыши Код <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> |
Здравствуйте =) и спасибо за помощь!
Все пашет ---> http://www.dogica.com/js/car.html Есть 2 вопроса: 1) При нажатии на кнопку с линком показывается только часть пути к картинке... без домэна ----------- например: "/images/kartinka.jpg" как сделать так чтобы показывался полный путь, включая домэн? ------------------ "http://www.dogica.com/images/kartinka.jpg" 2) Если кликнуть по показанному линку на картинку внутри открывшегося окошка 1 раз - идет переход на главную страничку сайта и очень тяжело отметить линк и скопировать.. как это исправить? Сообщение отредактировал Dogica - Вторник, 23 Июн 2015, 13:34:53
|
И вам доброго дня.
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) 1) При нажатии на кнопку с линком показывается только часть пути к картинке... без домэна ----------- например: "/images/kartinka.jpg" как сделать так чтобы показывался полный путь, включая домэн? ------------------ "http://www.dogica.com/images/kartinka.jpg" "$(this).attr('src')" сменить на "this.src" |
ох ок... извините, это только на полигоне картинки кликабельны так что неактуально
по поводу полного пути сработало! http://www.dogica.com/js/car.html Спасибо! ![]() Сообщение отредактировал Dogica - Вторник, 23 Июн 2015, 22:32:32
|
В итоге код такой:
Код <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> |
вот тут расположена готовая рабочая и обновленная версия гаджета-виджета от $TINY$,
который умеет шэрить картинки на 4 самые ходовые соц сети + показывать полный путь (url) к картинке + открывать картинку в новом окне + искать хозяина картинки (посредством сервиса TINEYE) - гаджет настроен так что на совсем маленькие картинки он не реагирует - чтобы не шэрить иконки и баннеры. http://www.dogica.com/js/car.html |
| |||