слайдеры

[arriah 5]

Хочу установить такой слайдер http://workshop.rs/projects/coin-slider

По инструкции все сделал, вопросов нет.

Сладйер выводится в блоке 300х200 (я так задал в параметрах скрипта)

Но вот изображения, которые выводятся в слайдере "обрезаются" до 300х200, а не масшабируются.

Подскажите как это поправить. В css не нашел вывода изображения, чтобы задать ему ширину и высоту.

И еще вопросик - навигация в этом слайдере внизу, квадратиками. Как их сделать круглыми и наверху? (хотя не принципиально)

Спасибо.

[odys 384]

arriah, дай ссылку на сайт, чтобы визуально посмотреть.

[arriah 5]

arriah, дай ссылку на сайт, чтобы визуально посмотреть.

Полазил по коду js - он вставляет картинку в слайдер как фоновое изображение, все прописывается в js скрипте ..

вот аддрес: http://vremya4e.com на главной, под новостями справа "новогодний блок"

[odys 384]

arriah, я так понимаю, там все картинки разного размера. Что бы всё было ровно есть 2 варианта.

1. Самое правильное решение. Подготавливать изображения перед публикацией. Обрезать по нужному размеру, оптимизовать. Возьмем самую первую картинку, её вес 96 кб., оптимизовав её можно снизить на 10-15 кб. Я понимаю, что это мало и сильно не скажется на загрузке странице, но а если картинок много?

2. Это выход, которым сам пользуюсь, но из-за безвыходности. Принцип такой. Создаётся блок с фиксированной шириной и высотой, ему задаётся overflow:hidden (http://htmlbook.ru/css/overflow), а для картинки внутри блока задаётся только ширина. При таком подходе картинка не будет растягиваться, но часть картинки, которая выходит за рамки высоты блока, будет обрезаться. Вот пример: http://www.kanaspo.com/ (первые 3 новости).

[arriah 5]

arriah, я так понимаю, там все картинки разного размера. Что бы всё было ровно есть 2 варианта.

1. Самое правильное решение. Подготавливать изображения перед публикацией. Обрезать по нужному размеру, оптимизовать. Возьмем самую первую картинку, её вес 96 кб., оптимизовав её можно снизить на 10-15 кб. Я понимаю, что это мало и сильно не скажется на загрузке странице, но а если картинок много?

2. Это выход, которым сам пользуюсь, но из-за безвыходности. Принцип такой. Создаётся блок с фиксированной шириной и высотой, ему задаётся overflow:hidden (http://htmlbook.ru/css/overflow), а для картинки внутри блока задаётся только ширина. При таком подходе картинка не будет растягиваться, но часть картинки, которая выходит за рамки высоты блока, будет обрезаться. Вот пример: http://www.kanaspo.com/ (первые 3 новости).

Вариант подготоваливать картинки заранее не подходит, по разным причинам.

Второй вариант хороший, я им пользуюсь. Но в данном случае не получается.

Если бы картинка выводилась средствами css то понятно, можно подогнать размеры. Но здесь картинка выводится js, в котором прописываются стили.

Причем картинка выводится фоном в данный блок.

Немного покопался в JS (я в нем не силен). Нашел вывод где выводится изображение и дописал там background-size: cover;

При обновлении сраницы - первая картинка нормально смасштабировалась, но потом при выполнении скрипта который выводит эффекты все стало по прежнему...

[odys 384]

Причем картинка выводится фоном в данный блок.

нет, она не фотом

смотри css слайдера, там есть такое

.slides_img img{

	width:650px;

	height:400px;

}

убери нафиг height: 400px;

Изменено 28 декабря 2014 пользователем odys

[arriah 5]

Причем картинка выводится фоном в данный блок.

нет, она не фотом

смотри css слайдера, там есть такое

.slides_img img{

	width:650px;

	height:400px;

}

убери нафиг height: 400px;

я не про этот слайдер. А про тот который у меня под лентой новостей, справа, блок назвыал "Новогодний блок" Вот здесь я так понял формируется картинка для слайдера

					    // create images, links and titles arrays

					    $.each($('#' + el.id + ' img'), function (i, item) {

							    images[el.id][i]			    = $(item).attr('src');

							    links[el.id][i]				 = $(item).parent().is('a') ? $(item).parent().attr('href') : '';

							    linksTarget[el.id][i]   = $(item).parent().is('a') ? $(item).parent().attr('target') : '';

							    titles[el.id][i]			    = $(item).next().is('span') ? $(item).next().html() : '';

							    $(item).hide();

							    $(item).next().hide();

					    });

А здесь оформление самого блока слайдера

 // set panel

					    $(el).css({

							    'background-image': 'url("' + images[el.id][0] + '")',

							    'width': params[el.id].width,

							    'height': params[el.id].height,

							    'position': 'relative',

							    'background-position': 'top left',

					    }).wrap("<div class='coin-slider' id='coin-slider-" + el.id + "' />");

'width': params[el.id].width, 'height': params[el.id].height, я так понимаю это переменные. которые передаются в скрипте, для формирования размера самого слайдера.

А вот как прописать так чтобы и картинки формировались в соответствие с этими размерами.

Картинки вставляются фоном, но background-size: cover применяется только для одной из них, и то после релоада страницы.Потом все ломается

PS: Причем ни хром. ни хромиум эти слайдеры не "крутит"...В других браузерах все нормально....походу придется искать другой скрипт

[arriah 5]

вроде разобрался.

Прописал в css слайдера:

.cs-coin-slider

    {

      background-size: 300px 200px;

    }

Но насколько я понимаю не все браузеры умеют background-size..может что еще надо прописать?

[odys 384]

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

PS: Причем ни хром. ни хромиум эти слайдеры не "крутит"...В других браузерах все нормально....походу придется искать другой скрипт

я этот использовал http://cssglobe.com/easy-slider-17-numeric-navigation-jquery-slider/ - легкий, много настроек и проблем с его работой не замечал