Форум русской поддержки Joomla!® CMS
08.12.2016, 04:18:58 *
Добро пожаловать, Гость. Пожалуйста, войдите или зарегистрируйтесь.
Вам не пришло письмо с кодом активации?

Войти
   
   Начало   Поиск Joomla 3.0 FAQ Joomla 2.5 FAQ Joomla 1.5 FAQ Правила форума Новости Joomla Реклама Войти Регистрация Помощь  
Страниц: [1]   Вниз
  Добавить закладку  |  Печать  
Автор

Стиль для всплывающего названия картинки- как?

 (Прочитано 97 раз)
0 Пользователей и 1 Гость смотрят эту тему.
epson950
Осваиваюсь на форуме
***

Репутация: +2/-1
Offline Offline

Сообщений: 111



« : 02.11.2016, 19:53:00 »

Если картинке присвоить название (title), то при наведении на нее курсора это название всплывает в маленьком окошке.
Но окошко слишком маленькое и невзрачное.
Вопрос- как image title вывести на картинке в более красивом виде? Подойдет любой вариант- tooltip, overlay или другой, главное чтобы использовался УЖЕ ГОТОВЫЙ title (картинок много) и можно было настроить оформление.


* Image20161102184203.jpg (7.42 Кб, 197x113 - просмотрено 5 раз.)
Записан
AlekVolsk
Профи
********

Репутация: +317/-3
Offline Offline

Пол: Мужской
Сообщений: 6458



« Ответ #1 : 02.11.2016, 22:02:28 »

если используете bootstrap, то для тега, в котором прописан атрибут title допишите класс hasTooltip
если используете uikit, то для тега, в котором прописан атрибут title допишите атрибут data-uk-tooltip и дополнительно подключите tooltip.js из состава uikit
если не используете css-фреймворки, то задача нетривиальная: тут скрипт писать придется, либо отказываться от атрибута title и добавлять overlay-элемент и заверстывать его
для более детальной помощи нужно видеть сайт
Записан
epson950
Осваиваюсь на форуме
***

Репутация: +2/-1
Offline Offline

Сообщений: 111



« Ответ #2 : 02.11.2016, 23:59:42 »

На самом деле есть и bootstrap (шаблон gantry 5) и uikit (в составе jbzoo), но вот куда дописывать атрибуты я пока не понимаю, поскольку сам title вызывается через скрипт.
сейчас работает вот такая конструкция
Код:
       <?php if ($this->checkPosition('image')) : ?>
                <div class="item-image uk-divider">
                   <p align="center"><?php echo $this->renderPosition('image'); ?></p>
                </div>
<script>
        jQuery(function($) {
            newsImg = $(".item-image img");
            newsImg.after(function(){
                imgTitle = $(this).attr("title");
                if (imgTitle) return "<p>" +imgTitle+"</p>";
            });
        });
    </script>

            <?php endif; ?>
но она рушит оформление (картинки были в ряд, а становятся в столбик), поэтому ищу решение с выводом title поверх картинки.
А сайт пока дома на денвере.
Записан
AlekVolsk
Профи
********

Репутация: +317/-3
Offline Offline

Пол: Мужской
Сообщений: 6458



« Ответ #3 : 03.11.2016, 02:04:05 »

картинка внутри позиции в джибизу? тогда надо переопределять элемент jbimage и дописывать уже туда (как переопределять - на форум по джибизу)
Записан
Страниц: [1]   Вверх
  Добавить закладку  |  Печать  
 
Перейти в:  

Powered by SMF 1.1.21 | SMF © 2006, Simple Machines

Joomlaforum.ru is not affiliated with or endorsed by the Joomla! Project or Open Source Matters.
The Joomla! name and logo is used under a limited license granted by Open Source Matters
the trademark holder in the United States and other countries.

LiveInternet