Вопрос по javascript

А если просто вот так:

без передачи jQuery внутрь?

Вы понимаете для каких целей используется конструкция из вашего первого кода?

$(function(){ 
 $...... 
 })

Да, так работает, забыл сказать.

Прошу прощения, но не понимаю😂 Я вообще юрист. Делаю сайт самостоятельно по материалам из сети. HTML и CSS вроде освоил на определённом уровне, а вот javascript - это уже черезчур для меня. Читаю статьи вроде этой и использую готовые решения. Вот и прочитал, что если отключить jquery, встроенный в движок WP , который работает в режиме noConflict, тогда можно использовать знак $, но в конце скрипта надо добавить "(jQuery)", чтобы каждый раз не писать это слово и сделать код короче.

Вообщем разобрался. Ответ в кодексе

Правильно использовать код с обёрткой

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 грузить из хедера, а скрипт аккордиона поставить на загрузку из футера.

Если у вас нет сторонних библиотек, которые захотят использовать $ (а их в 99% случаев и нет), то можно не париться со всем этим, а просто писать везде $ и всё.

И тогда все записи сократятся до

или вообще

Да, спасибо. Вопрос в том, что я делаю наперёд, чтобы не править потом. А вдруг буду использовать другие библиотеки. У меня-то даже дизайна нет. Так ковыряю сам потихонечку. Например нашёл выпадающее меню, а оно на mootools, тогда придётся менять код во всех скриптах, а так сразу делаю для jQuery, чтобы не было конфликтов в случае чего.

Я ж говорю - не шарю:), всё методом тыка, но вроде как получается.

Дикий пионер, если можно к Вам ещё один вопрос.

Можно ли как-то сделать так, чтобы изображения в этой карусели были резиновые?

Там в css есть класс "carousel-image", но изменение значений ширины и высоты не меняет размер изображения при изменении разрешения экрана, так как путь к изображениям прописывается в коде страницы. Например, для других картинок на сайте я везде делал через сss, вот так:

background:url(.............) no-repeat;

max-width:100%;

height:...px;

background-size:100% 100%;

Всё хорошо работает, а вот в карусели на уровне скрипта заложено, что ширина и высота берутся автоматически исходя из размеров изображения. Даже если сделать резиновым блок-обёртку #carousel, всё равно мешает фиксированый размер изображений.

зачем?

jQuery хватит за глаза, вы даже на 5% его не используете :)

Да, это я понимаю, но говорю же, что нашёл меню, которе было на mootools. В итоге я его подключить не смог:), но зато узнал, что библиотеки могут конфликтовать.

Liberbox, извините, с версткой я не очень дружу, поэтому на ваш вопрос ответить не смогу.

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

important пробовали добавлять?

Понятно, спасибо.

Нет, не работает. Я так понял через файл стилей вообще никак это нельзя сделать, пототму что

в плагине параметры ширины и высоты блока карусели и избражений заданы таким образом

/* 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%")

...

И так далее, т.е., то, что отвечает за ширину и высоту. Но как это делать не знаю абсолютно.😕