Sign in to follow this  
Followers 0
Biotoxsin

Всплывающие блоки с текстом.

26 posts in this topic

Здравствуйте! 

Вчера просматривал парочку блогов и натолкнулся на такой элемент:

- На фотографиях были метки при наведении на которые всплывало окошко с текстом в некоторых с кнопкой.

- Все метки на фотографиях были в разном порядке, как и разный текст.

- Сам эффект наблюдался в блоге который соответственно работает на движке.

Учитывая что сие творение является блогом, задался вопросом как подобное можно адаптировать под PHP (Так как текст в каждом окне разный как и позиции меток), подумалось мне о том что это может быть какой то плагин. Возможно вы знаете, уважаемые читатели, какой плагин используется и подскажете мне? (Желательно аналоги для движка WP)

Share this post


Link to post
Share on other sites
1 минуту назад, zinalab сказал:

По описанию похоже на плагин tooltip для ВП.

Тут можно добавить ссылку на пример?

Share this post


Link to post
Share on other sites

Хороший топик, тоже интересно. Делается это на jQuery, ajax и css, но как, всё лапы не доходили разобраться

Плагина для вордпресса скорее всего нет. Я не нагуглил

Share this post


Link to post
Share on other sites
4 минуты назад, petroff сказал:

Хороший топик, тоже интересно. Делается это на jQuery, ajax и css, но как, всё лапы не доходили разобраться

Плагина для вордпресса скорее всего нет. Я не нагуглил

 

5 минут назад, zinalab сказал:

По описанию похоже на плагин tooltip для ВП.

Пример: https://lady.mail.ru/article/497688-21-para-teploj-obuvi-na-fantazijnyh-kablukah/

На изображениях красные точки, при наведении появляется сообщение, иногда делают с большим кол-вом текста и кнопкой-ссылкой. Знаю как на css сделать подобное но чтоб адаптировать под PHP на движке без понятия.

Share this post


Link to post
Share on other sites
1 час назад, Biotoxsin сказал:

Пример: https://lady.mail.ru/article/497688-21-para-teploj-obuvi-na-fantazijnyh-kablukah/

На изображениях красные точки, при наведении появляется сообщение, иногда делают с большим кол-вом текста и кнопкой-ссылкой. Знаю как на css сделать подобное но чтоб адаптировать под PHP на движке без понятия.

Да да, мэйл делает такие посты. В категории авто еще у них есть картинки сравнения автомобилей с ползунком. Завтра погуглю решение, если не забуду

Share this post


Link to post
Share on other sites
21 час назад, Biotoxsin сказал:

Здравствуйте! 

Вчера просматривал парочку блогов и натолкнулся на такой элемент:

- На фотографиях были метки при наведении на которые всплывало окошко с текстом в некоторых с кнопкой.

- Все метки на фотографиях были в разном порядке, как и разный текст.

- Сам эффект наблюдался в блоге который соответственно работает на движке.

Учитывая что сие творение является блогом, задался вопросом как подобное можно адаптировать под PHP (Так как текст в каждом окне разный как и позиции меток), подумалось мне о том что это может быть какой то плагин. Возможно вы знаете, уважаемые читатели, какой плагин используется и подскажете мне? (Желательно аналоги для движка WP)

Тут не зависит от движка, внедряется в любой

Если это просто текст, то всплывающие подсказки - это как пример, а если ссылку или кнопку, то проще модальное окно открыть...

Share this post


Link to post
Share on other sites
9 минут назад, valentino сказал:

Тут не зависит от движка, внедряется в любой

Если это просто текст, то всплывающие подсказки - это как пример, а если ссылку или кнопку, то проще модальное окно открыть...

Подобное можно назвать плагином tooltip, но проблема состоит в том чтоб в самой новости через админ панель добавлять небольшие значки на самом изображении, т.е. не слова а допустим маленькие кружочки при наведении вызывающие окошко с текстом, кнопкой, изображением или всем вместе.

Share this post


Link to post
Share on other sites

Простейший пример на html и css.

_https://jsfiddle.net/ux4qoc36/4/

К вордпрессу прикрутить не удалось, движок пока не могу поставить

Share this post


Link to post
Share on other sites
5 минут назад, petroff сказал:

Простейший пример на html и css.

_https://jsfiddle.net/ux4qoc36/4/

К вордпрессу прикрутить не удалось, движок пока не могу поставить

Я так понял, Вы плагина так и не нашли, жаль. Да на простом html и css это сделать довольно просто, задачка в том чтоб добавлять это в каждой новости к фотографиям, к тому же как я писал выше со своим заполнением текста и добавления кнопки. Поэтому думается мне без плагина тут не справиться.

Share this post


Link to post
Share on other sites
1 час назад, Biotoxsin сказал:

Я так понял, Вы плагина так и не нашли, жаль. Да на простом html и css это сделать довольно просто, задачка в том чтоб добавлять это в каждой новости к фотографиям, к тому же как я писал выше со своим заполнением текста и добавления кнопки. Поэтому думается мне без плагина тут не справиться.

Я уже писал, что вряд ли есть плагин. Каждую точку все-равно придется вручную позиционировать. Хотя можно еще поискать плагин в буржунете

Share this post


Link to post
Share on other sites
3 минуты назад, petroff сказал:

Я уже писал, что вряд ли есть плагин. Каждую точку все-равно придется вручную позиционировать. Хотя можно еще поискать плагин в буржунете

Поищем?

Share this post


Link to post
Share on other sites
1 час назад, petroff сказал:

Я уже писал, что вряд ли есть плагин. Каждую точку все-равно придется вручную позиционировать. Хотя можно еще поискать плагин в буржунете

Что за глупости. Если это делается в цикле ничего руками позиционировать не надо. задается класс блоку или псевдокласс оборачивается в цикл вывода и все

Share this post


Link to post
Share on other sites
1 час назад, kuzovbmw сказал:

Что за глупости. Если это делается в цикле ничего руками позиционировать не надо. задается класс блоку или псевдокласс оборачивается в цикл вывода и все

Можно поставить несколько точек на одной картинке и вывести у каждой свою подсказку на странице или в записи wordpress?

Share this post


Link to post
Share on other sites

Конечно если Вы эту точку зададите к примеру в <span> или другом теге 

Share this post


Link to post
Share on other sites
1 час назад, kuzovbmw сказал:

Конечно если Вы эту точку зададите к примеру в <span> или другом теге 

Вот пример. 3 фото сверху.

https://auto.mail.ru/article/66380-flagmanskii_lexus_nepohozhii_na_ostalnyh_test_lexus_ls/

Как без создания отдельного файла page.php для wp и без ручного присвоения стилей каждой точке такое сделать я не представляю

Share this post


Link to post
Share on other sites

Ну там как я и говорил есть родительский блок <div> в этом блоке лежат <span> к спанам заданы before это иконки, далее отрабатывает js который выгребает картинки к примеру по номеру, тут сложно сказать как у них, это в бекенде. На WP как и на любой другой cms можно сделать все что угодно. По поводу того что они стоят на каждой нужной детали тут какая то библиотека уже идет скорее всего 

Share this post


Link to post
Share on other sites
2 часа назад, kuzovbmw сказал:

Ну там как я и говорил есть родительский блок <div> в этом блоке лежат <span> к спанам заданы before это иконки, далее отрабатывает js который выгребает картинки к примеру по номеру, тут сложно сказать как у них, это в бекенде. На WP как и на любой другой cms можно сделать все что угодно. По поводу того что они стоят на каждой нужной детали тут какая то библиотека уже идет скорее всего 

Ну да, вообщем-то ни о чем разговор был

В 08.10.2017 в 9:02 PM, petroff сказал:

Хороший топик, тоже интересно. Делается это на jQuery, ajax и css, но как, всё лапы не доходили разобраться

Плагина для вордпресса скорее всего нет. Я не нагуглил

На хабре встречал какие-то мануалы, помню много их там было. А так, чтоб быстренько статью на вордпрессе сделать, так это только вручную

Share this post


Link to post
Share on other sites

Считаете, они к каждой новости ручками код прописывают?

Share this post


Link to post
Share on other sites
1 час назад, Biotoxsin сказал:

Считаете, они к каждой новости ручками код прописывают?

Я не считаю, я уверен, что нет. Но плагинами и визуальными редакторами mail.ru скорее всего тоже не пользуется......и там не вордпресс

Share this post


Link to post
Share on other sites
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>

Заметил, подобные построения кода повторяются с каждой точкой, значит это точно плагин. 

Share this post


Link to post
Share on other sites
7 минут назад, petroff сказал:

Я не считаю, я уверен, что нет. Но плагинами и визуальными редакторами mail.ru скорее всего тоже не пользуется......и там не вордпресс

Разве что меняется позиция, текст/изображение и только.

Share this post


Link to post
Share on other sites
8 минут назад, petroff сказал:

Я не считаю, я уверен, что нет. Но плагинами и визуальными редакторами mail.ru скорее всего тоже не пользуется......и там не вордпресс

Разумеется у них должна быть своя админ панель, но PHP оно и в Африке PHP, так что какие бы плагины у них не были они и на обычных cms должны работать, другое дело найти такой плагин.

Share this post


Link to post
Share on other sites
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 и всплыващие подсказки"/ На Хабре есть материалы по Вашему вопросу

Share this post


Link to post
Share on other sites
2 минуты назад, petroff сказал:

 

 

Блин, Вы прикалываетесь и сообщения накручиваете что-ли? Я Вам дал ключевые слова для поиска: "ajax и css? jQuery и всплыващие подсказки"/ На Хабре есть материалы по Вашему вопросу

Прошу прощения, не могу редактировать свои сообщения, как и ставить репутацию. Спасибо за совет, поищу. 

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!


Register a new account

Sign in

Already have an account? Sign in here.


Sign In Now
Sign in to follow this  
Followers 0

  • Recently Browsing   0 members

    No registered users viewing this page.