Highlighted

Re: Modal & Image Map [Branched from Popup box when I click an imagemap]

New Here ,
May 17, 2019

Copy link to clipboard

Copied

I am experiencing a similar situation.
I have an imagemap in which I want to open 5 different modals. Until now I could only manage to open the same modal on several areas. How can I connect a new modal to another area in the image?
Can somebody help me here?

rebekkab20850564  wrote

I am experiencing a similar situation.
I have an imagemap in which I want to open 5 different modals. Until now I could only manage to open the same modal on several areas. How can I connect a new modal to another area in the image?
Can somebody help me here?

You can use the one image and put some 'anchor' tag hotspots positioned over the image.

Normally I would not use multiple modals, I would use just the 1 modal and populate it with information either from a database or a javascript array of data but I think the below is going to be simpler to understand:

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<title>HotSpot</title>

<style>

body {

font-family: helvetica, sans-serif;

font-size: 14px;

line-height: 17px;

}

* {

box-sizing: border-box;

}

h1 {

text-align: center;

margin: 0;

padding: 50px 0 30px 0;

}

.product {

position: relative;

width: 95%;

margin: 0 auto;

}

@media screen and (max-width: 768px) {

.product {

width: 100%;

}

}

.product img {

max-width: 100%;

}

.hotspot {

position: absolute;

display: inline-block;

background-color: red;

color: #fff;

text-decoration: none;

padding: 10px 15px;

border-radius: 50%;

}

.hotspot:hover {

background-color: #666;

}

@media screen and (max-width: 768px) {

.hotspot {

padding: 5px 10px;

}

}

.spot_1 {

top: 60%;

left: 23%;

}

.spot_2 {

top: 50%;

left: 42%;

}

.spot_3 {

top: 30%;

left: 55%;

}

.spot_4 {

top: 20%;

left: 70%;

}

.spot_5 {

top: 55%;

left: 60%;

}

.modal {

position: absolute;

top: 50%;

transform: translateY(-50%);

background-color: #fff;

display: none;

box-shadow: 2px 2px 9px 4px rgba(0, 0, 0, 0.2);

width: 40%;

margin: 0 30%;

color: #000;

}

.modal h3 {

margin: 0;

padding: 10px 0;

}

.modal p {

margin: 0;

padding: 0 0 5px 0;

}

.modal_info {

padding: 15px;

}

.modal_info a{

position: absolute;

top: -28px;

right: 0;

display: inline-block;

text-decoration: none;

background-color: #000;

color: #fff;

padding: 7px 10px 4px 10px;

}

@media screen and (max-width: 768px) {

.modal_1, .modal_2, .modal_3, .modal_4, .modal_5 {

top: 0;

margin: 0 5%;

transform: translateY(0);

width: 90%;

}

}

</style>

<script src="https://code.jquery.com/jquery-3.2.1.min.js" integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4="

crossorigin="anonymous"></script>

<script>

$(document).ready(function(){

$('.product a').css('cursor' , 'pointer').click(function(){

$('.modal').fadeOut();

var modal = $(this).attr('data-modal');

if($(modal).is(':visible') == true) {

$(modal).fadeOut();

}

else {

$(modal).fadeIn();

}

});

});

</script>

</head>

<body>

<h1>Product Diagram</h1>

<div class="product">

<a href="#" class="hotspot spot_1" data-modal=".modal_1">+</a>

<a href="#" class="hotspot spot_2" data-modal=".modal_2">+</a>

<a href="#" class="hotspot spot_3" data-modal=".modal_3">+</a>

<a href="#" class="hotspot spot_4" data-modal=".modal_4">+</a>

<a href="#" class="hotspot spot_5" data-modal=".modal_5">+</a>

<img src="https://images.unsplash.com/photo-1549480017-d76466a4b7e8" alt="Tiger">

<div class="modal modal_1">

<div class="modal_info">

<img src="https://images.unsplash.com/photo-1553054366-ebbf4296eb32" alt="Tiger">

<h3>Modal 1</h3>

<p>Some text goes here. Some text goes here. Some text goes here. Some text goes here.</p>

<p>Some text goes here. Some text goes here. Some text goes here. Some text goes here.</p>

<p>Some text goes here. Some text goes here. Some text goes here. Some text goes here.</p>

<a href="#">X</a>

</div>

<!-- end modal info -->

</div>

<!-- end modal_1 -->

<div class="modal modal_2">

<div class="modal_info">

<img src="https://images.unsplash.com/photo-1557973254-3b9af1ee03aa" alt="Tiger">

<h3>Modal 2</h3>

<p>Some text goes here. Some text goes here. Some text goes here. Some text goes here.</p>

<p>Some text goes here. Some text goes here. Some text goes here. Some text goes here.</p>

<p>Some text goes here. Some text goes here. Some text goes here. Some text goes here.</p>

<a href="#">X</a>

</div>

<!-- end modal info -->

</div>

<!-- end modal_2 -->

<div class="modal modal_3">

<div class="modal_info">

<img src="https://images.unsplash.com/photo-1545462616-efed1939219f" alt="Tiger">

<h3>Modal 3</h3>

<p>Some text goes here. Some text goes here. Some text goes here. Some text goes here.</p>

<p>Some text goes here. Some text goes here. Some text goes here. Some text goes here.</p>

<p>Some text goes here. Some text goes here. Some text goes here. Some text goes here.</p>

<a href="#">X</a>

</div>

<!-- end modal info -->

</div>

<!-- end modal_3 -->

<div class="modal modal_4">

<div class="modal_info">

<img src="https://images.unsplash.com/photo-1494979362559-7f9efdc9b88c" alt="Tiger">

<h3>Modal 4</h3>

<p>Some text goes here. Some text goes here. Some text goes here. Some text goes here.</p>

<p>Some text goes here. Some text goes here. Some text goes here. Some text goes here.</p>

<p>Some text goes here. Some text goes here. Some text goes here. Some text goes here.</p>

<a href="#">X</a>

</div>

<!-- end modal info -->

</div>

<!-- end modal_4 -->

<div class="modal modal_5">

<div class="modal_info">

<img src="https://images.unsplash.com/photo-1477764250597-dffe9f601ae8" alt="Tiger">

<h3>Modal 5</h3>

<p>Some text goes here. Some text goes here. Some text goes here. Some text goes here.</p>

<p>Some text goes here. Some text goes here. Some text goes here. Some text goes here.</p>

<p>Some text goes here. Some text goes here. Some text goes here. Some text goes here.</p>

<a href="#">X</a>

</div>

<!-- end modal info -->

</div>

<!-- end modal_5 -->

</div>

<!-- end product -->

</body>

</html>

Views

772

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more

Re: Modal & Image Map [Branched from Popup box when I click an imagemap]

New Here ,
May 17, 2019

Copy link to clipboard

Copied

I am experiencing a similar situation.
I have an imagemap in which I want to open 5 different modals. Until now I could only manage to open the same modal on several areas. How can I connect a new modal to another area in the image?
Can somebody help me here?

rebekkab20850564  wrote

I am experiencing a similar situation.
I have an imagemap in which I want to open 5 different modals. Until now I could only manage to open the same modal on several areas. How can I connect a new modal to another area in the image?
Can somebody help me here?

You can use the one image and put some 'anchor' tag hotspots positioned over the image.

Normally I would not use multiple modals, I would use just the 1 modal and populate it with information either from a database or a javascript array of data but I think the below is going to be simpler to understand:

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<title>HotSpot</title>

<style>

body {

font-family: helvetica, sans-serif;

font-size: 14px;

line-height: 17px;

}

* {

box-sizing: border-box;

}

h1 {

text-align: center;

margin: 0;

padding: 50px 0 30px 0;

}

.product {

position: relative;

width: 95%;

margin: 0 auto;

}

@media screen and (max-width: 768px) {

.product {

width: 100%;

}

}

.product img {

max-width: 100%;

}

.hotspot {

position: absolute;

display: inline-block;

background-color: red;

color: #fff;

text-decoration: none;

padding: 10px 15px;

border-radius: 50%;

}

.hotspot:hover {

background-color: #666;

}

@media screen and (max-width: 768px) {

.hotspot {

padding: 5px 10px;

}

}

.spot_1 {

top: 60%;

left: 23%;

}

.spot_2 {

top: 50%;

left: 42%;

}

.spot_3 {

top: 30%;

left: 55%;

}

.spot_4 {

top: 20%;

left: 70%;

}

.spot_5 {

top: 55%;

left: 60%;

}

.modal {

position: absolute;

top: 50%;

transform: translateY(-50%);

background-color: #fff;

display: none;

box-shadow: 2px 2px 9px 4px rgba(0, 0, 0, 0.2);

width: 40%;

margin: 0 30%;

color: #000;

}

.modal h3 {

margin: 0;

padding: 10px 0;

}

.modal p {

margin: 0;

padding: 0 0 5px 0;

}

.modal_info {

padding: 15px;

}

.modal_info a{

position: absolute;

top: -28px;

right: 0;

display: inline-block;

text-decoration: none;

background-color: #000;

color: #fff;

padding: 7px 10px 4px 10px;

}

@media screen and (max-width: 768px) {

.modal_1, .modal_2, .modal_3, .modal_4, .modal_5 {

top: 0;

margin: 0 5%;

transform: translateY(0);

width: 90%;

}

}

</style>

<script src="https://code.jquery.com/jquery-3.2.1.min.js" integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4="

crossorigin="anonymous"></script>

<script>

$(document).ready(function(){

$('.product a').css('cursor' , 'pointer').click(function(){

$('.modal').fadeOut();

var modal = $(this).attr('data-modal');

if($(modal).is(':visible') == true) {

$(modal).fadeOut();

}

else {

$(modal).fadeIn();

}

});

});

</script>

</head>

<body>

<h1>Product Diagram</h1>

<div class="product">

<a href="#" class="hotspot spot_1" data-modal=".modal_1">+</a>

<a href="#" class="hotspot spot_2" data-modal=".modal_2">+</a>

<a href="#" class="hotspot spot_3" data-modal=".modal_3">+</a>

<a href="#" class="hotspot spot_4" data-modal=".modal_4">+</a>

<a href="#" class="hotspot spot_5" data-modal=".modal_5">+</a>

<img src="https://images.unsplash.com/photo-1549480017-d76466a4b7e8" alt="Tiger">

<div class="modal modal_1">

<div class="modal_info">

<img src="https://images.unsplash.com/photo-1553054366-ebbf4296eb32" alt="Tiger">

<h3>Modal 1</h3>

<p>Some text goes here. Some text goes here. Some text goes here. Some text goes here.</p>

<p>Some text goes here. Some text goes here. Some text goes here. Some text goes here.</p>

<p>Some text goes here. Some text goes here. Some text goes here. Some text goes here.</p>

<a href="#">X</a>

</div>

<!-- end modal info -->

</div>

<!-- end modal_1 -->

<div class="modal modal_2">

<div class="modal_info">

<img src="https://images.unsplash.com/photo-1557973254-3b9af1ee03aa" alt="Tiger">

<h3>Modal 2</h3>

<p>Some text goes here. Some text goes here. Some text goes here. Some text goes here.</p>

<p>Some text goes here. Some text goes here. Some text goes here. Some text goes here.</p>

<p>Some text goes here. Some text goes here. Some text goes here. Some text goes here.</p>

<a href="#">X</a>

</div>

<!-- end modal info -->

</div>

<!-- end modal_2 -->

<div class="modal modal_3">

<div class="modal_info">

<img src="https://images.unsplash.com/photo-1545462616-efed1939219f" alt="Tiger">

<h3>Modal 3</h3>

<p>Some text goes here. Some text goes here. Some text goes here. Some text goes here.</p>

<p>Some text goes here. Some text goes here. Some text goes here. Some text goes here.</p>

<p>Some text goes here. Some text goes here. Some text goes here. Some text goes here.</p>

<a href="#">X</a>

</div>

<!-- end modal info -->

</div>

<!-- end modal_3 -->

<div class="modal modal_4">

<div class="modal_info">

<img src="https://images.unsplash.com/photo-1494979362559-7f9efdc9b88c" alt="Tiger">

<h3>Modal 4</h3>

<p>Some text goes here. Some text goes here. Some text goes here. Some text goes here.</p>

<p>Some text goes here. Some text goes here. Some text goes here. Some text goes here.</p>

<p>Some text goes here. Some text goes here. Some text goes here. Some text goes here.</p>

<a href="#">X</a>

</div>

<!-- end modal info -->

</div>

<!-- end modal_4 -->

<div class="modal modal_5">

<div class="modal_info">

<img src="https://images.unsplash.com/photo-1477764250597-dffe9f601ae8" alt="Tiger">

<h3>Modal 5</h3>

<p>Some text goes here. Some text goes here. Some text goes here. Some text goes here.</p>

<p>Some text goes here. Some text goes here. Some text goes here. Some text goes here.</p>

<p>Some text goes here. Some text goes here. Some text goes here. Some text goes here.</p>

<a href="#">X</a>

</div>

<!-- end modal info -->

</div>

<!-- end modal_5 -->

</div>

<!-- end product -->

</body>

</html>

Views

773

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
May 17, 2019 0
Adobe Community Professional ,
May 17, 2019

Copy link to clipboard

Copied

I have branched this to a new discussion.

#1 problem:  Old fashioned raster image maps are not responsive.  The hotspots inevitably drift out of register when the image re-scales to fit smaller devices.

Why do you need an image map for this?  Could you use individual images instead of a map?

Nancy O'Shea, ACP
Alt-Web.com

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
May 17, 2019 0
New Here ,
May 20, 2019

Copy link to clipboard

Copied

Thank you.

I have only one image in which I would like to connect several parts of it with a popup window. That's why I suggested that I have to use imagemap, although I know it's not convenient for responsive websites.

Do you have a better suggestion what I could do? My idea was to create something similar to Sony's image of the camera modulars like here (upper middle of the page): Kleine robuste Premiumkamera RX0 II | DSC-RX0M2 | Sony DE

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
May 20, 2019 0
New Here ,
May 20, 2019

Copy link to clipboard

Copied

I could also use several images. But how would the code look like then? If I insert the same code with another img src it doesn't work. 😕

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<meta http-equiv="X-UA-Compatible" content="ie=edge">

<title>Modal</title>

<style>

  *{

   margin: 0;

   padding: 0;

   box-sizing: border-box;

  }

  body{

   font-family: calibri;

  }

  a:link,

  a:visited{

   text-decoration: none;

  }

  .modal{

   background-color: rgba(0,0,0, .8);

   width:100%;

   height: 100vh;

   position: absolute;

   top: 0;

   left: 0;

   z-index: 10;

   opacity: 0;

   visibility: hidden;

   transition: all .5s;

  }

  .modal__content{

   width: 30%;

   height: 30%;

   background-color: #fff;

   position: absolute;

   top: 50%;

   left: 50%;

   transform: translate(-50%, -50%);

   padding: 2em;

   border-radius: 1em;

   opacity: 0;

   visibility: hidden;

   transition: all .5s;

  }

  #modal:target{

   opacity: 1;

   visibility: visible;

  }

  #modal:target .modal__content{

   opacity: 1;

   visibility: visible;

  }

  .modal__close{

   color: #363636;

   font-size: 2em;

   position: absolute;

   top: .5em;

   right: 1em;

  }

  .modal__heading{

   color: #e11021;

   margin-bottom: 1em;

  }

  .modal__paragraph{

   line-height: 1.5em;

  }

.modal-open{

display: inline-block;

color: #e11021;

margin: 2em;

}

</style>

</head>

<body>

<div class="to is-default-on">

  <img src="https://www.expo21xx.com/news/wp-content/uploads/Allied-Mako-G-508-POL-camera-700x389.jpg" width="145" height="126" alt="camera" usemap="#cameramap">

  <map name="cameramap">

    <area shape="rect" coords="46,38,338,242" alt="links" href="#modal">

  <div class="modal" id="modal">

    <div class="modal__content">

      <a href="#" class="modal__close">&times;</a>

      <h2 class="modal__heading">Headline</h2>

      <p class="modal__paragraph">Content 1.</p>

    </div>

<div class="to is-default-on">

  <img src="https://www.alliedvision.com/fileadmin/_processed_/c/e/csm_Alvium_chip_250e5fec08.png" width="145" height="126" alt="camera" usemap="#cameramap">

  <map name="cameramap">

    <area shape="rect" coords="46,38,338,242" alt="links" href="#modal">

  <div class="modal" id="modal">

    <div class="modal__content">

      <a href="#" class="modal__close">&times;</a>

      <h2 class="modal__heading">Headline2</h2>

      <p class="modal__paragraph">Content 2.</p>

    </div>   

   

</div>

<script type="text/javascript">

$(document).ready(function () {

        $('#myModal').on('show.bs.modal', function (e) {

            var image = $(e.relatedTarget).attr('src');

            $(".img-responsive").attr("src", image);

        });

});

</script>

 

</body>

</html>

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
May 20, 2019 0
LEGEND ,
May 20, 2019

Copy link to clipboard

Copied

rebekkab20850564  wrote

I am experiencing a similar situation.
I have an imagemap in which I want to open 5 different modals. Until now I could only manage to open the same modal on several areas. How can I connect a new modal to another area in the image?
Can somebody help me here?

You can use the one image and put some 'anchor' tag hotspots positioned over the image.

Normally I would not use multiple modals, I would use just the 1 modal and populate it with information either from a database or a javascript array of data but I think the below is going to be simpler to understand:

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<title>HotSpot</title>

<style>

body {

font-family: helvetica, sans-serif;

font-size: 14px;

line-height: 17px;

}

* {

box-sizing: border-box;

}

h1 {

text-align: center;

margin: 0;

padding: 50px 0 30px 0;

}

.product {

position: relative;

width: 95%;

margin: 0 auto;

}

@media screen and (max-width: 768px) {

.product {

width: 100%;

}

}

.product img {

max-width: 100%;

}

.hotspot {

position: absolute;

display: inline-block;

background-color: red;

color: #fff;

text-decoration: none;

padding: 10px 15px;

border-radius: 50%;

}

.hotspot:hover {

background-color: #666;

}

@media screen and (max-width: 768px) {

.hotspot {

padding: 5px 10px;

}

}

.spot_1 {

top: 60%;

left: 23%;

}

.spot_2 {

top: 50%;

left: 42%;

}

.spot_3 {

top: 30%;

left: 55%;

}

.spot_4 {

top: 20%;

left: 70%;

}

.spot_5 {

top: 55%;

left: 60%;

}

.modal {

position: absolute;

top: 50%;

transform: translateY(-50%);

background-color: #fff;

display: none;

box-shadow: 2px 2px 9px 4px rgba(0, 0, 0, 0.2);

width: 40%;

margin: 0 30%;

color: #000;

}

.modal h3 {

margin: 0;

padding: 10px 0;

}

.modal p {

margin: 0;

padding: 0 0 5px 0;

}

.modal_info {

padding: 15px;

}

.modal_info a{

position: absolute;

top: -28px;

right: 0;

display: inline-block;

text-decoration: none;

background-color: #000;

color: #fff;

padding: 7px 10px 4px 10px;

}

@media screen and (max-width: 768px) {

.modal_1, .modal_2, .modal_3, .modal_4, .modal_5 {

top: 0;

margin: 0 5%;

transform: translateY(0);

width: 90%;

}

}

</style>

<script src="https://code.jquery.com/jquery-3.2.1.min.js" integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4="

crossorigin="anonymous"></script>

<script>

$(document).ready(function(){

$('.product a').css('cursor' , 'pointer').click(function(){

$('.modal').fadeOut();

var modal = $(this).attr('data-modal');

if($(modal).is(':visible') == true) {

$(modal).fadeOut();

}

else {

$(modal).fadeIn();

}

});

});

</script>

</head>

<body>

<h1>Product Diagram</h1>

<div class="product">

<a href="#" class="hotspot spot_1" data-modal=".modal_1">+</a>

<a href="#" class="hotspot spot_2" data-modal=".modal_2">+</a>

<a href="#" class="hotspot spot_3" data-modal=".modal_3">+</a>

<a href="#" class="hotspot spot_4" data-modal=".modal_4">+</a>

<a href="#" class="hotspot spot_5" data-modal=".modal_5">+</a>

<img src="https://images.unsplash.com/photo-1549480017-d76466a4b7e8" alt="Tiger">

<div class="modal modal_1">

<div class="modal_info">

<img src="https://images.unsplash.com/photo-1553054366-ebbf4296eb32" alt="Tiger">

<h3>Modal 1</h3>

<p>Some text goes here. Some text goes here. Some text goes here. Some text goes here.</p>

<p>Some text goes here. Some text goes here. Some text goes here. Some text goes here.</p>

<p>Some text goes here. Some text goes here. Some text goes here. Some text goes here.</p>

<a href="#">X</a>

</div>

<!-- end modal info -->

</div>

<!-- end modal_1 -->

<div class="modal modal_2">

<div class="modal_info">

<img src="https://images.unsplash.com/photo-1557973254-3b9af1ee03aa" alt="Tiger">

<h3>Modal 2</h3>

<p>Some text goes here. Some text goes here. Some text goes here. Some text goes here.</p>

<p>Some text goes here. Some text goes here. Some text goes here. Some text goes here.</p>

<p>Some text goes here. Some text goes here. Some text goes here. Some text goes here.</p>

<a href="#">X</a>

</div>

<!-- end modal info -->

</div>

<!-- end modal_2 -->

<div class="modal modal_3">

<div class="modal_info">

<img src="https://images.unsplash.com/photo-1545462616-efed1939219f" alt="Tiger">

<h3>Modal 3</h3>

<p>Some text goes here. Some text goes here. Some text goes here. Some text goes here.</p>

<p>Some text goes here. Some text goes here. Some text goes here. Some text goes here.</p>

<p>Some text goes here. Some text goes here. Some text goes here. Some text goes here.</p>

<a href="#">X</a>

</div>

<!-- end modal info -->

</div>

<!-- end modal_3 -->

<div class="modal modal_4">

<div class="modal_info">

<img src="https://images.unsplash.com/photo-1494979362559-7f9efdc9b88c" alt="Tiger">

<h3>Modal 4</h3>

<p>Some text goes here. Some text goes here. Some text goes here. Some text goes here.</p>

<p>Some text goes here. Some text goes here. Some text goes here. Some text goes here.</p>

<p>Some text goes here. Some text goes here. Some text goes here. Some text goes here.</p>

<a href="#">X</a>

</div>

<!-- end modal info -->

</div>

<!-- end modal_4 -->

<div class="modal modal_5">

<div class="modal_info">

<img src="https://images.unsplash.com/photo-1477764250597-dffe9f601ae8" alt="Tiger">

<h3>Modal 5</h3>

<p>Some text goes here. Some text goes here. Some text goes here. Some text goes here.</p>

<p>Some text goes here. Some text goes here. Some text goes here. Some text goes here.</p>

<p>Some text goes here. Some text goes here. Some text goes here. Some text goes here.</p>

<a href="#">X</a>

</div>

<!-- end modal info -->

</div>

<!-- end modal_5 -->

</div>

<!-- end product -->

</body>

</html>

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
May 20, 2019 1
New Here ,
May 20, 2019

Copy link to clipboard

Copied

Wow! This is incredible! Thank you so much! I just tried it and it works. Amazing!

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
May 20, 2019 0