Кто-то подскажет по теме или дохлый номер с резиновыми картинками и надо искать другую карусель?
Понятно, спасибо.
Нет, не работает. Я так понял через файл стилей вообще никак это нельзя сделать, пототму что
в плагине параметры ширины и высоты блока карусели и избражений заданы таким образом
/* These are univeral values that are used throughout the plugin. Do not modify them * unless you know what you're doing. Most of them feed off the options * so most customization can be achieved by modifying the options values */ var pluginData = { currentCenterNum: options.startingFeature, containerWidth: 0, containerHeight: 0, largeFeatureWidth: 0, largeFeatureHeight: 0, smallFeatureWidth: 0, smallFeatureHeight: 0, totalFeatureCount: $(this).children("div").length, currentlyMoving: false, featuresContainer: $(this), featuresArray: [], containerIDTag: "#"+$(this).attr("id"), timeoutVar: null, rotationsRemaining: 0, itemsToAnimate: 0, borderWidth: 0 };
Потом ширина задаётся так:
// Place all the features in a center hidden position to start off pluginData.featuresContainer // Have to make the container relative positioning .find(".carousel-feature").each(function () { // Center all the features in the middle and hide them $(this).css({ 'left': (pluginData.containerWidth / 2) - (pluginData.smallFeatureWidth / 2) - (pluginData.borderWidth / 2), 'width': pluginData.smallFeatureWidth, 'height': pluginData.smallFeatureHeight, 'top': options.smallFeatureOffset + options.topPadding, 'opacity': 0 }); }) // Set all the images to small feature size .find(".carousel-image").css({ 'width': pluginData.smallFeatureWidth });
И рассчёт css в зависимости от положения изображения - фронтальное или второстепенное, производится так:
// Calculate new new css values depending on where the feature will be located if (newPosition == 1) { new_width = pluginData.largeFeatureWidth; new_height = pluginData.largeFeatureHeight; new_top = options.topPadding; new_zindex = $feature.css("z-index"); new_left = (pluginData.containerWidth / 2) - (pluginData.largeFeatureWidth / 2) - (pluginData.borderWidth / 2); new_fade = 1.0; } else { new_width = pluginData.smallFeatureWidth; new_height = pluginData.smallFeatureHeight; new_top = options.smallFeatureOffset + options.topPadding; new_zindex = 1; new_fade = 0.4; // some info is different for the left, right, and hidden positions // left if (newPosition == pluginData.totalFeatureCount) { new_left = options.sidePadding; // right } else if (newPosition == 2) { new_left = pluginData.containerWidth - pluginData.smallFeatureWidth - options.sidePadding - pluginData.borderWidth; // hidden } else { new_left = (pluginData.containerWidth / 2) - (pluginData.smallFeatureWidth / 2) - (pluginData.borderWidth / 2); new_fade = 0; } }
Поэтому надо менять сам скрипт, а не css. Предполагаю, что должно быть что-то типа такого вместо значения 0:
var pluginData = { largeFeatureWidth: $(this).css("max-width", "100%") ...
И так далее, т.е., то, что отвечает за ширину и высоту. Но как это делать не знаю абсолютно.😕
Да, это я понимаю, но говорю же, что нашёл меню, которе было на mootools. В итоге я его подключить не смог:), но зато узнал, что библиотеки могут конфликтовать.
Да, спасибо. Вопрос в том, что я делаю наперёд, чтобы не править потом. А вдруг буду использовать другие библиотеки. У меня-то даже дизайна нет. Так ковыряю сам потихонечку. Например нашёл выпадающее меню, а оно на mootools, тогда придётся менять код во всех скриптах, а так сразу делаю для jQuery, чтобы не было конфликтов в случае чего.
Я ж говорю - не шарю:), всё методом тыка, но вроде как получается.
Дикий пионер, если можно к Вам ещё один вопрос.
Можно ли как-то сделать так, чтобы изображения в этой карусели были резиновые?
Там в css есть класс "carousel-image", но изменение значений ширины и высоты не меняет размер изображения при изменении разрешения экрана, так как путь к изображениям прописывается в коде страницы. Например, для других картинок на сайте я везде делал через сss, вот так:
background:url(.............) no-repeat; max-width:100%; height:...px; background-size:100% 100%;
Всё хорошо работает, а вот в карусели на уровне скрипта заложено, что ширина и высота берутся автоматически исходя из размеров изображения. Даже если сделать резиновым блок-обёртку #carousel, всё равно мешает фиксированый размер изображений.
Вообщем разобрался. Ответ в кодексе
Правильно использовать код с обёрткой
jQuery(document).ready(function($) { // Inside of this function, $() will work as an alias for jQuery() // and other libraries also using $ will not be accessible under this shortcut });
таким образом скрипт будет исполнятся после полной загрузки страницы. Как написано в кодексе: "Это обертка заставит ваш код будет выполняться, когда DOM полностью построен."
Если же надо, чтобы скрипт сработал сразу, тогда надо писать
(function($) { // Inside of this function, $() will work as an alias for jQuery() // and other libraries also using $ will not be accessible under this shortcut })(jQuery);
Так вот скрипт аккордиона не должен срабатывать сразу, а только после загрузки библиотеку jQuery-UI. Таким образом варианта два:
1) использовать первый код;
2) использовать второй код, НО только саму библиотеку jQuery-UI грузить из хедера, а скрипт аккордиона поставить на загрузку из футера.
$(function(){ $...... })
Да, так работает, забыл сказать.
Прошу прощения, но не понимаю😂 Я вообще юрист. Делаю сайт самостоятельно по материалам из сети. HTML и CSS вроде освоил на определённом уровне, а вот javascript - это уже черезчур для меня. Читаю статьи вроде этой и использую готовые решения. Вот и прочитал, что если отключить jquery, встроенный в движок WP , который работает в режиме noConflict, тогда можно использовать знак $, но в конце скрипта надо добавить "(jQuery)", чтобы каждый раз не писать это слово и сделать код короче.
Господа, помогите, пожалуйста, разобраться со скриптами.
Значит я отключил встроенный javascript, подключил последнюю версию из библиотеки гугла.
Соответственно все скрипты делаю таким образом
(function($){ $...... })(jQuery);
Все скрипты работают нормально.
Но вот подключил аккордион jQuery-UI, и этот скрипт не хочет работать по указанной конструкции. Работает только так
$(function(){ $...... })(jQuery);
но тогда в консоли разработчика при обновлении страницы выдаёт ошибку
Unhandled Error: содержание скрипта is not a function.
В чём проблема? Что с этим jQuery-UI не так?
Решение найдено здесь
Опцию active необходимо указывать как: $('текущий класс вкладки').index($('класс активной вкладки'))
luckydan, я прошу прощения, что влажу в Вашу тему, но не могу создать новую - форум блочит.
У меня вопрос по jQuery UI.
Насколько я понял, с версии 1.10 убрали опцию navigation, которая позволяла автоматически открывать вкладку аккордиона в соответсвии с той страницей на которую был сделан переход.
Получается, что и в текущей версии 1.11 этой опции нет.
А как теперь реализовать автоматическое открытие вкладки? Ставить версию jQuery UI 1.8, где опция навигации имеется или может есть какой другой способ? Спасибо.
$classes = apply_filters( 'nav_menu_css_class', array_filter( $classes ), $item, $args ); $class_names = join(' ', array_diff( $classes, array('') ); $class_names = empty($class_names) ? '' : ' class="' . esc_attr( $class_names ) . '"';
Это не работает, указывает на неправильную ";" во второй строке.
Нашёл ошибку - не хватало закрывающей скобки. Всё заработало.
$class_names = trim( join(' ', apply_filters( 'nav_menu_css_class', array_filter( $classes ), $item, $args ) ) ); $class_names = empty($class_names) ? '' : ' class="' . esc_attr( $class_names ) . '"';
Этот вариант тоже работает. СПАСИБО ОГРОМНОЕ! То что нужно. 😂
ЗЫ: а что лучше использовать? Чем-то отличаются решения?
