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

Проблема вся в том что хочу скрыть много фотографий под сполер(accordion)... Ни один модуль widgetkit(slideshow, slideset) не работает внутри модуля аккордион...

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

Только что обновил версию widgetkit до 1.47 ( все тоже самое)

 

Выставляю так...

Сначала создаю материал через компонент 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

Все тоже самое, какие то стили выводятся, а какие то нет!

 

Я понимаю что это где то в стилях проблема, но неужели никто никогда до меня так не делал? не убирал галерею под спойлер?

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

 

Spoiler: вот файл style.css стиля который не работает

Код (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. }

Spoiler: А вот файл style.css стиля кторый работает!

Код (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. }

--- добавлено: Mar 23, 2014, первое сообщение размещено: Mar 23, 2014 ---

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

ищу дальше проблему

--- добавлено: Mar 23, 2014 ---

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

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

Перепробовал 2 браузера, все тоже самое...

 

Удалял кэш... ничего не помогает! Системный КЭШ в настройках джумлы не включал...

--- добавлено: Mar 23, 2014, первое сообщение размещено: Mar 23, 2014 ---

В самой странице выдаваемой джумлой есть таблица с фотографиями... но пока не изменишь масштаб ничего не появится...

--- добавлено: Mar 23, 2014 ---

Вот видео проблемы

--- добавлено: Mar 30, 2014 ---

Если галерею вставить в 1, то все работает... а если в 2 и ниже... то не работает )))

 

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

 

Подниму тему... Помогите

 

Что и раньше... посмотрите ссылку проверьте работу аккордеона http://авто-тема.рф/poisk-po-avtomobilyu/item/priora

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

 

@OlegM, а как проверить с помощью встроенной функции в гугл гром - консоль?

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

 

@OlegM в гугл хроме или в мозиле есть приложения типа firebug... Вот там можно найти стили и их меняя там смотреть что произойдет...

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

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

 

да, увидел изначально было 0, после изменения масшаба 580...

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

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

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