Модератор форума: JonMagon |
Сообщество uCoz » Вебмастеру » JavaScript, Flash и прочие технологии » Как сделать кнопу Поделиться на всех картинках сайта? |
Как сделать кнопу Поделиться на всех картинках сайта? |
Поверх картинки так же как в примере тут
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> Сообщение отредактировал Dogica - Понедельник, 11 Май 2015, 15:51:04
|
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> |
этот вариант подходит и работает как нужно, спасибо вам!
но осталось пару вопросов: 1) у меня все картинки прописаны с указанием width и height - как заставить скрипт чтобы учел это а не менял размеры картинок на страничках в соответствии с картинкой? (сейчас он показывает все картинки на 100% длины и ширины.. это портит разметку страничек) 2) и еще вопросик - как добавить внутрь дива больше одной кнопки от пинтереста.. хочется 2-3 кнопки от разных соц сетей Добавлено (12 Май 2015, 15:12:49) --------------------------------------------- вот пример работы http://www.dogica.com/js/car.html Сообщение отредактировал Dogica - Вторник, 12 Май 2015, 15:17:40
|
Так будет учитывать ширину и высоту установленные:
Код <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> Сообщение отредактировал $Tiny$ - Вторник, 12 Май 2015, 20:07:01
|
Цитата $;;Tiny$;1256587 Здесь их надо вставлять. Или нужно другую кнопку как-то по-другому на изображении расположить? вопрос такой - почему картинки отьезжают налево вверх ? посмотрите этот полигон - в конце загрузки странички картинки меняют свое положение кроме этого все теперь работает как хотелось - огромное спасибо! думаю пригодится не только мне Сообщение отредактировал Dogica - Вторник, 12 Май 2015, 21:05:11
|
Dogica, это - лишний плюс. Цитата .....="cursor:pointer;" alt="PIN DOGICAВ®"></a> ' + + '<a href="http://tw...... Прикрепления:
2227238.jpg
(61.0 Kb)
Сообщение отредактировал $Tiny$ - Вторник, 12 Май 2015, 20:34:38
|
Прикрепления:
0735966.jpg
(34.8 Kb)
|
Зря убрали. Область появления кнопок теперь шире фотографии, а фото, расположенные на одной строке - переносятся на другую. Прикрепления:
3163976.jpg
(51.9 Kb)
|
вернул инлайн
настроил под сайт.. все пашет танком! СПАСИБО ! http://www.dogica.com/js/car.html Добавлено (13 Май 2015, 14:40:53) --------------------------------------------- По ходу тестирования обнаружились такие вещи: 1) теряется параметр alt у картинки.. 2) можно сделать чтобы функция не срабатывала на все картинки у которых расширение PNG? 3) есть несколько картинок (2-3) на которых не нужны эти кнопки - возможно как нибудь извлечь их из процесса? еще раз спасибо! =) Сообщение отредактировал Dogica - Среда, 13 Май 2015, 18:50:30
|
Вставляется примерно также, как и src:
'" height="' + $(this).height() + '" alt="' + $(this).attr('alt') + '" width="' + $(this).width() + '"> 2) можно сделать чтобы функция не срабатывала на все картинки у которых расширение PNG? if (($(this).height() > 150) && ($(this).attr('src').toLowerCase().indexOf(".png") == -1)) { 3) есть несколько картинок (2-3) на которых не нужны эти кнопки - возможно как нибудь извлечь их из процесса? |
за ALT спасибо - применил
по поводу PNG - повозился.. видимо где то не так ставлю кавычки или скобочку - работать не хочет скопируйте, пожалуйста весь код Цитата $;;Tiny$;1256697 Можно применить только к картинкам в определенных элементах на странице. надо наоборот - Не применить к картинкам с определенным классом или ID Сообщение отредактировал Dogica - Среда, 13 Май 2015, 20:22:16
|
Применить к картинкам, не имеющим класс duplicate
Код $('img').not(".duplicate") Код <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> |
пытаюсь применить такую конструкцию.. не пашет - что не так? вроде кавычки и скобки правильно расставлены единственное изменение в тени - 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> Сообщение отредактировал Dogica - Четверг, 14 Май 2015, 15:03:36
|
Я не понимаю, чего вы хотите добиться этим условием. Но оно выполняется тогда, когда в src ".png" стоит начиная со второго символа.
А именно, если src="1.png", например. Во всех остальных случаях - не выполнится. А должно быть: Так как с новой строки. Аналогично тут. И тут. Также: Но, думаю, что эти две ошибки добавил редактор форума при редактировании сообщения вами. |
| |||