Joomla 3.x Распахнуть картинку

Тема в разделе "Подбор расширений", создана пользователем tmpnikl, 08.10.2015.

  1. Offline

    tmpnikl Пользователь

    Регистрация:
    08.05.2015
    Сообщения:
    69
    Симпатии:
    0
    Пол:
    Мужской
    Никак не могу найти плагин, чтоб при нажатии на картинку, она распахивалась на весь экран..., сделал на неё ссылку, но когда щелкаю по ней, она не становится на весь экран, а принимает свои маленькие размеры...
    Тогда решил поискать в инете код HTML, но все ссылаются на таблицу стилей... А как в материале, например
    <p><a href="images/News/2015_07_02/DSC03454.JPG"><img class="pull-center" style="display: block; margin-left: auto; margin-right: auto;" src="images/News/2015_07_02/DSC03454.JPG" alt="" width="550" height="827" /></a></p>
    сделать масштабирование(увеличение картинки) на весь экран?
    Шаблон сделан в артисте(не мной), поэтому наверное классы это оттуда...
     
  2.  
  3. draff
    Offline

    draff Russian Joomla! Team Команда форума

    Регистрация:
    17.01.2011
    Сообщения:
    6 044
    Симпатии:
    519
    Пол:
    Мужской
  4. Offline

    tmpnikl Пользователь

    Регистрация:
    08.05.2015
    Сообщения:
    69
    Симпатии:
    0
    Пол:
    Мужской
    Спасибо, скачал, установил, сделал всё по инструкции..., в коде появился мой класс(img class="zumzum"), но это не то, нажимая на картинку, она принимает свой истинный размер, в рамочке... но этот размер меньше размера картинки которая расположена на сайте в увеличенном виде, и мне надо при нажатии на эту картинку распахнуть на весь экран, а не показать её истинный размер...

    Вот после долгих поисков накопал код увеличение картинки по клику
    onclick="this.style.width='ширина оригинального изображения в px (или auto)'"
    onmouseout="this.style.width='ширина изображения в уменьшенном виде в px'"
    Но тут два вопроса... как сделать, чтоб по следующему клику картинка принимала предыдущий вид, а не при потере фокуса мышкой..
    И второй вопрос, как сделать пропорцию высоты, а то в ширину растягивается, а высота остаётся прежней....
     
    Последнее редактирование: 09.10.2015
  5. woojin
    Offline

    woojin Местный Команда форума

    Регистрация:
    31.05.2009
    Сообщения:
    3 209
    Симпатии:
    335
    Пол:
    Мужской
    универсальный вариант
    Код (javascript):
    1. function BigSmall(pic) {
    2.     var style = pic.style.width;
    3.     var attr = pic.getAttribute("width");
    4.     var real = pic.width;
    5.     var width, newWidth;
    6.  
    7.     if (!style && !attr) {
    8.         width = real;
    9.     } else if (!style) {
    10.         width = attr;
    11.     } else {
    12.         width = style;
    13.     }
    14.     width = parseInt(width);
    15.     pic.removeAttribute("width");
    16.     pic.style.removeProperty("width");
    17.  
    18.     if (width == 120) {
    19.         newWidth=96;
    20.     } else {
    21.         newWidth=120;
    22.     }
    23.  
    24.     pic.style.setProperty("width", newWidth+"px");
    25. }

    использование:
    Код (html):
    1. ...onclick="BigSmall(this)"...

    главное саму функцию вставь в HEAD страницы

    если задавать только один параметр (высоту или ширину), тогда второй будет увеличен/уменьшен пропорционально (это всё при условии что второй параметр изначально отсутствовал)

    пример работы: BigSmall
     
    Последнее редактирование: 09.10.2015
  6. Offline

    tmpnikl Пользователь

    Регистрация:
    08.05.2015
    Сообщения:
    69
    Симпатии:
    0
    Пол:
    Мужской
    Спасибо... только подскажите на практике(в теории всё понятно)... вот захожу в джумлу 3, выбираю материал, перехожу показать код, но сколько не читал про эти хидеры, не могу увидеть в материале (HTML код), то что пишут в книжках...
    <html>
    <head>
    <title>Заголовок документа</title>
    </head>
    <body>
    Тело документа
    </body>
    </html>
    ни разу не видел в материале.... Везде приводят код CSS, но куда его вставлять в материал, таблицу стилей...в index.php, который в корне... нигде не написано... Вот сейчас думаю...где искать этот хидер и боди... буду экспериментировать везде вставлять убирать....
    Вот сейчас поставил в материале эту функцию на самом верху, в самом внизу
    <img onclick="BigSmall" src="images/News/2015_07_02/DSC03497.JPG" />
    Но по клику не раскрывается... будем искать следующее место...
     
    Последнее редактирование: 09.10.2015
  7. woojin
    Offline

    woojin Местный Команда форума

    Регистрация:
    31.05.2009
    Сообщения:
    3 209
    Симпатии:
    335
    Пол:
    Мужской
    для начала почитай что такое шаблоны в документации (Template Development) J
    после станет понятно, что это и с чем его едят и куда и как надо вставить
     
  8. Offline

    tmpnikl Пользователь

    Регистрация:
    08.05.2015
    Сообщения:
    69
    Симпатии:
    0
    Пол:
    Мужской
    спасибо... ну в общем понятно, в шаблонах, хотя в этом каталоге CSS не один файл, но поиск сузился до одного каталога... что такое шаблоны знаю, но на практике не приходилось его менять... т.к. был либо скачан, либо построен артистом...
     
  9. woojin
    Offline

    woojin Местный Команда форума

    Регистрация:
    31.05.2009
    Сообщения:
    3 209
    Симпатии:
    335
    Пол:
    Мужской
    CSS файлы тут вообще ни при чём, тебе надо вставить скрипт в заголовок страницы
    найди как это сделать (документация) и всё получится
     
  10. Offline

    tmpnikl Пользователь

    Регистрация:
    08.05.2015
    Сообщения:
    69
    Симпатии:
    0
    Пол:
    Мужской
    Не получается...
    Поиск "head", в шаблоне дал 21 файл, где встречается это слово...
    четыре из них в корневой папке шаблона
    Вставка функции в
    functions.php - белый экран
    index.php - функция вставлена между тэгами head, результат - в верху страницы выводится текст функции
    jquery.js-не понятен синтаксис, как вставляются функции
    component.php - нет изменений...
    Я очень сожалею, что не могу реализовать предложенную мне помощь... наверное английский плохо знаю...
     
  11. woojin
    Offline

    woojin Местный Команда форума

    Регистрация:
    31.05.2009
    Сообщения:
    3 209
    Симпатии:
    335
    Пол:
    Мужской
    надо искать!
     
  12. Offline

    tmpnikl Пользователь

    Регистрация:
    08.05.2015
    Сообщения:
    69
    Симпатии:
    0
    Пол:
    Мужской
    спасибо вам, моя жизнь приобретает смысл..., бороться, искать, найти и перепрятать...:)... будем искать
     

Поделиться этой страницей

Загрузка...