Помещаем на изображение заметки поясняющие ту или иную деталь. Данная функция может быть полезна для пояснения каких-либо чертежей или схем, выделения основных преимуществ товара и т.д.
Перебрал множество скриптов с подобным функционалом, но этот мне понравился больше других: выглядит довольно стильно, принцип работы прост.
Метки на изображении Points of Interest
Подключаем простой скрипт
jQuery(document).ready(function($){
//open interest point description
$('.cd-single-point').children('a').on('click', function(){
var selectedPoint = $(this).parent('li');
if( selectedPoint.hasClass('is-open') ) {
selectedPoint.removeClass('is-open').addClass('visited');
} else {
selectedPoint.addClass('is-open').siblings('.cd-single-point.is-open').removeClass('is-open').addClass('visited');
}
});
//close interest point description
$('.cd-close-info').on('click', function(event){
event.preventDefault();
$(this).parents('.cd-single-point').eq(0).removeClass('is-open').addClass('visited');
});
});Подключаем стили — см. закладку стили (слева) + прописываем расположение меток
/* Расположение меток */
.cd-single-point:nth-of-type(1) {bottom: 40%; right: 30%;}
.cd-single-point:nth-of-type(2) {bottom: 24%; right: 46%;}
.cd-single-point:nth-of-type(3) {top: 28%; left: 20%;}
.cd-single-point:nth-of-type(4) {top: 20%; right: 22%;}Верстка должна выглядеть следующим образом:
<div class="cd-product-wrapper"> <img src="/wp-content/uploads/2017/03/Lost_Planet_3-700x298.jpg"> <ul> <li class="cd-single-point"> <a class="cd-img-replace" href="#0"></a> <div class="cd-more-info cd-bottom"> <h2>Заголовок</h2> <p>Описание</p> <a href="#0" class="cd-close-info cd-img-replace">Close</a> </div> </li> <!-- следующая метка --> </ul> </div>
Дополнительный класс для cd-more-info это 4 направления открытия метки: cd-top (вверх), cd-bottom (вниз), cd-left (влево), cd-right (вправо)
Заметки на изображении от Adama Grayson
Нашел еще одно неплохое решение, но с другой реализацией, в данном случае упор делается больше на скрипт и эффект действует при наведении.
Верстка состоит из одного div’а с классом spot-container.
Данный скрипт чувствителен к месту расположения spot-container. Сбивают расположение всплывающих окон родительские свойства margin и float: left;
CSS
.spot-container {
width: 100%;
height: 500px;
position: relative;
background-image: url(/wp-content/uploads/2017/03/black-and-white-nature-photography-stag.jpg);
background-size: cover;
background-repeat: no-repeat;
background-position: center;
}
.hot-spot {
width: 20px;
height: 20px;
background-color: #D29A4E;
border-radius: 50%;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
z-index: 1;
opacity: 0.8;
z-index: 1;
}
.hot-spot:after {
content: '';
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
border: 2px solid #D29A4E;
width: 20px;
height: 20px;
border-radius: 50%;
opacity: 0;
transition: 0.2s all;
}
.hot-spot:hover {cursor: pointer; opacity: 1;}
.hot-spot:hover:after {width: 25px; height: 25px; opacity: 1;}
.speech-bubble {
position: absolute;
width: 150px;
background-color: white;
border-radius: 4px;
text-align: center;
display: none;
z-index: 2;
}
.speech-bubble h1 {font-size: 20px; margin-top: 12px; color: #333333;}
.speech-bubble p {
margin-top: 4px;
margin-bottom: 12px;
font-style: italic;
color: #888888;
}
.speech-bubble p:after {
top: 100%;
left: 50%;
border: solid transparent;
content: " ";
height: 0;
width: 0;
position: absolute;
pointer-events: none;
border-color: rgba(255, 255, 255, 0);
border-top-color: #ffffff;
border-width: 10px;
margin-left: -10px;
}В данном скрипте х=0, y=0 — это центр изображения (размер изображения также задается здесь — imageWidth, imageHeight)
var imageWidth = 737,
imageHeight = 500,
imageAspectRatio = imageWidth / imageHeight,
$window = $(window);
var hotSpots = [{
'title': 'Mouth',
'description': 'scream.',
'x': 50,
'y': 50
}, {
'title': 'Body',
'description': 'Look at it.',
'x': 100,
'y': 100
}, {
'title': 'Antlers',
'description': 'They crazy.',
'x': -50,
'y': -50
}, {
'title': 'This Ear',
'description': 'It can hear things.',
'x': -125,
'y': 125
}];
function appendHotSpots() {
for (var i = 0; i < hotSpots.length; i++) {
var $hotSpot = $('<div>').addClass('hot-spot');
$('.spot-container').append($hotSpot);
}
positionHotSpots();
}
function appendSpeechBubble() {
var $speechBubble = $('<div>').addClass('speech-bubble');
$('.spot-container').append($speechBubble);
}
function handleHotSpotMouseover(e) {
var $currentHotSpot = $(e.currentTarget),
currentIndex = $currentHotSpot.index(),
$speechBubble = $('.speech-bubble'),
title = hotSpots[currentIndex]['title'],
description = hotSpots[currentIndex]['description'],
hotSpotTop = $currentHotSpot.offset().top,
hotSpotLeft = $currentHotSpot.offset().left,
hotSpotHalfSize = $currentHotSpot.width() / 2,
speechBubbleHalfSize = $speechBubble.width() / 2,
topTarget = hotSpotTop - $speechBubble.height(),
leftTarget = (hotSpotLeft - (speechBubbleHalfSize)) + hotSpotHalfSize;
$speechBubble.empty();
$speechBubble.append($('<h1>').text(title));
$speechBubble.append($('<p>').text(description));
$speechBubble.css({
'top': topTarget - 20,
'left': leftTarget,
'display': 'block'
}).stop().animate({
opacity: 1
}, 200);
}
function handleHotSpotMouseout(){
var $speechBubble = $('.speech-bubble');
$speechBubble.stop().animate({
opacity: 0
}, 200, function(){
$speechBubble.hide();
});
}
function positionHotSpots() {
var windowWidth = $window.width(),
windowHeight = $window.height(),
windowAspectRatio = windowWidth / windowHeight,
$hotSpot = $('.hot-spot');
$hotSpot.each(function(index) {
var xPos = hotSpots[index]['x'],
yPos = hotSpots[index]['y'],
desiredLeft = 0,
desiredTop = 0;
if (windowAspectRatio > imageAspectRatio) {
yPos = (yPos / imageHeight) * 100;
xPos = (xPos / imageWidth) * 100;
} else {
yPos = ((yPos / (windowAspectRatio / imageAspectRatio)) / imageHeight) * 100;
xPos = ((xPos / (windowAspectRatio / imageAspectRatio)) / imageWidth) * 100;
}
$(this).css({
'margin-top': yPos + '%',
'margin-left': xPos + '%'
});
});
}
appendHotSpots();
appendSpeechBubble();
$(window).resize(positionHotSpots);
$('.hot-spot').on('mouseover', handleHotSpotMouseover);
$('.hot-spot').on('mouseout', handleHotSpotMouseout);Пример (скорее всего сами всплывающие подсказки не будут видны, из-за некоторых родительских свойств)
