Задать картинке свой class

@souz21 · Регистрация: 05.09.2011

Студворк — интернет-сервис помощи студентам

Подскажите, как обернуть картинку в слайдере в свой class.
Есть вот такой код слайдера

HTML5
1
2
3
4
5
6
7
8
<li data-thumb="ссылка на картинку маленького размера">
<a href="{full-link}" title="{title}" rel="bookmark">
<div class="custom3-img"><img  src="ссылка на картинку большую картинку" class="attachment-slide wp-post-image" alt="{title}" /></div></a>
<div class="entry">
<h4>{title}</h4>
<p>{short-story limit="70"}...</p>
</div>
</li>

Мне нужно маленькое изображение обернуть в свой class

HTML5
1
<li data-thumb="ссылка на картинку маленького размера">

CSS
1
2
3
4
5
6
/*--- SL ---*/
.custom-slider img {
height: 54px;
width: 101px;
border: 0;
}

Сейчас маленькое превью картинки слайдера не пропорциональны. Не могу сообразить, как правильно прописать class вот этой картинке <li data-thumb="ссылка на картинку маленького размера">

Donald28 · 10.10.2013, 17:00

следует смотреть не исходный код страницы, а в режиме просмотра браузера (например хрома, правой клавишей -> просмотр кода элемента) дальше думаю разберешься что куда прописать.

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

@souz21 · 10.10.2013, 17:03 **[ТС]**

Здесь ничего не перепутано. Смотреть исходный код-это не выход и не способ. Мне нужно задать класс вот этому изображению <li data-thumb="ссылка на картинку маленького размера">

Donald28 · 10.10.2013, 17:06

так дело в том, что li - никак не может быть изображением!!!!
просто JS получает данные из атрибута data-thumb и где-то создает уже ваши изображения на странице (тег img)

Сообщение от souz21

Смотреть исходный код-это не выход и не способ.

НЕ исходный код, А просмотр кода элемента!!!!

@souz21 · 10.10.2013, 17:20 **[ТС]**

Код слайдера вместе с превью

HTML5
1
2
3
4
5
6
7
8
<li data-thumb="ссылка на картинку маленького размера">
<a href="{full-link}" title="{title}" rel="bookmark">
<div class="custom3-img"><img src="ссылка на картинку большую картинку" class="attachment-slide wp-post-image" alt="{title}" /></div></a>
<div class="entry">
<h4>{title}</h4>
<p>{short-story limit="70"}...</p>
</div>
</li>

Миниатюра создается через css:

CSS
1
2
3
4
5
6
img {
    border: 0 none;
    height: auto;
    max-width: 100%;
    vertical-align: middle;
}

Donald28 · 10.10.2013, 17:28

давай сделаем 2 варианта:
1 вариант. Дайте ссылку на страницу с этим слайдером, я посмотрю, что там надо и куда добавить
2 вариант. Откройте ваш сайт в Хроме. Кликните правой кнопкой по миниатюре и выберите пункт "просмотр кода элемента". Внизу появится html код вашей странице и в частности должно показать именно тот тэг img вайше миниатюры

@souz21 · 10.10.2013, 17:32 **[ТС]**

Donald28, отправил ссылку личку

Donald28 · 10.10.2013, 17:37

пишите ваши CSS стили для следующего селектора: .flex-control-thumbs img
или корректируйте 139 строку в файле: основной домен/magazine/wp-content/themes/magazine-v123/css/flexslider.css

@souz21 · 10.10.2013, 17:44 **[ТС]**

Сделал. Теперь пропорциональные
добавил в 139 строку height: 50px;

CSS
1
.flex-control-thumbs img {width: 100%; [B]height: 50px;[/B] display: block; opacity: 1; background: #eee; padding: 4%; cursor: pointer;}

Спасибо за помощь!

Новые блоги и статьи Все статьи Все блоги /
Символьное дифференцирование igorrr37 13.02.2026 / * Логарифм записывается как: (x-2)log(x^2+2) - означает логарифм (x^2+2) по основанию (x-2). Унарный минус обозначается как ! в-строка - входное арифметическое выражение в инфиксной(обычной). . .	Камера Toupcam IUA500KMA Eddy_Em 12.02.2026 Т. к. у всяких "хикроботов" слишком уж мелкий пиксель, для подсмотра в ESPriF они вообще плохо годятся: уже 14 величину можно рассмотреть еле-еле лишь на экспозициях под 3 секунды (а то и больше),. . .	И ясному Солнцу zbw 12.02.2026 И ясному Солнцу, и светлой Луне. В мире покоя нет и люди не могут жить в тишине. А жить им немного лет.	«Знание-Сила» zbw 12.02.2026 «Знание-Сила» «Время-Деньги» «Деньги -Пуля»
SDL3 для Web (WebAssembly): Подключение Box2D v3, физика и отрисовка коллайдеров 8Observer8 12.02.2026 Содержание блога Box2D - это библиотека для 2D физики для анимаций и игр. С её помощью можно определять были ли коллизии между конкретными объектами и вызывать обработчики событий столкновения. . . .	SDL3 для Web (WebAssembly): Загрузка PNG с прозрачным фоном с помощью SDL_LoadPNG (без SDL3_image) 8Observer8 11.02.2026 Содержание блога Библиотека SDL3 содержит встроенные инструменты для базовой работы с изображениями - без использования библиотеки SDL3_image. Пошагово создадим проект для загрузки изображения. . .	SDL3 для Web (WebAssembly): Загрузка PNG с прозрачным фоном с помощью SDL3_image 8Observer8 10.02.2026 Содержание блога Библиотека SDL3_image содержит инструменты для расширенной работы с изображениями. Пошагово создадим проект для загрузки изображения формата PNG с альфа-каналом (с прозрачным. . .	Установка Qt-версии Lazarus IDE в Debian Trixie Xfce volvo 10.02.2026 В общем, достали меня глюки IDE Лазаруса, собранной с использованием набора виджетов Gtk2 (конкретно: если набирать текст в редакторе и вызвать подсказку через Ctrl+Space, то после закрытия окошка. . .

Donald28 странник 810 / 481 / 108 Регистрация: 28.05.2012 Сообщений: 1,518 Записей в блоге: 2
	10.10.2013, 17:00
	следует смотреть не исходный код страницы, а в режиме просмотра браузера (например хрома, правой клавишей -> просмотр кода элемента) дальше думаю разберешься что куда прописать. Второй вариант, мне кажется ты с точностью до наоборот перепутал позиции адреса большой и маленькой картики 0

@souz21 1 / 1 / 0 Регистрация: 05.09.2011 Сообщений: 174
	10.10.2013, 17:03 [ТС]
	Здесь ничего не перепутано. Смотреть исходный код-это не выход и не способ. Мне нужно задать класс вот этому изображению <li data-thumb="ссылка на картинку маленького размера"> 0

Donald28 странник 810 / 481 / 108 Регистрация: 28.05.2012 Сообщений: 1,518 Записей в блоге: 2
	10.10.2013, 17:28
	давай сделаем 2 варианта: 1 вариант. Дайте ссылку на страницу с этим слайдером, я посмотрю, что там надо и куда добавить 2 вариант. Откройте ваш сайт в Хроме. Кликните правой кнопкой по миниатюре и выберите пункт "просмотр кода элемента". Внизу появится html код вашей странице и в частности должно показать именно тот тэг img вайше миниатюры 1

@souz21 1 / 1 / 0 Регистрация: 05.09.2011 Сообщений: 174
	10.10.2013, 17:32 [ТС]
	Donald28, отправил ссылку личку 0

Donald28 странник 810 / 481 / 108 Регистрация: 28.05.2012 Сообщений: 1,518 Записей в блоге: 2
	10.10.2013, 17:37
	пишите ваши CSS стили для следующего селектора: .flex-control-thumbs img или корректируйте 139 строку в файле: основной домен/magazine/wp-content/themes/magazine-v123/css/flexslider.css 1