Biotoxsin 4 Posted October 8, 2017 Report Share Posted October 8, 2017 Здравствуйте! Вчера просматривал парочку блогов и натолкнулся на такой элемент: - На фотографиях были метки при наведении на которые всплывало окошко с текстом в некоторых с кнопкой. - Все метки на фотографиях были в разном порядке, как и разный текст. - Сам эффект наблюдался в блоге который соответственно работает на движке. Учитывая что сие творение является блогом, задался вопросом как подобное можно адаптировать под PHP (Так как текст в каждом окне разный как и позиции меток), подумалось мне о том что это может быть какой то плагин. Возможно вы знаете, уважаемые читатели, какой плагин используется и подскажете мне? (Желательно аналоги для движка WP) Link to post Share on other sites
zinalab 595 Posted October 8, 2017 Report Share Posted October 8, 2017 По описанию похоже на плагин tooltip для ВП. Link to post Share on other sites
Biotoxsin 4 Posted October 8, 2017 Author Report Share Posted October 8, 2017 1 минуту назад, zinalab сказал: По описанию похоже на плагин tooltip для ВП. Тут можно добавить ссылку на пример? Link to post Share on other sites
petroff 648 Posted October 8, 2017 Report Share Posted October 8, 2017 Хороший топик, тоже интересно. Делается это на jQuery, ajax и css, но как, всё лапы не доходили разобраться Плагина для вордпресса скорее всего нет. Я не нагуглил Link to post Share on other sites
Biotoxsin 4 Posted October 8, 2017 Author Report Share Posted October 8, 2017 4 минуты назад, petroff сказал: Хороший топик, тоже интересно. Делается это на jQuery, ajax и css, но как, всё лапы не доходили разобраться Плагина для вордпресса скорее всего нет. Я не нагуглил 5 минут назад, zinalab сказал: По описанию похоже на плагин tooltip для ВП. Пример: https://lady.mail.ru/article/497688-21-para-teploj-obuvi-na-fantazijnyh-kablukah/ На изображениях красные точки, при наведении появляется сообщение, иногда делают с большим кол-вом текста и кнопкой-ссылкой. Знаю как на css сделать подобное но чтоб адаптировать под PHP на движке без понятия. Link to post Share on other sites
petroff 648 Posted October 8, 2017 Report Share Posted October 8, 2017 1 час назад, Biotoxsin сказал: Пример: https://lady.mail.ru/article/497688-21-para-teploj-obuvi-na-fantazijnyh-kablukah/ На изображениях красные точки, при наведении появляется сообщение, иногда делают с большим кол-вом текста и кнопкой-ссылкой. Знаю как на css сделать подобное но чтоб адаптировать под PHP на движке без понятия. Да да, мэйл делает такие посты. В категории авто еще у них есть картинки сравнения автомобилей с ползунком. Завтра погуглю решение, если не забуду Link to post Share on other sites
valentino 60 Posted October 9, 2017 Report Share Posted October 9, 2017 21 час назад, Biotoxsin сказал: Здравствуйте! Вчера просматривал парочку блогов и натолкнулся на такой элемент: - На фотографиях были метки при наведении на которые всплывало окошко с текстом в некоторых с кнопкой. - Все метки на фотографиях были в разном порядке, как и разный текст. - Сам эффект наблюдался в блоге который соответственно работает на движке. Учитывая что сие творение является блогом, задался вопросом как подобное можно адаптировать под PHP (Так как текст в каждом окне разный как и позиции меток), подумалось мне о том что это может быть какой то плагин. Возможно вы знаете, уважаемые читатели, какой плагин используется и подскажете мне? (Желательно аналоги для движка WP) Тут не зависит от движка, внедряется в любой Если это просто текст, то всплывающие подсказки - это как пример, а если ссылку или кнопку, то проще модальное окно открыть... Link to post Share on other sites
Biotoxsin 4 Posted October 9, 2017 Author Report Share Posted October 9, 2017 9 минут назад, valentino сказал: Тут не зависит от движка, внедряется в любой Если это просто текст, то всплывающие подсказки - это как пример, а если ссылку или кнопку, то проще модальное окно открыть... Подобное можно назвать плагином tooltip, но проблема состоит в том чтоб в самой новости через админ панель добавлять небольшие значки на самом изображении, т.е. не слова а допустим маленькие кружочки при наведении вызывающие окошко с текстом, кнопкой, изображением или всем вместе. Link to post Share on other sites
petroff 648 Posted October 9, 2017 Report Share Posted October 9, 2017 Простейший пример на html и css. _https://jsfiddle.net/ux4qoc36/4/ К вордпрессу прикрутить не удалось, движок пока не могу поставить Link to post Share on other sites
Biotoxsin 4 Posted October 9, 2017 Author Report Share Posted October 9, 2017 5 минут назад, petroff сказал: Простейший пример на html и css. _https://jsfiddle.net/ux4qoc36/4/ К вордпрессу прикрутить не удалось, движок пока не могу поставить Я так понял, Вы плагина так и не нашли, жаль. Да на простом html и css это сделать довольно просто, задачка в том чтоб добавлять это в каждой новости к фотографиям, к тому же как я писал выше со своим заполнением текста и добавления кнопки. Поэтому думается мне без плагина тут не справиться. Link to post Share on other sites
petroff 648 Posted October 9, 2017 Report Share Posted October 9, 2017 1 час назад, Biotoxsin сказал: Я так понял, Вы плагина так и не нашли, жаль. Да на простом html и css это сделать довольно просто, задачка в том чтоб добавлять это в каждой новости к фотографиям, к тому же как я писал выше со своим заполнением текста и добавления кнопки. Поэтому думается мне без плагина тут не справиться. Я уже писал, что вряд ли есть плагин. Каждую точку все-равно придется вручную позиционировать. Хотя можно еще поискать плагин в буржунете Link to post Share on other sites
Biotoxsin 4 Posted October 9, 2017 Author Report Share Posted October 9, 2017 3 минуты назад, petroff сказал: Я уже писал, что вряд ли есть плагин. Каждую точку все-равно придется вручную позиционировать. Хотя можно еще поискать плагин в буржунете Поищем? Link to post Share on other sites
kuzovbmw 587 Posted October 9, 2017 Report Share Posted October 9, 2017 1 час назад, petroff сказал: Я уже писал, что вряд ли есть плагин. Каждую точку все-равно придется вручную позиционировать. Хотя можно еще поискать плагин в буржунете Что за глупости. Если это делается в цикле ничего руками позиционировать не надо. задается класс блоку или псевдокласс оборачивается в цикл вывода и все Link to post Share on other sites
petroff 648 Posted October 9, 2017 Report Share Posted October 9, 2017 1 час назад, kuzovbmw сказал: Что за глупости. Если это делается в цикле ничего руками позиционировать не надо. задается класс блоку или псевдокласс оборачивается в цикл вывода и все Можно поставить несколько точек на одной картинке и вывести у каждой свою подсказку на странице или в записи wordpress? Link to post Share on other sites
kuzovbmw 587 Posted October 9, 2017 Report Share Posted October 9, 2017 Конечно если Вы эту точку зададите к примеру в <span> или другом теге Link to post Share on other sites
petroff 648 Posted October 9, 2017 Report Share Posted October 9, 2017 1 час назад, kuzovbmw сказал: Конечно если Вы эту точку зададите к примеру в <span> или другом теге Вот пример. 3 фото сверху. https://auto.mail.ru/article/66380-flagmanskii_lexus_nepohozhii_na_ostalnyh_test_lexus_ls/ Как без создания отдельного файла page.php для wp и без ручного присвоения стилей каждой точке такое сделать я не представляю Link to post Share on other sites
kuzovbmw 587 Posted October 9, 2017 Report Share Posted October 9, 2017 Ну там как я и говорил есть родительский блок <div> в этом блоке лежат <span> к спанам заданы before это иконки, далее отрабатывает js который выгребает картинки к примеру по номеру, тут сложно сказать как у них, это в бекенде. На WP как и на любой другой cms можно сделать все что угодно. По поводу того что они стоят на каждой нужной детали тут какая то библиотека уже идет скорее всего Link to post Share on other sites
petroff 648 Posted October 9, 2017 Report Share Posted October 9, 2017 2 часа назад, kuzovbmw сказал: Ну там как я и говорил есть родительский блок <div> в этом блоке лежат <span> к спанам заданы before это иконки, далее отрабатывает js который выгребает картинки к примеру по номеру, тут сложно сказать как у них, это в бекенде. На WP как и на любой другой cms можно сделать все что угодно. По поводу того что они стоят на каждой нужной детали тут какая то библиотека уже идет скорее всего Ну да, вообщем-то ни о чем разговор был В 08.10.2017 в 9:02 PM, petroff сказал: Хороший топик, тоже интересно. Делается это на jQuery, ajax и css, но как, всё лапы не доходили разобраться Плагина для вордпресса скорее всего нет. Я не нагуглил На хабре встречал какие-то мануалы, помню много их там было. А так, чтоб быстренько статью на вордпрессе сделать, так это только вручную Link to post Share on other sites
Biotoxsin 4 Posted October 9, 2017 Author Report Share Posted October 9, 2017 Считаете, они к каждой новости ручками код прописывают? Link to post Share on other sites
petroff 648 Posted October 9, 2017 Report Share Posted October 9, 2017 1 час назад, Biotoxsin сказал: Считаете, они к каждой новости ручками код прописывают? Я не считаю, я уверен, что нет. Но плагинами и визуальными редакторами mail.ru скорее всего тоже не пользуется......и там не вордпресс Link to post Share on other sites
Biotoxsin 4 Posted October 9, 2017 Author Report Share Posted October 9, 2017 1 минуту назад, petroff сказал: Я не считаю, я уверен, что нет. Но плагинами и визуальными редакторами mail.ru скорее всего тоже не пользуется......и там не вордпресс <label class="dots__dot" style="left: 50%; top: 36%;"> <input class="dots__radio" type="radio" name="dots__radio"> <span class="dots__container"><span class="dots__circle"></span> <span class="dots__layer"><img class="dots__image margin_top_10" src="//auto.mail.ru/image/214552-06f8639c409a1bc1d48f12709419a147/"> </span> </span> </label> Заметил, подобные построения кода повторяются с каждой точкой, значит это точно плагин. Link to post Share on other sites
Biotoxsin 4 Posted October 9, 2017 Author Report Share Posted October 9, 2017 7 минут назад, petroff сказал: Я не считаю, я уверен, что нет. Но плагинами и визуальными редакторами mail.ru скорее всего тоже не пользуется......и там не вордпресс Разве что меняется позиция, текст/изображение и только. Link to post Share on other sites
Biotoxsin 4 Posted October 9, 2017 Author Report Share Posted October 9, 2017 8 минут назад, petroff сказал: Я не считаю, я уверен, что нет. Но плагинами и визуальными редакторами mail.ru скорее всего тоже не пользуется......и там не вордпресс Разумеется у них должна быть своя админ панель, но PHP оно и в Африке PHP, так что какие бы плагины у них не были они и на обычных cms должны работать, другое дело найти такой плагин. Link to post Share on other sites
petroff 648 Posted October 9, 2017 Report Share Posted October 9, 2017 1 час назад, Biotoxsin сказал: <label class="dots__dot" style="left: 50%; top: 36%;"> <input class="dots__radio" type="radio" name="dots__radio"> <span class="dots__container"><span class="dots__circle"></span> <span class="dots__layer"><img class="dots__image margin_top_10" src="//auto.mail.ru/image/214552-06f8639c409a1bc1d48f12709419a147/"> </span> </span> </label> Заметил, подобные построения кода повторяются с каждой точкой, значит это точно плагин. 1 час назад, Biotoxsin сказал: Разве что меняется позиция, текст/изображение и только. 1 час назад, Biotoxsin сказал: Разумеется у них должна быть своя админ панель, но PHP оно и в Африке PHP, так что какие бы плагины у них не были они и на обычных cms должны работать, другое дело найти такой плагин. Блин, Вы прикалываетесь и сообщения накручиваете что-ли? Я Вам дал ключевые слова для поиска: "ajax и css? jQuery и всплыващие подсказки"/ На Хабре есть материалы по Вашему вопросу Link to post Share on other sites
Biotoxsin 4 Posted October 9, 2017 Author Report Share Posted October 9, 2017 2 минуты назад, petroff сказал: Блин, Вы прикалываетесь и сообщения накручиваете что-ли? Я Вам дал ключевые слова для поиска: "ajax и css? jQuery и всплыващие подсказки"/ На Хабре есть материалы по Вашему вопросу Прошу прощения, не могу редактировать свои сообщения, как и ставить репутацию. Спасибо за совет, поищу. Link to post Share on other sites
Recommended Posts
Please sign in to comment
You will be able to leave a comment after signing in
Sign In Now