Jump to content

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


Recommended Posts

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

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

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

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

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

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

Link to post
Share on other sites

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

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

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 на движке без понятия.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Поищем?

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

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

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

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

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

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

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 и без ручного присвоения стилей каждой точке такое сделать я не представляю

Link to post
Share on other sites

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

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, но как, всё лапы не доходили разобраться

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

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

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

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

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

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>

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

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

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

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

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

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

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

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

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

 

 

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

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

Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

  • Recently Browsing   0 members

    No registered users viewing this page.

×
×
  • Create New...