/ Сайтостроение / Scripts & jquery / Заметки на изображении

Заметки на изображении

12.03.2017

486


  • Warning: Use of undefined constant html - assumed 'html' (this will throw an Error in a future version of PHP) in /home/htvtwmhs/public_html/wp-content/themes/tester/single-tech2.php on line 42

  • Warning: Use of undefined constant css - assumed 'css' (this will throw an Error in a future version of PHP) in /home/htvtwmhs/public_html/wp-content/themes/tester/single-tech2.php on line 43

  • Warning: Use of undefined constant script - assumed 'script' (this will throw an Error in a future version of PHP) in /home/htvtwmhs/public_html/wp-content/themes/tester/single-tech2.php on line 44

  • Warning: Use of undefined constant primer - assumed 'primer' (this will throw an Error in a future version of PHP) in /home/htvtwmhs/public_html/wp-content/themes/tester/single-tech2.php on line 45

  • Warning: Use of undefined constant video - assumed 'video' (this will throw an Error in a future version of PHP) in /home/htvtwmhs/public_html/wp-content/themes/tester/single-tech2.php on line 46

Помещаем на изображение заметки поясняющие ту или иную деталь. Данная функция может быть полезна для пояснения каких-либо чертежей или схем, выделения основных преимуществ товара и т.д.

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

Метки на изображении 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="https://opttour.ru/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(https://opttour.ru/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);

Пример (скорее всего сами всплывающие подсказки не будут видны, из-за некоторых родительских свойств)


Warning: Use of undefined constant html - assumed 'html' (this will throw an Error in a future version of PHP) in /home/htvtwmhs/public_html/wp-content/themes/tester/single-tech2.php on line 51






  • Title here


    Description here


    Close






  • Title here


    Description 2 here


    Close




Warning: Use of undefined constant css - assumed 'css' (this will throw an Error in a future version of PHP) in /home/htvtwmhs/public_html/wp-content/themes/tester/single-tech2.php on line 52
.cd-product-wrapper {
  display: inline-block;
  position: relative;
  margin: 0 auto;
  width: 100%;
}
	
.cd-product-wrapper > img {display: block;}

.cd-single-point {position: absolute; border-radius: 50%; list-style: none;}

.cd-single-point > a {
  position: relative;
  z-index: 2;
  display: block;
  width: 30px;
  height: 30px;
  border-radius: inherit;
  background: #d95353;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.3);
  -webkit-transition: background-color 0.2s;
  -moz-transition: background-color 0.2s;
  transition: background-color 0.2s;
}

.cd-single-point > a::after, .cd-single-point > a:before {
  /* rotating plus icon */
  content: '';
  position: absolute;
  left: 50%;
  top: 50%;
  bottom: auto;
  right: auto;
  -webkit-transform: translateX(-50%) translateY(-50%);
  -moz-transform: translateX(-50%) translateY(-50%);
  -ms-transform: translateX(-50%) translateY(-50%);
  -o-transform: translateX(-50%) translateY(-50%);
  transform: translateX(-50%) translateY(-50%);
  background-color: white;
  -webkit-transition-property: -webkit-transform;
  -moz-transition-property: -moz-transform;
  transition-property: transform;
  -webkit-transition-duration: 0.2s;
  -moz-transition-duration: 0.2s;
  transition-duration: 0.2s;
}

.cd-single-point > a::after {height: 2px; width: 12px;}

.cd-single-point > a::before {height: 12px; width: 2px;}

.cd-single-point::after {
  /* this is used to create the pulse animation */
  content: '';
  position: absolute;
  z-index: 1;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  border-radius: inherit;
  background-color: transparent;
  -webkit-animation: cd-pulse 2s infinite;
  -moz-animation: cd-pulse 2s infinite;
  animation: cd-pulse 2s infinite;
}

.cd-single-point.is-open > a {background-color: #475f74;}

.cd-single-point.is-open > a::after, .cd-single-point.is-open > a::before {
  -webkit-transform: translateX(-50%) translateY(-50%) rotate(135deg);
  -moz-transform: translateX(-50%) translateY(-50%) rotate(135deg);
  -ms-transform: translateX(-50%) translateY(-50%) rotate(135deg);
  -o-transform: translateX(-50%) translateY(-50%) rotate(135deg);
  transform: translateX(-50%) translateY(-50%) rotate(135deg);
}
  
.cd-single-point.is-open::after {
  /* remove pulse effect */
  display: none;
}

.cd-single-point.is-open .cd-more-info {
  visibility: visible;
  opacity: 1;
  -webkit-transform: scale(1);
  -moz-transform: scale(1);
  -ms-transform: scale(1);
  -o-transform: scale(1);
  transform: scale(1);
  -webkit-transition: opacity 0.3s 0s, visibility 0s 0s, -webkit-transform 0.3s 0s, top 0.3s 0s, bottom 0.3s 0s, left 0.3s 0s, right 0.3s 0s;
  -moz-transition: opacity 0.3s 0s, visibility 0s 0s, -moz-transform 0.3s 0s, top 0.3s 0s, bottom 0.3s 0s, left 0.3s 0s, right 0.3s 0s;
  transition: opacity 0.3s 0s, visibility 0s 0s, transform 0.3s 0s, top 0.3s 0s, bottom 0.3s 0s, left 0.3s 0s, right 0.3s 0s;
}

.cd-single-point.visited > a {background-color: #475f74;}

.cd-single-point.visited::after {
  /* pulse effect no more active on visited elements */
  display: none;
}

/* Расположение меток */

.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%;}


@media only screen and (min-width: 600px) {
  .cd-single-point.is-open .cd-more-info.cd-left {right: 140%;}
  .cd-single-point.is-open .cd-more-info.cd-right {left: 140%;}
  .cd-single-point.is-open .cd-more-info.cd-top {bottom: 140%;}
  .cd-single-point.is-open .cd-more-info.cd-bottom {top: 140%;}
}

@-webkit-keyframes cd-pulse {
  0% {
    -webkit-transform: scale(1);
    box-shadow: inset 0 0 1px 1px rgba(217, 83, 83, 0.8);
  }

  50% {
    box-shadow: inset 0 0 1px 1px rgba(217, 83, 83, 0.8);
  }

  100% {
    -webkit-transform: scale(1.6);
    box-shadow: inset 0 0 1px 1px rgba(217, 83, 83, 0);
  }
}
	
@-moz-keyframes cd-pulse {
  0% {
    -moz-transform: scale(1);
    box-shadow: inset 0 0 1px 1px rgba(217, 83, 83, 0.8);
  }

  50% {
    box-shadow: inset 0 0 1px 1px rgba(217, 83, 83, 0.8);
  }

  100% {
    -moz-transform: scale(1.6);
    box-shadow: inset 0 0 1px 1px rgba(217, 83, 83, 0);
  }
}
		
@keyframes cd-pulse {
  0% {
    -webkit-transform: scale(1);
    -moz-transform: scale(1);
    -ms-transform: scale(1);
    -o-transform: scale(1);
    transform: scale(1);
    box-shadow: inset 0 0 1px 1px rgba(217, 83, 83, 0.8);
  }

  50% {
    box-shadow: inset 0 0 1px 1px rgba(217, 83, 83, 0.8);
  }

  100% {
    -webkit-transform: scale(1.6);
    -moz-transform: scale(1.6);
    -ms-transform: scale(1.6);
    -o-transform: scale(1.6);
    transform: scale(1.6);
    box-shadow: inset 0 0 1px 1px rgba(217, 83, 83, 0);
  }
}
			
.cd-single-point .cd-more-info {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 3;
  width: 100%;
  height: 100%;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  text-align: left;
  line-height: 1.5;
  background-color: rgba(255, 255, 255, 0.95);
  padding: 2em 1em 1em;
  visibility: hidden;
  opacity: 0;
  -webkit-transform: scale(0.8);
  -moz-transform: scale(0.8);
  -ms-transform: scale(0.8);
  -o-transform: scale(0.8);
  transform: scale(0.8);
  -webkit-transition: opacity 0.3s 0s, visibility 0s 0.3s, -webkit-transform 0.3s 0s, top 0.3s 0s, bottom 0.3s 0s, left 0.3s 0s, right 0.3s 0s;
  -moz-transition: opacity 0.3s 0s, visibility 0s 0.3s, -moz-transform 0.3s 0s, top 0.3s 0s, bottom 0.3s 0s, left 0.3s 0s, right 0.3s 0s;
  transition: opacity 0.3s 0s, visibility 0s 0.3s, transform 0.3s 0s, top 0.3s 0s, bottom 0.3s 0s, left 0.3s 0s, right 0.3s 0s;
}
		
.cd-single-point .cd-more-info::before {
  /* triangle next to the interest point description - hidden on mobile */
  content: '';
  position: absolute;
  height: 0;
  width: 0;
  display: none;
  border: 8px solid transparent;
}
	  
.cd-single-point .cd-more-info h2 {
  font-size: 22px;
  font-size: 1.375rem;
  margin-bottom: .6em;
}

.cd-single-point .cd-more-info p { color: #758eb1;}

@media only screen and (min-width: 600px) {
  .cd-single-point .cd-more-info {
    position: absolute;
    width: auto;
    min-width: 100px;
    height: auto;
    padding: 1em;
    overflow-y: visible;
    line-height: 1.4;
    border-radius: 0.25em;
    box-shadow: 0 0 20px rgba(0, 0, 0, 0.5);
  }
	  
  .cd-single-point .cd-more-info::before {display: block;}
  
  .cd-single-point .cd-more-info.cd-left, .cd-single-point .cd-more-info.cd-right {
    top: 50%;
    bottom: auto;
    -webkit-transform: translateY(-50%);
    -moz-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    -o-transform: translateY(-50%);
    transform: translateY(-50%);
  }

  .cd-single-point .cd-more-info.cd-left::before, .cd-single-point .cd-more-info.cd-right::before {
    top: 50%;
    bottom: auto;
    -webkit-transform: translateY(-50%);
    -moz-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    -o-transform: translateY(-50%);
    transform: translateY(-50%);
  }

  .cd-single-point .cd-more-info.cd-left {right: 160%; left: auto;}

  .cd-single-point .cd-more-info.cd-left::before {
    border-left-color: rgba(255, 255, 255, 0.95);
    left: 100%;
  }

  .cd-single-point .cd-more-info.cd-right {left: 160%;}

  .cd-single-point .cd-more-info.cd-right::before {
    border-right-color: rgba(255, 255, 255, 0.95);
    right: 100%;
  }

  .cd-single-point .cd-more-info.cd-top, .cd-single-point .cd-more-info.cd-bottom {
    left: 50%;
    right: auto;
    -webkit-transform: translateX(-50%);
    -moz-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
    -o-transform: translateX(-50%);
    transform: translateX(-50%);
  }

  .cd-single-point .cd-more-info.cd-top::before, .cd-single-point .cd-more-info.cd-bottom::before {
    left: 50%;
    right: auto;
    -webkit-transform: translateX(-50%);
    -moz-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
    -o-transform: translateX(-50%);
    transform: translateX(-50%);
  }

  .cd-single-point .cd-more-info.cd-top {bottom: 160%; top: auto;}

  .cd-single-point .cd-more-info.cd-top::before {
    border-top-color: rgba(255, 255, 255, 0.95);
    top: 100%;
  }

  .cd-single-point .cd-more-info.cd-bottom {top: 160%;}

  .cd-single-point .cd-more-info.cd-bottom::before {
    border-bottom-color: rgba(255, 255, 255, 0.95);
    bottom: 100%;
  }

  .cd-single-point .cd-more-info h2 {
    font-size: 20px;
    font-size: 1.25rem;
    margin-bottom: 0;
  }

  .cd-single-point .cd-more-info p {font-size: 14px; font-size: 0.875rem;}
}

/* close the interest point description - only on mobile */
.cd-close-info {
  position: fixed;
  top: 0;
  right: 0;
  height: 44px;
  width: 44px;
}

.cd-close-info::after, .cd-close-info:before {
  content: '';
  position: absolute;
  left: 50%;
  top: 50%;
  bottom: auto;
  right: auto;
  -webkit-transform: translateX(-50%) translateY(-50%) rotate(45deg);
  -moz-transform: translateX(-50%) translateY(-50%) rotate(45deg);
  -ms-transform: translateX(-50%) translateY(-50%) rotate(45deg);
  -o-transform: translateX(-50%) translateY(-50%) rotate(45deg);
  transform: translateX(-50%) translateY(-50%) rotate(45deg);
  background-color: #475f74;
  -webkit-transition-property: -webkit-transform;
  -moz-transition-property: -moz-transform;
  transition-property: transform;
  -webkit-transition-duration: 0.2s;
  -moz-transition-duration: 0.2s;
  transition-duration: 0.2s;
}

.cd-close-info::after {height: 2px; width: 16px;}

.cd-close-info::before {height: 16px; width: 2px;}

@media only screen and (min-width: 600px) { .cd-close-info {display: none;} }

Warning: Use of undefined constant script - assumed 'script' (this will throw an Error in a future version of PHP) in /home/htvtwmhs/public_html/wp-content/themes/tester/single-tech2.php on line 53
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');
});
});

Warning: Use of undefined constant primer - assumed 'primer' (this will throw an Error in a future version of PHP) in /home/htvtwmhs/public_html/wp-content/themes/tester/single-tech2.php on line 54
  • Title here

    Description here

    Close
  • Title here

    Description 2 here

    Close

Warning: Use of undefined constant video - assumed 'video' (this will throw an Error in a future version of PHP) in /home/htvtwmhs/public_html/wp-content/themes/tester/single-tech2.php on line 55
  • Комментарии
  • Вложения

Добавить комментарий

Пока нет комментариев. Будь первым!

Заметки на изображении Заметки на изображении Заметки на изображении
Закрытый раздел сайта
Рекомендации для васЗакрытый раздел сайтаOpttour.ru
Спасибо! Наш менеджер свяжется с Вами в течении 5 минут.