Добавление изображений внутрь блока с помощью jQuery
Предисловие
Йоу-йоу. Совсем недавно мне пришлось вручную обновлять каталог техники на сайте jet-khv.ru. Это, если что, дистрибьютор канадской техники BRP Can-am в Хабаровске. Ну так вот в чём проблема: сейчас там акция (июнь 2018) и нужно было добавить ко всей технике картинку, которая говорит, что она участвует в акции. Можно было сделать это в графическом редакторе, но мне не хотелось этого делать, т.к. акция рано или поздно кончится и придётся заново менять все картинки.
Проблема
Для того, чтобы избежать повторного добавления картинок после окончания акции, я решил вставлять «шеврон» акции с помощью jQuery. В мом случае нужно было два варианта. В первом случае картинка находилась в карточке товара, во втором нужно было вывести список товаров. Осложнялось это тем, что я не мог не хотел менять шаблон добавить к карточке товара стили, чтобы определять к каким картинкам добавлять шильдик акции, а к каким нет.
В итоге у меня получилось два кода, которые я вставлял в детальное описание и в анонс.
Код для детального просмотра
Он актуален, когда есть обложка картинки с уникальным селектором
<script>
$('.col.col-md-6.service-detail__head-left').css('position', 'relative')
.append('<img style="position:absolute; right:0; bottom:0;width:100px; height:100px;" src="http://formula7.ru/wp-content/uploads/2017/02/2-etap.png"; />');
</script>
Давайте я запишу его схематично
$(‘Селектор оболочки картинки’) .css(‘добавление относительного позиционирования’) .append(Добавление картинки акции)
Добавляя картинку акции, я еще прописал стили: абсолютное позиционирование и расположение справа снизу, так же я указал высоту и ширину 100px.
Код для анонса
Он используется когда есть много одинаковых блоков, в которые нужно вставить картинку, но к ним нельзя указать какой-либо селектор, чтобы отличить те, в которые нужно добавить картинку, от тех, которым не нужно.
Как я уже говорил добавлять класс или идентификатор, чтобы распознавать нужные элементы, я не мог. Поэтому я добавлял в анонс пустой блок с селектором, чтобы по нему искать куда вставлять картинку. Но этот блок не оболочка картинки товара, что же делать?! Давайте я сначала покажу код, а потом его объясню.
<div class="seoed-tmp-img"></div>
<script>
$('.seoed-tmp-img').closest('.section-item')
.find('.section-item__pic').css('position', 'relative')
.append('<img style="position:absolute; right:0; bottom:0;width:60px; height:60px;" src="http://formula7.ru/wp-content/uploads/2017/02/2-etap.png"; />');
</script>
Запишу опять в схематическом виде:
$(Селектор блока который я добавил в анонс) . сlosest(селектор блока который выше по дом) .find(селектор оболочки картинки) ) .css(‘добавление относительного позиционирования’) .append(Добавление картинки акции)
Для большей ясности вот вам схема, где изображён элемент и метод, который к нему применяется.
Думаю, после схемы вам всё стало понятно.
Как это выглядит
Проблема с jQuery
Данный код актуален, если ваш jQuery подключается в шапке сайта. А что же делать, если это не так?! Как выполнить jQuery код, если он подключается в подвале перед закрывающим тегом </body>?! На самом деле просто. Вам нужно обернуть ваш код этим —
window.onload=function(){
// Ваш код
}
Подробнее вы можете прочитать, например, http://pacificsky.ru/
P.S.
Думаю вам пригодиться этот код, может не сейчас, а позже. Запомните, что этот код вы видели на XakPlant.ru. Если у вас что-то не получилось в этом коде, напишите мне в ВК или Instagram (ссылки в подвале)
Думаю , что смогу вам помочь, а пока подписывайтесь на меня в инстаграме, вконтакте (ссылки в подвале), пользуйтесь моим сервисом строки, ищите вхождения ключевых фраз. Поддержите проект, зарегистрируйтесь по реферальной ссылке на хостинге beget, он действительно классный, о нём вы можете прочитать в этом отзыве.
