Разворот изображения во весь экран по клику

sergey113

Осваиваюсь на форуме
37
0 / 0
равновесие

Разворот изображения во весь экран по клику

« : 26.10.2023, 14:48:54 »

Добрый день.
Хочу реализовать в статье разворот изображения во весь экран по клику.
Но не могу найти работающее беспалтное расширение для этого
Есть такие как Phoca но для его работы требуется сначала создавать в его компоненте галереи изображений и потом только использовать их в статье.
А мне хотелось бы стандартно размешать картинки на хостинге и чтобы они разварачивались во весь экран по клику.
Пробовал glightbox-master, lightbox не хотят работать

Записан

sergey113

Осваиваюсь на форуме
37
0 / 0
равновесие

Re: Разворот изображения во весь экран по клику

« Ответ #1 : 26.10.2023, 17:37:10 »

Особенная проблема это экран мобильного телефона. Сейчас нашел палгин которые на Пк работает, а на мобильном изображение уходит за экран

Записан

sivers

Живу я здесь
2597
360 / 0

Re: Разворот изображения во весь экран по клику

« Ответ #2 : 27.10.2023, 08:56:08 »

Цитата: sergey113 от 26.10.2023, 17:37:10

Особенная проблема это экран мобильного телефона. Сейчас нашел палгин которые на Пк работает, а на мобильном изображение уходит за экран

swipebox - неплохо смотрится и на десктопе, и на мобиле. посмотрите примеры у них

Записан

На связи в telegram @sivers
sivers @ inbox . ru
https://sivers.su/

sergey113

Осваиваюсь на форуме
37
0 / 0
равновесие

Re: Разворот изображения во весь экран по клику

« Ответ #3 : 27.10.2023, 23:55:06 »

Цитата: sivers от 27.10.2023, 08:56:08

swipebox - неплохо смотрится и на десктопе, и на мобиле. посмотрите примеры у них

Это платное расширение. А есть, что-то бесплатное?

Записан

sivers

Живу я здесь
2597
360 / 0

Re: Разворот изображения во весь экран по клику

« Ответ #4 : 28.10.2023, 00:30:48 »

Где хоть оно платное? Тут смотрели?

Спойлер

[свернуть]

Записан

На связи в telegram @sivers
sivers @ inbox . ru
https://sivers.su/

sergey113

Осваиваюсь на форуме
37
0 / 0
равновесие

Re: Разворот изображения во весь экран по клику

« Ответ #5 : 29.10.2023, 02:12:12 »

Цитата: sivers от 28.10.2023, 00:30:48

Где хоть оно платное? Тут смотрели?
Спойлер
[свернуть]

Нет смотрел другое дополнение. Сейчас много одноименных плагинов поэтому ссылка очень помогла.
Иначе получается сломаный телефон.
Этот плагин у меня не заработал.
А для какой версии Joomla этот плагин?
Вы давно последний раз им пользовались?

Записан

sivers

Живу я здесь
2597
360 / 0

Re: Разворот изображения во весь экран по клику

« Ответ #6 : 29.10.2023, 12:32:36 »

Не так давно. Он к Joomla никак не привязан. Требует только наличия jquery на сайте.

Записан

На связи в telegram @sivers
sivers @ inbox . ru
https://sivers.su/

sergey113

Осваиваюсь на форуме
37
0 / 0
равновесие

Re: Разворот изображения во весь экран по клику

« Ответ #7 : 29.10.2023, 21:18:22 »

Цитата: sivers от 29.10.2023, 12:32:36

Не так давно. Он к Joomla никак не привязан. Требует только наличия jquery на сайте.

jquery имеется и работает. Проверял таким скриптом

Код

<body>
<script type="text/javascript">
$(document).ready(function(){
alert(jQuery.fn.jquery);
});
</script>
</body>

Версия 3.6.3
Настраивал сначал на хостинге. После того как там не заработало стал пробовать локально в докере поднял Joomla.
Прописывал в header такие инструкции:

Код

<script src="js/jquery.swipebox.js"></script>
<link rel="stylesheet" href="css/swipebox.css">

При том что в докере пути такие

Код

/var/www/html/js
/var/www/html/css

Менял версию jquery плагином jQuery Easy на
3.5.1
3.7.0
Скопированы файлы с правами 644
swipebox.css
swipebox.min.css
jquery.swipebox.js
jquery.swipebox.min.js

Но добавление к изображению ссылки images/banners/banner.jpg с классом
swipebox
не работает.
Может можно подсказать в чем дело?
Зачем то сама Joomla добавляет слешь ( /> ) к закрывающей скобке в

Код

<a href="images/banners/banner.jpg" class="swipebox"><img src="images/banners/banner.jpg" alt="banner" width="1140" height="600" /></a>

Это может быть причинной того что галлерея не работает?

Записан

sivers

Живу я здесь
2597
360 / 0

Re: Разворот изображения во весь экран по клику

« Ответ #8 : 29.10.2023, 21:44:36 »

Цитата: sergey113 от 29.10.2023, 21:18:22

<script src="js/jquery.swipebox.js"></script>

Это надо побдключать после jQuery. Проверьте у себя очередность загрузку скриптов.

Сам слайдер можно активировать и js-командой:

Код

<script type="text/javascript">
jQuery(function(){
  jQuery( '.swipebox' ).swipebox();
});
</script>

Записан

На связи в telegram @sivers
sivers @ inbox . ru
https://sivers.su/

sergey113

Осваиваюсь на форуме
37
0 / 0
равновесие

Re: Разворот изображения во весь экран по клику

« Ответ #9 : 29.10.2023, 23:22:23 »

Цитата: sivers от 29.10.2023, 21:44:36

Это надо побдключать после jQuery. Проверьте у себя очередность загрузку скриптов.

Сам слайдер можно активировать и js-командой:
Код
<script type="text/javascript">
jQuery(function(){
  jQuery( '.swipebox' ).swipebox();
});
</script>

Скрипт вставлял в <body> забыл про это написать. Не работает.
jQuery включен в поставку Joomla его не подключаю отдельно (пробовал и подключать отдельно, нет разницы)

Записан

sivers

Живу я здесь
2597
360 / 0

Re: Разворот изображения во весь экран по клику

« Ответ #10 : 30.10.2023, 08:48:32 »

Посмотрите консоль ошибок JS (ошибки могут мешать).
Попробуйте инициализировать слайдер из консоли.

Записан

На связи в telegram @sivers
sivers @ inbox . ru
https://sivers.su/

sergey113

Осваиваюсь на форуме
37
0 / 0
равновесие

Re: Разворот изображения во весь экран по клику

« Ответ #11 : 30.10.2023, 15:09:17 »

Цитата: sivers от 30.10.2023, 08:48:32

Посмотрите консоль ошибок JS (ошибки могут мешать).
Попробуйте инициализировать слайдер из консоли.

Есть такая ошибка

Код

jquery.swipebox.js:963 Uncaught ReferenceError: jQuery is not defined
    at jquery.swipebox.js:963:22

Непонятно только почему тестовый скрипт на наличие jQuery выполняется.
А как инициализируется из консоли слайдер?

Записан

sivers

Живу я здесь
2597
360 / 0

Re: Разворот изображения во весь экран по клику

« Ответ #12 : 30.10.2023, 15:20:12 »

Цитата: sergey113 от 30.10.2023, 15:09:17

А как инициализируется из консоли слайдер?

В консоли JS написать это:

Код

jQuery( '.swipebox' ).swipebox();

Там же можно написать "jQuery" и сразу увидеть - загружен он или нет.

Записан

На связи в telegram @sivers
sivers @ inbox . ru
https://sivers.su/

sivers

Живу я здесь
2597
360 / 0

Re: Разворот изображения во весь экран по клику

« Ответ #13 : 30.10.2023, 15:21:48 »

Цитата: sergey113 от 30.10.2023, 15:09:17

Непонятно только почему тестовый скрипт на наличие jQuery выполняется.

Посмотрите исходный код сайта - скрипт слайдера обязательно должен подключаться после jQuery. Если у вас наоборот, то это может быть причиной указанной ошибки.

Записан

На связи в telegram @sivers
sivers @ inbox . ru
https://sivers.su/

sergey113

Осваиваюсь на форуме
37
0 / 0
равновесие

Re: Разворот изображения во весь экран по клику

« Ответ #14 : 30.10.2023, 18:21:48 »

Чтобы исключить влияние шаблона и хостинга а попробовал на casssiopeia и стороннем бесплатном шаблоне у которого есть в настройках поля для вставки своего кода в любое место. Поэтому маловероятно, что код загружается в неправильном порядке везде на разных шаблонах, у хостера и в докере. Причем версии Joomla отлечались редакциями.
Вот такие выдает ответу на запук jquery и самого скрипта.
Query

<f (e,t){return new S. fn.init(e,t)}

> jQuery('.swipebox').swipebox();

✪ ► Uncaught TypeError: jQuery(...).swipebox is not a function at <anonymous>:1:23

VM1883:1

> jQuery('.swipebox').swipebox();

Записан

sivers

Живу я здесь
2597
360 / 0

Re: Разворот изображения во весь экран по клику

« Ответ #15 : 30.10.2023, 21:40:32 »

Цитата: sergey113 от 30.10.2023, 18:21:48

Поэтому маловероятно, что код загружается в неправильном порядке

Лучше посмотреть в исходный код страницы, чем гадать )

Если хочется протестировать работоспособность слайдера - создайте статичную html-страницу (без Joomla - просто файл) и посмотрите что получится.

Ну, или ищите готовые расширения для джумлы, но этим сильно сузите себе доступные варианты.

Записан

На связи в telegram @sivers
sivers @ inbox . ru
https://sivers.su/

sergey113

Осваиваюсь на форуме
37
0 / 0
равновесие

Re: Разворот изображения во весь экран по клику

« Ответ #16 : 31.10.2023, 01:56:57 »

Цитата: sivers от 30.10.2023, 21:40:32

Лучше посмотреть в исходный код страницы, чем гадать )

Если хочется протестировать работоспособность слайдера - создайте статичную html-страницу (без Joomla - просто файл) и посмотрите что получится.

Ну, или ищите готовые расширения для Joomla, но этим сильно сузите себе доступные варианты.

Мне нужна не статичная страница, а работа расширения в CMS Joomla
А это расширение не работает...
Другие то расширения есть, но там на мобильных экранах есть ошибки отображения и некоторые используют свои компоненты в которыых надо делать свои подпапки и библиотеки. Потом перестанет работать и надо будет все переделывать.

Записан

sergey113

Осваиваюсь на форуме
37
0 / 0
равновесие

Re: Разворот изображения во весь экран по клику

« Ответ #17 : 31.10.2023, 12:18:52 »

Убрал лишние подгрузки шаблон Joomla от других плагинов которые тестировал.
Переместил загрузку скриптов в конец header и получил такой ответ на вызов swipbox

Код

jQuery('.swipebox').swipebox();
Object { settings: {…}, init: init() }

Но при этом при клике на изображение оно открывается как это делается обычно для сайта Joomla, но не в сплывающем контейнере как у плагина swipebox

Записан

sivers

Живу я здесь
2597
360 / 0

Re: Разворот изображения во весь экран по клику

« Ответ #18 : 31.10.2023, 13:10:10 »

"Пилите, Шура, пилите..." (с)

Когда допилите - будете знать точно почему оно не работало.
Ну или покажете потом что получилось.

Записан

На связи в telegram @sivers
sivers @ inbox . ru
https://sivers.su/

sergey113

Осваиваюсь на форуме
37
0 / 0
равновесие

Re: Разворот изображения во весь экран по клику

« Ответ #19 : 31.10.2023, 15:58:16 »

Цитата: sivers от 31.10.2023, 13:10:10

"Пилите, Шура, пилите..." (с)

Когда допилите - будете знать точно почему оно не работало.
Ну или покажете потом что получилось.

Мне надо изучить курс по jquery чтобы легче решить задачу или что-то иное?
Какие обучающие источники посмотреть? Посоветуйте, пожалуйста, не хватает скиллаю

Записан

sivers

Живу я здесь
2597
360 / 0

Re: Разворот изображения во весь экран по клику

« Ответ #20 : 31.10.2023, 16:12:44 »

Ничего, кроме перечисленного выше. Отсутствие js-ошибок и правильный порядок загрузки скриптов. И еще не должно быть дублей jquery.
Ну или покажите свою страницу.

Записан

На связи в telegram @sivers
sivers @ inbox . ru
https://sivers.su/

sergey113

Осваиваюсь на форуме
37
0 / 0
равновесие

Re: Разворот изображения во весь экран по клику

« Ответ #21 : 31.10.2023, 17:27:37 »

В итоге я смог запустить плагин только после того как скопировал все папки плагина в каталог в папке шаблона.
Но он нормально работает только на ПК и когда подключаешь его родную jQuery 3.5.1. На мобильном телефоне изображение улетает за экран и надо его ловить. Нет кнопки закрыть тач не распознается. Если используешь более новую 3.6.3 из поставки joomla, то плагин перестает работать.
Не знаю зачем Вы мне посоветовали это косячное убожество. Я потратил много времени на эту подделку.
Даже доку по старту разработчики не смогли написать нормально. На сайте и в плагине разные инструкции и по ним плагин не запустишь.

« Последнее редактирование: 31.10.2023, 21:08:32 от sergey113 »

Записан

sivers

Живу я здесь
2597
360 / 0

Re: Разворот изображения во весь экран по клику

« Ответ #22 : 31.10.2023, 21:17:02 »

У меня он работал. И ничего толкового, в плане поддержки десктопа и мобил, не попадалось. Если найдете - расскажите.

Записан

На связи в telegram @sivers
sivers @ inbox . ru
https://sivers.su/

Vastriet

Захожу иногда
405
11 / 0

Re: Разворот изображения во весь экран по клику

« Ответ #23 : 31.10.2023, 23:13:24 »

да уж
чел на дровах силит, и как минимум на кривых и ему не нравится грамотный совет

Записан

beliyadm

Легенда
9758
1665 / 66
Севастополь, Россия

Re: Разворот изображения во весь экран по клику

« Ответ #24 : 01.11.2023, 07:12:33 »

100500 лет использую Fancybox и с версии 1.0 нет никаких проблем (тогда про адаптивную верстку еще даже не знали)
Нахрена вы изобретаете велосипед на пустом месте....

Записан

Все истины, которые я хочу вам изложить, — бесстыдная ложь. Сделать всё хорошо
TLG: @Beliyadm

sergey113

Осваиваюсь на форуме
37
0 / 0
равновесие

Re: Разворот изображения во весь экран по клику

« Ответ #25 : 01.11.2023, 11:03:07 »

Цитата: beliyadm от 01.11.2023, 07:12:33

100500 лет использую Fancybox и с версии 1.0 нет никаких проблем (тогда про адаптивную верстку еще даже не знали)
Нахрена вы изобретаете велосипед на пустом месте....

Эти компоненты платные? На сайте разработчика есть только раздел Pricing. Free downloads не обнаружил.

« Последнее редактирование: 01.11.2023, 11:11:15 от sergey113 »

Записан

sergey113

Осваиваюсь на форуме
37
0 / 0
равновесие

Re: Разворот изображения во весь экран по клику

« Ответ #26 : 01.11.2023, 11:12:39 »

Цитата: sergey113 от 01.11.2023, 11:03:07

Эти компоненты платные? На сайте разработчика есть только раздел Pricing. Free downloads не обнаружил.

Загрузил плагин чере CDN

Код

<script src="https://cdn.jsdelivr.net/npm/@fancyapps/ui@5.0/dist/fancybox/fancybox.umd.js"></script>
<link
  rel="stylesheet"
  href="https://cdn.jsdelivr.net/npm/@fancyapps/ui@5.0/dist/fancybox/fancybox.css"
/>

Source code не нашел.
На мобильном устройстве изображение улетает за экран.

Записан

beliyadm

Легенда
9758
1665 / 66
Севастополь, Россия

Re: Разворот изображения во весь экран по клику

« Ответ #27 : 01.11.2023, 12:12:53 »

Цитата: sergey113 от 01.11.2023, 11:12:39

Загрузил плагин чере CDN
Код
<script src="https://cdn.jsdelivr.net/npm/@fancyapps/ui@5.0/dist/fancybox/fancybox.umd.js"></script>
<link
  rel="stylesheet"
  href="https://cdn.jsdelivr.net/npm/@fancyapps/ui@5.0/dist/fancybox/fancybox.css"
/>
Source code не нашел.
На мобильном устройстве изображение улетает за экран.

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

Записан

Все истины, которые я хочу вам изложить, — бесстыдная ложь. Сделать всё хорошо
TLG: @Beliyadm

gartes

Завсегдатай
1859
142 / 6
Е = mс²

Re: Разворот изображения во весь экран по клику

« Ответ #28 : 01.11.2023, 12:45:39 »

Цитата: beliyadm от 01.11.2023, 12:12:53

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

Сегодня прочитал тему - первый пост - и сразу - fancybox -- Все работает === то не руки из известного места - то просто человек не знает как это в коде решать!
На мобильном устройстве изображение улетает за экран. - то смотрите на z-index - скорее всего что у какого то элемента он запредельный - и fancybox становится рядом - за пределом экрана !

Записан

Плагин доставки НОВАЯ ПОЧТА для VirtueMart 3.x
Плагин оплаты картами Visa/MasterCard VirtueMart 2.x-3.x

sergey113

Осваиваюсь на форуме
37
0 / 0
равновесие

Re: Разворот изображения во весь экран по клику

« Ответ #29 : 01.11.2023, 13:58:02 »

Цитата: beliyadm от 01.11.2023, 12:12:53

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

Ребята, я не против что у меня руки из одного места. Для себя делаю сайтик. Не профессионал.
Почему я должен контролировать Z параметр? Ведь наверно хороший плагин это делает сам?
к тому же в get started не сказано где это настраивается.

« Последнее редактирование: 01.11.2023, 14:54:59 от sergey113 »

Записан

Верхнее меню в версии для ПК как сделать на весь экран? Автор web1	Ответов: 0 Просмотров: 240	23.10.2025, 19:52:02 от web1
#joomlaImage://local-images/... при добавлении изображения Автор kysin	Ответов: 8 Просмотров: 2088	31.12.2023, 16:45:35 от sivers
Yootheme ZOO - Не работает кнопка выбора изображения при вставке Автор ntxp	Ответов: 1 Просмотров: 557	09.05.2023, 14:39:19 от ntxp
Увеличение картинки по клику Автор KingSnake	Ответов: 8 Просмотров: 3223	13.03.2023, 18:19:31 от Doctor Death
Простейший модуль с выбором изображения через media-field Автор goga_pgasovav	Ответов: 2 Просмотров: 904	20.01.2023, 00:10:36 от goga_pgasovav

4AI для Joomla Готовим Контент с Помощью Искусственного Интеллекта!Ещё одно видео на канале Фёдора...

Модуль Joomla 6 - красивый обратный отсчет. Видео от Фёдора Васильева

Метод registerListeners() в CMSPlugin в плагинах планируется удалить в Joomla 7.0

Похожие темы