Добавление изображений внутрь блока с помощью 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, он действительно классный, о нём вы можете прочитать в этом отзыве.