Question:
How do I sort out coordinates of word positions on an image using Bootstrap's carousel slider ?
I could put adjectives on the image and they randomly appear in different positions on the screen, maybe with different effects as well: fade.
More details:
I am using a popular image slider in bootstrap called carousel and I want to assign adjectives to an image that will appear at random points in this image, if possible with transition effect. If the photo is 800×400, the drawing of the coordinates of the point where the words must appear cannot exceed the maximum resolution of the image
Here's the code:
<!-- Wrapper for Slides -->
<div class="carousel-inner">
<div class="item active">
<!-- Set the first background image using inline CSS below. -->
<div class="fill" style="background-image:url('http://placehold.it/1900x1080&text=Slide One');"></div>
<div class="carousel-caption">
<h2>Caption 1</h2>
</div>
</div>
<div class="item">
<!-- Set the second background image using inline CSS below. -->
<div class="fill" style="background-image:url('http://placehold.it/1900x1080&text=Slide Two');"></div>
<div class="carousel-caption">
<h2>Caption 2</h2>
</div>
</div>
<div class="item">
<!-- Set the third background image using inline CSS below. -->
<div class="fill" style="background-image:url('http://placehold.it/1900x1080&text=Slide Three');"></div>
<div class="carousel-caption">
<h2>Caption 3</h2>
</div>
</div>
</div>
Answer:
I did a simple example in fiddle, there are things to improve but I can already have an idea of how it can be done: https://jsfiddle.net/henriquedpereira/9c6t3h9d/
$('#meuCarousel').bind('slid', function(e) { var image = $("#meuCarousel .active .imgCarousel"); var container = $("#meuCarousel .active .containerCarousel"); var divText = $("#meuCarousel .active .textCarousel"); divText.hide(); //Pega o valor do texto, junta em uma array e pega um valor aleatorio var arrayText = divText.html().split(",").map(String); var text = arrayText[Math.floor(Math.random() * arrayText.length)]; divText.html(text); //Pega o tamanho da imagem e depois um numero aletorio para aparecer o texto var textPositionWidth = Math.floor(Math.random() * $("#meuCarousel .item").width()) + 1; var textPositioHeight = Math.floor(Math.random() * $("#meuCarousel .item").height()) + 1; divText.show().animate({ left: textPositionWidth, top: textPositioHeight }, 500); }); $('#meuCarousel').trigger('slid');
.item { height: 400px; } .textCarousel { z-index: 100; position: absolute; color: white; font-size: 24px; font-weight: bold; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <script src="https://netdna.bootstrapcdn.com/bootstrap/3.0.2/js/bootstrap.min.js"></script> <link href="https://netdna.bootstrapcdn.com/bootstrap/3.0.2/css/bootstrap.min.css" rel="stylesheet" /> <div id="meuCarousel" class="carousel slide" data-ride="carousel"> <!-- Indicators --> <ol class="carousel-indicators"> <li data-target="#meuCarousel" data-slide-to="0" class="active"></li> <li data-target="#meuCarousel" data-slide-to="1" class=""></li> <li data-target="#meuCarousel" data-slide-to="2" class=""></li> </ol> <div class="carousel-inner"> <div class="item active"> <div class="containerCarousel"> <img class="imgCarousel" src="http://www.noao.edu/image_gallery/images/d4/m81y.jpg" /> <p class="textCarousel">Test12e!,Te333ste!,Te555ste!,T666este!</p> </div> </div> <div class="item"> <div class="containerCarousel"> <img class="imgCarousel" src="http://www.noao.edu/image_gallery/images/d4/m81y.jpg" /> <p class="textCarousel">Teste2!</p> </div> </div> </div> <a class="left carousel-control" href="#meuCarousel" data-slide="prev"><span class="glyphicon glyphicon-chevron-left"></span></a> <a class="right carousel-control" href="#meuCarousel" data-slide="next"><span class="glyphicon glyphicon-chevron-right"></span></a> </div>