Проблема Как в модуль widgetkit accordion вставить модуль widgetkit gallery?

Тема в разделе "ZOO", создана пользователем Vermilion88, 23.03.2014.

  1. Offline

    Vermilion88 Недавно здесь

    Регистрация:
    11.01.2013
    Сообщения:
    15
    Симпатии:
    0
    Пол:
    Мужской
    Проблема вся в том что хочу скрыть много фотографий под сполер(accordion)... Ни один модуль widgetkit(slideshow, slideset) не работает внутри модуля аккордион...

    как заставить работать? версия джумлы 3.2.3, версия Zoo 3.1.6, версия widgetkit 1.2.2

    Только что обновил версию widgetkit до 1.47 ( все тоже самое)
     
    Последнее редактирование модератором: 23.03.2014
  2.  
  3. OlegM
    Offline

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

    Регистрация:
    12.04.2007
    Сообщения:
    4 356
    Симпатии:
    370
    Пол:
    Мужской
    Как вставляется спойлер? Его содержимое обрабатывается плагинами?
     
  4. Offline

    Vermilion88 Недавно здесь

    Регистрация:
    11.01.2013
    Сообщения:
    15
    Симпатии:
    0
    Пол:
    Мужской
    Выставляю так...

    Сначала создаю материал через компонент ZOO...
    Иду далее в "компоненты-widgetkit-accordion
    Создаю новый, пишу туда что хочу убрать под спойлер и в последний добавляю строчку типа [widgetkit id=57] созданную в "widgetkit-gallery"
    Затем в материал в компоненте Zoo вставляю такую же строчку типа [widgetkit id=57], но только из компонента widgetkit...

    На деле сам по себе widgetkit-gallery работает, если допустим сделать стиль - полароид, стена и еще парочку, где фото выводится в рамочке... но мне нужен другой стиль, а он выводит просто в спойлере кнопочки - туда, сюда и черный квадрат при нажимании на них! Если просто вставить строчку типа [widgetkit id=57] из widgetkit gallety в материал созданный с помошью ZOO, то все нормально... а вот спойлер не могу убрать...

    Так же пробовал демо матералы всех других модулей -
    • Map
    • Media Player
    • Slideset
    • Slideshow
    Все тоже самое, какие то стили выводятся, а какие то нет!
     
  5. OlegM
    Offline

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

    Регистрация:
    12.04.2007
    Сообщения:
    4 356
    Симпатии:
    370
    Пол:
    Мужской
    Ну так проблема не в widgetkit, а лишь в некоторых стилях. Возможно проблема в CSS, его и надо править.
     
  6. Offline

    Vermilion88 Недавно здесь

    Регистрация:
    11.01.2013
    Сообщения:
    15
    Симпатии:
    0
    Пол:
    Мужской
    Я понимаю что это где то в стилях проблема, но неужели никто никогда до меня так не делал? не убирал галерею под спойлер?

    Как мне исправить данную ситуацию?
     
  7. OlegM
    Offline

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

    Регистрация:
    12.04.2007
    Сообщения:
    4 356
    Симпатии:
    370
    Пол:
    Мужской
    Бывали разные случаи... :) Но я не скажу, какую строчку надо поправить, чтобы заработало, вживую не видя проблемы.

    Как исправить уже сказал - править CSS стиля. И надо проверить на ошибки JavaScript (на всякий случай).
     
  8. Offline

    Vermilion88 Недавно здесь

    Регистрация:
    11.01.2013
    Сообщения:
    15
    Симпатии:
    0
    Пол:
    Мужской
    Код (css):
    1. /* Copyright (C) YOOtheme GmbH, YOOtheme Proprietary Use License ([URL='http://http://www.yootheme.com/license']http://www.yootheme.com/license) */
    2.  
    3. /*
    4. * Widgetkit Gallery: Showcase Box Style
    5. */
    6.  
    7.  
    8. .wk-gallery-showcasebox .slides-container {
    9.     border-radius: 5px 5px 0 0;
    10.     overflow: hidden;
    11. }
    12.  
    13.  
    14. /* Slideshow: Buttons
    15. ----------------------------------------------------------------------------------------------------*/
    16.  
    17. .wk-gallery-showcasebox .slides-container { position: relative; }
    18.  
    19. .wk-gallery-showcasebox .slides-container:hover .next,
    20. .wk-gallery-showcasebox .slides-container:hover .prev {
    21.     top: 50%;
    22.     width: 50px;
    23.     height: 50px;
    24.     margin-top: -25px;
    25.     background: url(images/buttons.png) 0 50px no-repeat;
    26. }
    27.  
    28. .wk-gallery-showcasebox .slides-container:hover .next {
    29.     right: 30px;
    30.     background-position: 0 0;
    31. }
    32.  
    33. .wk-gallery-showcasebox .slides-container:hover .prev {
    34.     left: 30px;
    35.     background-position: 0 -50px;
    36. }
    37.  
    38.  
    39. /* Slideset: Container
    40. ----------------------------------------------------------------------------------------------------*/
    41.  
    42. .wk-gallery-showcasebox .wk-slideset > div {
    43.     padding: 0 60px;
    44.     border: 1px solid #222;
    45.     background: #555;
    46.     background: -moz-linear-gradient(top, #444 0%, #555 7%, #444 100%);
    47.     background: -webkit-linear-gradient(top, #444 0%, #555 7%, #444 100%);
    48.     background: -o-linear-gradient(top, #444 0%, #555 7%, #444 100%);
    49.     background: linear-gradient(to bottom, #444 0%, #555 7%, #444 100%);
    50.     box-shadow: 0 0 20px rgba(0,0,0,0.5) inset,
    51.                 0 0 50px rgba(0,0,0,0.2) inset;
    52.     border-radius: 0 0 5px 5px;
    53. }
    54. .wk-gallery-showcasebox .wk-slideset.no-buttons > div { padding: 0; }
    55.  
    56. .wk-gallery-showcasebox .wk-slideset .sets { padding: 15px 0; }
    57.  
    58.  
    59. /* Slideset: Content
    60. ----------------------------------------------------------------------------------------------------*/
    61.  
    62. .wk-gallery-showcasebox .wk-slideset .set > li > div {
    63.     margin: 0 3px;
    64.     padding: 1px;
    65.     background: #333;
    66.     background: -moz-linear-gradient(top, #333 80%, #222 100%);
    67.     background: -webkit-linear-gradient(top, #333 80%, #222 100%);
    68.     background: -o-linear-gradient(top, #333 80%, #222 100%);
    69.     background: linear-gradient(to bottom, #333 80%, #222 100%);
    70.     border-radius: 5px;
    71.     cursor: pointer;
    72. }
    73.  
    74. .wk-gallery-showcasebox .wk-slideset .set > li > div > div {
    75.     padding: 5px;
    76.     background: #444;
    77.     border-radius: 5px;
    78.     box-shadow: 0 1px 0 rgba(255,255,255,0.1) inset;
    79. }
    80.  
    81. .wk-gallery-showcasebox .wk-slideset .set > li > div > div > img {
    82.     display: block;
    83.     border-radius: 2px;
    84.     box-shadow: 0 0 0 1px rgba(0,0,0,0.2);
    85.     opacity: 0.8;
    86. }
    87.  
    88. /* Hover */
    89. .wk-gallery-showcasebox .wk-slideset .set > li:hover > div {
    90.     background: #333;
    91.     background: -moz-linear-gradient(top, #333, #222);
    92.     background: -webkit-linear-gradient(top, #333, #222);
    93.     background: -o-linear-gradient(top, #333, #222);
    94.     background: linear-gradient(to bottom, #333, #222);
    95.     box-shadow: 0 2px 3px rgba(0,0,0,0.3);
    96. }
    97.  
    98. .wk-gallery-showcasebox .wk-slideset .set > li:hover > div > div {
    99.     background: #666;
    100.     background: -moz-linear-gradient(top, #666, #555);
    101.     background: -webkit-linear-gradient(top, #666, #555);
    102.     background: -o-linear-gradient(top, #666, #555);
    103.     background: linear-gradient(to bottom, #666, #555);
    104. }
    105.  
    106. .wk-gallery-showcasebox .wk-slideset .set > li:hover > div > div > img { opacity: 1; }
    107.  
    108. /* Active */
    109. .wk-gallery-showcasebox .wk-slideset .set > li.active > div {
    110.     background: #222;
    111.     background: -moz-linear-gradient(top, #111, #222);
    112.     background: -webkit-linear-gradient(top, #111, #222);
    113.     background: -o-linear-gradient(top, #111, #222);
    114.     background: linear-gradient(to bottom, #111, #222);
    115.     box-shadow: 0 0 1px rgba(255,255,255,0.2);
    116. }
    117.  
    118. .wk-gallery-showcasebox .wk-slideset .set > li.active > div > div {
    119.     background: #444;
    120.     box-shadow: 0 1px 4px rgba(0,0,0,0.7) inset;
    121. }
    122.  
    123. .wk-gallery-showcasebox .wk-slideset .set > li.active > div > div > img { opacity: 1; }
    124.  
    125.  
    126. /* Slideset: Buttons
    127. ----------------------------------------------------------------------------------------------------*/
    128.  
    129. .wk-gallery-showcasebox .wk-slideset > div { position: relative; }
    130.  
    131. .wk-gallery-showcasebox .wk-slideset > div .next,
    132. .wk-gallery-showcasebox .wk-slideset > div .prev {
    133.     top: 50%;
    134.     width: 30px;
    135.     height: 32px;
    136.     margin-top: -16px;
    137.     background: url(images/navigation_buttons.png) 0 0 no-repeat;
    138. }
    139.  
    140. .wk-gallery-showcasebox .wk-slideset > div .next {
    141.     right: 25px;
    142.     background-position: 0 0;
    143. }
    144.  
    145. .wk-gallery-showcasebox .wk-slideset > div .prev {
    146.     left: 25px;
    147.     background-position: 0 -96px;
    148. }
    149.  
    150.  
    151. .wk-gallery-showcasebox .wk-slideset > div .next:hover { background-position: 0 -32px; }
    152. .wk-gallery-showcasebox .wk-slideset > div .next:active { background-position: 0 -64px; }
    153. .wk-gallery-showcasebox .wk-slideset > div .prev:hover { background-position: 0 -128px; }
    154. .wk-gallery-showcasebox .wk-slideset > div .prev:active { background-position: 0 -160px; }
    155.  
    156.  
    157. /* Responsive
    158. ----------------------------------------------------------------------------------------------------*/
    159.  
    160. /* Only Touch Devices */
    161. [USER=84522]@media[/USER] (max-device-width: 1024px) {
    162.  
    163.     .wk-gallery-showcasebox .slides-container .next,
    164.     .wk-gallery-showcasebox .slides-container .prev { display: none; }
    165.  
    166. }
    167.  
    168. /* Only Phones */
    169. [USER=84522]@media[/USER] (max-width: 767px) {
    170.  
    171.     .wk-gallery-showcasebox .wk-slideset > div { padding: 0 40px; }
    172.  
    173.     .wk-gallery-showcasebox .wk-slideset > div .next { right: 5px; }
    174.     .wk-gallery-showcasebox .wk-slideset > div .prev { left: 5px; }
    175.  
    176. }


    Код (css):
    1. /* Copyright (C) YOOtheme GmbH, YOOtheme Proprietary Use License ([URL='http://http://www.yootheme.com/license']http://www.yootheme.com/license) */
    2.  
    3. /*
    4. * Widgetkit Gallery: Default Style
    5. */
    6.  
    7. .wk-gallery-wall > * {
    8.     display: block;
    9.     float: left;
    10. }
    11.  
    12.  
    13. /* Margin
    14. ----------------------------------------------------------------------------------------------------*/
    15.  
    16. .wk-gallery-wall.margin { margin: 0 -15px -15px 0; }
    17. .wk-gallery-wall.margin > * { margin: 0 15px 15px 0; }
    18.  
    19.  
    20. /* Round Corners
    21. ----------------------------------------------------------------------------------------------------*/
    22.  
    23. .wk-gallery-wall.round > *,
    24. .wk-gallery-wall.round > * > img,
    25. .wk-gallery-wall.round .spotlight > img + div {
    26.     border-radius: 10px;
    27.     overflow: hidden;
    28. }
    29.  
    30. /* Webkit Fix */
    31. .wk-gallery-wall.round .spotlight[data-spotlight*="top"] .overlay {
    32.     border-bottom-left-radius: 0;
    33.     border-bottom-right-radius: 0;
    34.  
    35. }
    36. .wk-gallery-wall.round .spotlight[data-spotlight*="bottom"] .overlay {
    37.     border-top-left-radius: 0;
    38.     border-top-right-radius: 0;
    39. }
    40.  
    41.  
    42. /* Zoom Effect
    43. ----------------------------------------------------------------------------------------------------*/
    44.  
    45. .wk-gallery-wall.zoom > * {
    46.     -moz-transition: all 0.1s ease-out;
    47.     -o-transition: all 0.1s ease-out;
    48.     -webkit-transition: all 0.1s ease-out;
    49.     transition: all 0.1s ease-out;
    50. }
    51.  
    52. .wk-gallery-wall.zoom > *:hover {
    53.     z-index: 10;
    54.     box-shadow: 8px 8px 15px rgba(0,0, 0, 0.4);
    55.     -webkit-transform: rotate(0deg) scale(1.2);
    56.     -o-transform: rotate(0deg) scale(1.2);
    57.     -moz-transform: rotate(0deg) scale(1.2);
    58.     -ms-transform: rotate(0deg) scale(1.2);
    59.     transform: rotate(0deg) scale(1.2);
    60. }
    61.  
    62.  
    63. /* Polaroids Effect
    64. ----------------------------------------------------------------------------------------------------*/
    65.  
    66. .wk-gallery-wall.polaroid {
    67.     position: relative;
    68.     z-index: 0;
    69. }
    70.  
    71. .wk-gallery-wall.polaroid > * > div {
    72.     position: relative;
    73.     padding: 10px;
    74.     border: 1px solid #eee;
    75.     background: #fff;
    76.     box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    77. }
    78.  
    79. .wk-gallery-wall.polaroid > * > div:before,
    80. .wk-gallery-wall.polaroid > * > div:after {
    81.     content: "";
    82.     position: absolute;
    83.     z-index: -1;
    84.     bottom: 8px;
    85.     left: 10px;
    86.     width: 50%;
    87.     height: 20%;
    88.     max-width: 300px;
    89.     box-shadow: 0 8px 16px rgba(0,0,0,0.6);
    90.     -webkit-transform: skew(-15deg) rotate(-6deg);
    91.     -moz-transform: skew(-15deg) rotate(-6deg);
    92.     -ms-transform: skew(-15deg) rotate(-6deg);
    93.     -o-transform: skew(-15deg) rotate(-6deg);
    94.     transform: skew(-15deg) rotate(-6deg);
    95. }
    96.  
    97. .wk-gallery-wall.polaroid > * > div:after {
    98.     left: auto;
    99.     right: 10px;
    100.     -webkit-transform: skew(15deg) rotate(6deg);
    101.     -moz-transform: skew(15deg) rotate(6deg);
    102.     -ms-transform: skew(15deg) rotate(6deg);
    103.     -o-transform: skew(15deg) rotate(6deg);
    104.     transform: skew(15deg) rotate(6deg);
    105. }
    106.  
    107. .wk-gallery-wall.polaroid p.title {
    108.     margin: 0;
    109.     padding-top: 10px;
    110.     text-align: center;
    111.     color: #444;
    112. }
    113.  
    114. /* Rotation */
    115. .wk-gallery-wall.polaroid { margin: 30px 0; }
    116.  
    117. .wk-gallery-wall.polaroid > * {
    118.     -webkit-transform: rotate(-3deg);
    119.     -moz-transform: rotate(-3deg);
    120.     -ms-transform: rotate(-3deg);
    121.     -o-transform: rotate(-3deg);
    122.     transform: rotate(-3deg);
    123. }
    124.  
    125. /* Fix for better font rendering in Webkit */
    126. .wk-gallery-wall.polaroid p.title { -webkit-transform-style: preserve-3d; }
    127.  
    128. .wk-gallery-wall.polaroid > *:nth-child(even) {
    129.     -webkit-transform: rotate(3deg) scale(1.05);
    130.     -moz-transform: rotate(3deg) scale(1.05);
    131.     -ms-transform: rotate(3deg) scale(1.05);
    132.     -o-transform: rotate(3deg) scale(1.05);
    133.     transform: rotate(3deg) scale(1.05);
    134. }
    135.    
    136. .wk-gallery-wall.polaroid > *:nth-child(5n) {
    137.     -webkit-transform: rotate(-4deg) scale(0.9);
    138.     -moz-transform: rotate(-4deg) scale(0.9);
    139.     -ms-transform: rotate(-4deg) scale(0.9);
    140.     -o-transform: rotate(-4deg) scale(0.9);
    141.     transform: rotate(-4deg) scale(0.9);
    142.     position: relative;
    143.     left: -10px;
    144. }
    145.  
    146. /* Hover */
    147. .wk-gallery-wall.polaroid > * {
    148.     -moz-transition: all 0.1s ease-out;
    149.     -o-transition: all 0.1s ease-out;
    150.     -webkit-transition: all 0.1s ease-out;
    151.     transition: all 0.1s ease-out;
    152. }
    153.  
    154. .wk-gallery-wall.polaroid > *:hover {
    155.     position: relative;
    156.     z-index: 10;
    157.     box-shadow: 8px 8px 15px rgba(0,0, 0, 0.4);
    158.     -webkit-transform: rotate(0deg) scale(1.2);
    159.     -o-transform: rotate(0deg) scale(1.2);
    160.     -moz-transform: rotate(0deg) scale(1.2);
    161.     -ms-transform: rotate(0deg) scale(1.2);
    162.     transform: rotate(0deg) scale(1.2);
    163. }

    --- добавлено: 23.03.2014, первое сообщение размещено: 23.03.2014 ---
    Это не style.css виноваты... удалил на рабочей странице, все загружается щелкается, но все топорно, без эффектов...

    ищу дальше проблему
    --- добавлено: 23.03.2014 ---
    Хм... все как бы само собой решилось... я установил инспектор html - Firebug... и при активизации его все заработало...

    Далее попробовал обновить, все тоже самое... потом попробовал изменить масштаб в браузере и о чудо.. заработало...

    Перепробовал 2 браузера, все тоже самое...
     
    Последнее редактирование модератором: 23.03.2014
  9. OlegM
    Offline

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

    Регистрация:
    12.04.2007
    Сообщения:
    4 356
    Симпатии:
    370
    Пол:
    Мужской
    А может и не было проблемы, а всего лишь закэшировалось оформление. :cool:
     
  10. Offline

    Vermilion88 Недавно здесь

    Регистрация:
    11.01.2013
    Сообщения:
    15
    Симпатии:
    0
    Пол:
    Мужской
    Удалял кэш... ничего не помогает! Системный КЭШ в настройках джумлы не включал...
    --- добавлено: 23.03.2014, первое сообщение размещено: 23.03.2014 ---
    В самой странице выдаваемой джумлой есть таблица с фотографиями... но пока не изменишь масштаб ничего не появится...
    --- добавлено: 23.03.2014 ---
    Вот видео проблемы
    --- добавлено: 30.03.2014 ---

    Если галерею вставить в 1, то все работает... а если в 2 и ниже... то не работает )))
     
    Последнее редактирование модератором: 30.03.2014
  11. OlegM
    Offline

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

    Регистрация:
    12.04.2007
    Сообщения:
    4 356
    Симпатии:
    370
    Пол:
    Мужской
    Так работает или не работает?
     
  12. Offline

    Vermilion88 Недавно здесь

    Регистрация:
    11.01.2013
    Сообщения:
    15
    Симпатии:
    0
    Пол:
    Мужской
    Как надо не работает... При открытии аккордеона ничего нет, как только изменю размер окна браузера или масштаб(вообщем то что приводит к изменению отображения страницы), тогда все появляется...
     
  13. Offline

    Vermilion88 Недавно здесь

    Регистрация:
    11.01.2013
    Сообщения:
    15
    Симпатии:
    0
    Пол:
    Мужской
    Подниму тему... Помогите
     
  14. OlegM
    Offline

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

    Регистрация:
    12.04.2007
    Сообщения:
    4 356
    Симпатии:
    370
    Пол:
    Мужской
    Сейчас что не работает?
     
  15. Offline

    Vermilion88 Недавно здесь

    Регистрация:
    11.01.2013
    Сообщения:
    15
    Симпатии:
    0
    Пол:
    Мужской
    Что и раньше... посмотрите ссылку проверьте работу аккордеона http://авто-тема.рф/poisk-po-avtomobilyu/item/priora

    на 3 позиции - смените масштаб в любую сторону и увидите чудо... Вот этого не должно быть...
     
  16. OlegM
    Offline

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

    Регистрация:
    12.04.2007
    Сообщения:
    4 356
    Симпатии:
    370
    Пол:
    Мужской
    Подозреваю, что дело в том, что галерея не инициализируется при открытии аккордеона и инициализация происходит лишь при изменении размера окна.
    Без этого даже высота галереи неизвестна и аккордеон не может подстроиться.
    Тут поможет либо правка скриптов виджета, либо можно попробовать другой аккордеон или галерею.
     
  17. Offline

    Vermilion88 Недавно здесь

    Регистрация:
    11.01.2013
    Сообщения:
    15
    Симпатии:
    0
    Пол:
    Мужской
    @OlegM, а как проверить с помощью встроенной функции в гугл гром - консоль?

    Сколько я не смотрел, но ничего не могу найти...
     
  18. OlegM
    Offline

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

    Регистрация:
    12.04.2007
    Сообщения:
    4 356
    Симпатии:
    370
    Пол:
    Мужской
    Что проверить? В консоли нет ошибок.
     
  19. Offline

    Vermilion88 Недавно здесь

    Регистрация:
    11.01.2013
    Сообщения:
    15
    Симпатии:
    0
    Пол:
    Мужской
    @OlegM в гугл хроме или в мозиле есть приложения типа firebug... Вот там можно найти стили и их меняя там смотреть что произойдет...

    пробовал менять некоторые параметры... но увы не очень представляю что за что отвечает, в том смысле сначала выводится стиль zoo, затем widgetkit accordion, а потом уж gallery... Но что то не разберусь...

    вот для наглядности
     

    Вложения:

  20. OlegM
    Offline

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

    Регистрация:
    12.04.2007
    Сообщения:
    4 356
    Симпатии:
    370
    Пол:
    Мужской
    Так дело не в стилях, а в javascript галереи и аккордеона.

    А в DevTools можешь посмотреть на размеры аккордеона и галереи ДО и ПОСЛЕ изменения окна и появления галереи.
     
  21. Offline

    Vermilion88 Недавно здесь

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

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

    а вот на компе дома вот так плохо...

    как мне исправить ситуацию? я забивал жестко размер 600 и все равно 0 получается
     

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

Загрузка...