I'm having a hard time understanding the formula to detect if a text is on a rotated shape, the formula I use right now is similar to the image below:
There's now a new variable which is the angle, here's the code :
https://jsfiddle.net/b62bkthk/2/
onornot();
function getRotationDegrees(obj) {
var matrix = obj.css("-webkit-transform") ||
obj.css("-moz-transform") ||
obj.css("-ms-transform") ||
obj.css("-o-transform") ||
obj.css("transform");
if(matrix !== 'none') {
var values = matrix.split('(')[1].split(')')[0].split(',');
var a = values[0];
var b = values[1];
var angle = Math.round(Math.atan2(b, a) * (180/Math.PI));
} else { var angle = 0; }
if(angle < 0) angle +=360;
return angle;
}
function onornot() {
$(".text").each(function() {
var self_text = $(this),
self_textLeft = self_text.position().left,
self_textTop = self_text.position().top,
self_textWidth = self_text.width(),
self_textHeight = self_text.height();
$(".shape, .background").each(function() {
var self_shape = $(this),
self_shapeLeft = self_shape.position().left,
self_shapeTop = self_shape.position().top,
self_shapeWidth = self_shape.width(),
self_shapeHeight = self_shape.height();
var angle = getRotationDegrees($(this));
if((self_textLeft + self_textWidth) > self_shapeLeft && self_textLeft < (self_shapeLeft + self_shapeWidth) && (self_textTop + self_textHeight) > self_shapeTop && self_textTop < (self_shapeTop + self_shapeHeight)){
alert(self_text.attr('id') + ' is on ' + self_shape.attr('id'));
} else {
alert(self_text.attr('id') + ' is NOT on ' + self_shape.attr('id'));
}
});
});
}
.elements,
.element {
position: absolute
}
#s1 {
background: #ffffff;
width: 400px;
height: 180px;
}
#t1 {
top: 20px;
left: 30px;
}
#s2 {
background: #333333;
top: 150px;
width: 400px;
height: 40px;
transform: rotate(330deg);
}
#t2 {
top: 161px;
left: 0px;
width: 400px;
text-align: center;
}
#t3 {
top: 100px;
left: -50px;
width: 400px;
text-align: right;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="layout" style="position:relative; margin-top:30px; margin-left:50px;">
<div class="elements">
<div id="s1" class="element background"></div>
<div id="t1" class="element text" style="color:red;">text</div>
<div id="s2" class="element shape"></div>
<div id="t2" class="element text" style="color:red;">text invert</div>
<div id="t3" class="element text" style="color:red;">text3</div>
</div>
</div>
As you can see, some texts are on the rotated shape but the alert box says that it is NOT on. What would the new formula look like ?
Related
I'm trying to make an image carousel with center animation. I don't want to use CSS animations, instead I'd like to use jQuery.
By pressing the 'Prev' button the animation will start. One of the slides which will be central begins to grow. I've used jQuery's animate() to animate width and height. Everything works as required except I can't understand why the animation makes the central slide jump.
I have created this sample. If you push the 'Prev' button the animation will start.
var scroll_speed = 4000;
var items_cnt = $('.mg_item').length;
var container_size = $(".main_cnt").innerWidth();
var item_avg_w = container_size / 5;
var item_center_w = ((item_avg_w / 100) * 20) + item_avg_w;
var item_center_h = (item_center_w / 16) * 9 + 30;
var item_w = ((container_size - item_center_w) / 4) - 2;
var item_h = ((item_w / 16) * 9);
var gallery_content = $('.gallery_body').html();
$('.gallery_body').html(gallery_content + gallery_content + gallery_content);
var items_offset = items_cnt * item_w + 14;
$('.gallery_body').css('left', -items_offset);
$('.mg_item').css("width", item_w);
$('.mg_item').css("height", item_h);
//$('.mg_item').css("margin-bottom", (item_center_h - item_h) / 2);
//$('.mg_item').css("margin-top", (item_center_h - item_h) / 2);
//$('.mg_item_с').css("width", item_center_w);
//$('.mg_item_с').css("height", item_center_h);
//document.documentElement.style.setProperty('--center_width', item_center_w + "px");
//document.documentElement.style.setProperty('--center_height', item_center_h + "px");
$('.main_cnt').css("height", item_center_h);
check_visible();
AssignCenter(0);
function gonext() {
AssignCenter(-1);
ZoomIn();
$('.gallery_body').animate({
left: '+=' + (item_w + 2),
}, scroll_speed, "linear", function() {
LoopSlides();
});
}
function goprev() {
AssignCenter(1);
ZoomIn();
$('.gallery_body').animate({
left: '-=' + (item_w + 2),
}, scroll_speed, "linear", function() {
LoopSlides();
});
}
function ZoomIn() {
$('.center').animate({
width: item_center_w + 'px',
height: item_center_h + 'px',
}, scroll_speed, function() {});
}
function LoopSlides() {
var cur_pos = $('.gallery_body').position().left
var left_margin = Math.abs(items_offset * 2 - item_w) * -1;
var right_margin = 0 - item_w;
if (cur_pos < left_margin) {
$('.gallery_body').css('left', -items_offset);
}
if (cur_pos >= 0) {
$('.gallery_body').css('left', -items_offset);
}
check_visible();
AssignCenter(0);
}
function check_visible() {
$('.mg_item').each(function(i, obj) {
var pos = $(this).offset().left;
if (pos < 0 || pos > container_size) {
$(this).addClass("invisible");
$(this).removeClass("active");
} else {
$(this).addClass("active");
$(this).removeClass("invisible");
}
});
}
function AssignCenter(offset) {
var center_slide = $('.active')[2 + offset];
$('.center').each(function(i, obj) {
$(this).removeClass("center");
});
$(center_slide).addClass("center");
//$(center_slide).css("width", item_center_w);
//$(center_slide).css("height", item_center_h);
}
:root {
--center_width: 0px;
--center_height: 0px;
}
.main_cnt {
background-color: rgb(255, 0, 0);
padding: 0px;
overflow: hidden;
margin: 0px;
}
.gallery_body {
width: 500%;
background-color: rgb(128, 128, 128);
position: relative;
}
.mg_item {
width: 198px;
height: 150px;
background-color: blue;
display: inline-block;
position: relative;
margin: -1px;
padding: 0px;
font-size: 120px;
}
.center {
background-color: brown;
/*width: var(--center_width) !important;
height: var(--center_height) !important;*/
}
.item_c {
width: 410px;
height: 150px;
background-color: blueviolet;
display: inline-block;
position: relative;
margin: -1px;
padding: 0px;
font-size: 120px;
}
.video-js .vjs-dock-text {
text-align: right;
}
<script src="https://code.jquery.com/jquery-2.2.0.min.js" type="text/javascript"></script>
<div class="main_cnt">
<div class="gallery_body">
<div class="mg_item">1</div>
<div class="mg_item">2</div>
<div class="mg_item">3</div>
<div class="mg_item">4</div>
<div class="mg_item">5</div>
<div class="mg_item">6</div>
<div class="mg_item">7</div>
</div>
</div>
<br><br>
<button onclick="gonext()">GONEXT</button>
<button onclick="goprev()">GOPREV</button>
<button onclick="check_visible()">CHEVIS</button>
I'm using the scroll function, but the code in my else if blocks do not appear to be executing.
I'm trying to hide one div and show another, once the user scrolls past a certain point.
Here's my code - what am I doing wrong?
var scrolTop = $('.content').offset().top;
var showOneHeight = $('.showOne').height();
var showTwoHeight2 = $('.showTwo').height();
var showThreeHeight3 = $('.showThree').height();
var showFourHeight4 = $('.showFour').height();
var offSetValue = scrolTop + (showOneHeight - 50);
var offSetValue2 = scrolTop + (showTwoHeight2 - 50);
var offSetValue3 = scrolTop + (showThreeHeight3 - 50);
var offSetValue4 = scrolTop + (showFourHeight4 - 50);
// alert(offSetValue3)
$(window).scroll(function() {
var height = $(window).scrollTop();
if (height > offSetValue) {
$('.showOne').fadeOut();
$('.showTwo').fadeIn('slow');
} else if (height > offSetValue2) {
$('.showOne').fadeOut();
$('.showTwo').fadeOut();
$('.showThree').fadeIn('slow');
} else if (height > offSetValue3) {
$('.showOne').fadeOut();
$('.showTwo').fadeOut();
$('.showThree').fadeOut();
$('.showFour').fadeIn();
}
});
body {
margin: 0px;
}
.contentArea {
display: flex;
height: 100vh;
}
.boxes {
width: 50%;
}
.pinned {
background: rgb(72, 91, 35);
}
h1 {
position: relative;
top: 50%;
transform: translateY(-50%);
margin: 0;
padding: 20px;
text-transform: capitalize;
font-family: system-ui;
color: #fff;
}
.content {
position: relative;
}
.box {
position: absolute;
left: 0px;
top: 50%;
transform: translateY(-50%);
display: none;
}
.showOne {
display: block;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.0/jquery.min.js"></script>
<div style="height: 500px; background: violet;"></div>
<div style="height: 500px; background:yellowgreen;"></div>
<div class="contentArea">
<div class="pinned boxes">
<h1>i am pinned side</h1>
</div>
<div class="content boxes">
<div class="box showOne">
<strong>paragraph one</strong>
<p>i am a paragraph. i have more text then a heading mostly too lines i have.</p>
</div>
<div class="box showTwo">
<strong>paragraph two</strong>
<p>i am a paragraph. i have more text then a heading mostly too lines i have.</p>
</div>
<div class="box showThree">
<strong>paragraph three</strong>
<p>i am a paragraph. i have more text then a heading mostly too lines i have.</p>
</div>
<div class="box showFour">
<strong>paragraph three</strong>
<p>i am a paragraph. i have more text then a heading mostly too lines i have.</p>
</div>
</div>
</div>
<div class="test" style="height: 500px; background: rgb(39, 96, 106);"></div>
<div style="height: 500px; background: rgb(46, 35, 46);"></div>
if (height > offSetValue) {
$('.showOne').fadeOut();
$('.showTwo').fadeIn('slow');
} else if (height > offSetValue2) {
$('.showOne').fadeOut();
$('.showTwo').fadeOut();
$('.showThree').fadeIn('slow');
} else if (height > offSetValue3) {
$('.showOne').fadeOut();
$('.showTwo').fadeOut();
$('.showThree').fadeOut();
$('.showFour').fadeIn();
}
The problem is the else if conditions. The else if is not executed because the first condition is ever true when the second and third is true.
You need to specify the range beetween heights are really true:
if ( (height > offSetValue) && (height < offSetValue2)) {
//exec
}
else if ( (height > offSetValue2) && (height < offSetValue3)) {
//exec
}
else if (height > offSetValue3) {
// exec
}
This resolve the problems whit if/else if (Y)
Edit 1:
Try this for confirm:
var scrolTop = $('.content').offset().top;
var showOneHeight = $('.showOne').height();
var showTwoHeight2 = $('.showTwo').height();
var showThreeHeight3 = $('.showThree').height();
var showFourHeight4 = $('.showFour').height();
var offSetValue = scrolTop + 500;
var offSetValue2 = scrolTop + 700;
var offSetValue3 = scrolTop + 900;
var offSetValue4 = scrolTop + 1100;
$(window).scroll(function() {
var height = $(window).scrollTop();
if ( (height > offSetValue) && (height < offSetValue2)) {
console.log(1)
$('.showOne').fadeOut();
$('.showTwo').fadeIn('slow');
$('.showThree').fadeOut();
$('.showFour').fadeOut();
} else if ( (height > offSetValue2) && (height < offSetValue3)) {
console.log(2)
$('.showOne').fadeOut();
$('.showTwo').fadeOut();
$('.showThree').fadeIn('slow');
$('.showFour').fadeOut();
} else if (height > offSetValue3) {
console.log(3)
$('.showOne').fadeOut();
$('.showTwo').fadeOut();
$('.showThree').fadeOut('slow');
}
});
I have button that creates block. When i click on the button, pops up a window with the settings of this block. And there i have settings with position of this block. When i create block and give theme position right, all is ok. But when add another block and give position left, left is givven to first and secont block, but not to second. Why?
function showBlockWindow() {
var modal = $(".modal-block-container");
if (modal.css('display', "none")) {
modal.css('display', "grid");
} else {
modal.css('display', "none");
}
}
function addBlock() {
var widthInp = $("#width").val();
var heightInp = $("#height").val();
var align = $(".form-align-block").val();
var background = "background-color:";
var backgroundColor = "black";
var closeTag = ";";
var width = "width:";
var percent = "%";
var px = "px";
var onclick = 'onclick="editBlock(this)"';
var margin = "margin:";
var height = "height:";
var block = ("<div class='block-" + align + " preview-block' " + onclick + " style=" + background + backgroundColor + closeTag + width +
widthInp + percent + closeTag + height + heightInp + px + "></div>");
$(".preview").append(block);
if (align == "left" || "right") {
$(".preview .preview-block").css("margin-" + align + "", "auto");
} else if (align == "center") {
$(".preview .preview-block").css("margin", "auto");
}
}
function editBlock(elem) {
$('.preview-block').removeClass('preview-block');
$(elem).addClass('preview-block');
$('.preview-edit-block').show();
}
.addBlock {
font-size: 1.2em;
list-style: none;
transition: 0.1s;
padding: 5px;
}
.modal-block-container {
justify-content: center;
right: 0;
left: 0;
position: fixed;
top: 15%;
display: none;
}
.input-block {
padding-bottom: 2%;
padding-top: 1%;
}
#width,
#height {
padding: 4px;
font-family: 'Scada', sans-serif;
}
.edit-block-modal {
padding-bottom: 2%;
}
.preview-edit-block {
background: #272822;
width: 20%;
height: 100vh;
float: right;
color: white;
font-family: 'Scada', sans-serif;
padding: 20px;
display: none;
position: fixed;
z-index: 9;
top: 0;
right: 0;
overflow: scroll;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="add-block">
<li class="addBlock" onclick="showBlockWindow()">Пустой блок</li>
</ul>
<div class="modal-block-container">
<div class="modal-insert-txt">
<div class="header-modal">
<h2>Вставить пустой блок</h2>
</div>
<hr>
<div class="edit-block-modal">
<span>Ширина</span><br>
<div class="input-block">
<input type="text" id="width"> %
</div>
<span>Длина</span><br>
<div class="input-block">
<input type="text" id="height"> px
</div>
<span>Выравнивание блока</span>
<div class="form-group">
<select class="form-align-block">
<option value="left">Слева</option>
<option value="center">По центру</option>
<option value="right">Справа</option>
</select>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn-insert-txt" onclick="addBlock()">Вставить текст</button>
</div>
</div>
</div>
<div class="preview">
</div>
<div class="preview-edit-block">
</div>
Help me please
I'm trying to detect when a div.text is on top of another (within the parent div#element), the background of the parent should change depending the existance of the overlap.
The issue is that when there's no overlap the script still detects one, this may be caused because each .text compares their position with itself over again.
$(".text").each(function() {
var self_text = $(this),
self_textid = self_text.attr('id'),
self_textLeft = self_text.position().left,
self_textTop = self_text.position().top,
self_textWidth = self_text.width(),
self_textHeight = self_text.height();
$(".text").each(function() {
var self_shape = $(this),
self_shapeLeft = self_shape.position().left,
self_shapeTop = self_shape.position().top,
self_shapeWidth = self_shape.width(),
self_shapeHeight = self_shape.height();
// check if .text overlaps
if (
(self_textLeft + self_textWidth) > self_shapeLeft &&
self_textLeft < (self_shapeLeft + self_shapeWidth) &&
(self_textTop + self_textHeight) > self_shapeTop &&
self_textTop < (self_shapeTop + self_shapeHeight)
) {
// overlap
$('#elements').css('background', 'red');
} else {
// no overlap
$('#elements').css('background', 'green')
}
});
});
#elements,
.text {
position: absolute;
}
.text {
width: 50px;
background: blue;
}
#elements {
height: 250px;
width: 400px;
background: yellow;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="elements">
<div class="text" style="left: 20px; top: 20px;">text1</div>
<div class="text" style="left: 100px; top: 50px;">text2</div>
<div class="text" style="left: 10px; top: 200px;">text3</div>
<div class="text" style="left: 10px; top: 45px;">text4</div>
</div>
How can I tell the script to ignore itself whenever it loops again without changing the .text class, also is there any way that code could be improved ?
It's because you include the div itself to check against, try adding it to a not:
var $textDivs = $(".text"); // cache this so you are not performing the lookup every time in your loop
$textDivs.each(function() {
var self_text = $(this),
self_textid = this.id,
self_textLeft = self_text.position().left,
self_textTop = self_text.position().top,
self_textWidth = self_text.width(),
self_textHeight = self_text.height(),
hasNotMatched = true;
$textDivs.not(self_text).each(function() { // added to a not so not checked against itself
var self_shape = $(this),
self_shapeLeft = self_shape.position().left,
self_shapeTop = self_shape.position().top,
self_shapeWidth = self_shape.width(),
self_shapeHeight = self_shape.height();
// check if .text overlaps
if (
(self_textLeft + self_textWidth) > self_shapeLeft &&
self_textLeft < (self_shapeLeft + self_shapeWidth) &&
(self_textTop + self_textHeight) > self_shapeTop &&
self_textTop < (self_shapeTop + self_shapeHeight)
) {
// overlap
$('#elements').css('background', 'red');
hasNotMatched = false;
return false; // break out of each loop so as no need to process anymore and so overlap doesn't turn back green
} else {
// no overlap
$('#elements').css('background', 'green')
}
});
return hasNotMatched; // this will break out of outer loop if matched on inner loop
});
#elements,
.text {
position: absolute;
}
.text {
width: 50px;
background: blue;
}
#elements {
height: 250px;
width: 400px;
background: yellow;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="elements">
<div class="text" style="left:20px; top:20px;">text1</div>
<div class="text" style="left:100px; top:50px;">text2</div>
<div class="text" style="left:90px; top:40px;">text3</div>
<div class="text" style="left:190px; top:30px;">text4</div>
</div>
You can exclude the current element with
$(".text").not($(this))
There's also an issue with the logic of your solution - if the last elements checked don't overlap it will change the background to green. One way to handle this is to set the background to green as the default. And if an overlap is detected change the background to red.
There are a few more optimizations that could be made here - like once an overlap has been detected it could exit.
Like this:
$(".text").each(function() {
$('#elements').css('background', 'green');
var self_text = $(this),
self_textid = self_text.attr('id'),
self_textPosition = self_text.position(),
self_textLeft = self_textPosition.left,
self_textTop = self_textPosition.top,
self_textWidth = self_text.width(),
self_textHeight = self_text.height();
$(".text").not($(this)).each(function() {
var self_shape = $(this),
self_shapePosition = self_shape.position(),
self_shapeLeft = self_shapePosition.left,
self_shapeTop = self_shapePosition.top,
self_shapeWidth = self_shape.width(),
self_shapeHeight = self_shape.height();
// check if .text overlaps
if (
(self_textLeft + self_textWidth) > self_shapeLeft &&
self_textLeft < (self_shapeLeft + self_shapeWidth) &&
(self_textTop + self_textHeight) > self_shapeTop &&
self_textTop < (self_shapeTop + self_shapeHeight)
) {
// overlap
$('#elements').css('background', 'red');
}
});
});
#elements,
.text {
position: absolute;
}
.text {
width: 50px;
background: blue;
}
#elements {
height: 250px;
width: 400px;
background: yellow;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="elements">
<div class="text" style="left: 20px; top: 20px;">text1</div>
<div class="text" style="left: 100px; top: 50px;">text2</div>
<div class="text" style="left: 10px; top: 200px;">text3</div>
<div class="text" style="left: 10px; top: 45px;">text4</div>
</div>
I am new to web development but highly fascinated by it. So, basically I am creating a light-box where thumbnails of images will be appear on screen and they will appear bigger in size when user clicks over them. Now, I want when user hovers over the gallery images/thumbnails then some text should appear over the current image with may be some animation or basically mouser-hover should cause some event to happen but I am unable to do it. Text should be added dynamically or may be previously stored in an array or something of that sort. Please have a look at my code and tell me how to modify it in order to achieve such effect and if you know a better and easier way to do so then feel free to share. Thank you so much!!
HTML:
<div class="gallery">
<ul id="images"></ul>
<div class="lightbox">
<div class='limage'>
</div>
<div class='left'>
</div>
<div class='right'>
</div>
<div class='close'>
x
</div>
</div>
</div>
JAVASCRIPT:
var gallery_slider = new Array();
gallery_slider[0] = "im1.jpg";
gallery_slider[1] = "im2.jpg";
gallery_slider[2] = "im3.jpg";
function displayAllImages() {
var i = 0,
len = gallery_slider.length;
for (; i < gallery_slider.length; i++) {
var img = new Image();
img.src = gallery_slider[i];
img.style.width = '200px';
img.style.height = '120px';
img.style.margin = '3px';
img.style.cursor = 'pointer';
document.getElementById('images').appendChild(img);
}
};
$(function() {
displayAllImages();
});
$(function() {
$('img').click(function() {
var hell = (this).src;
display(hell);
});
});
function display(hello) {
$('header').css('display', 'none'); /*for some other purposes*/
$('.limage').html("<img src=" + hello + " >");
$('.lightbox').css("display", "block");
$('.lightbox').fadeIn();
$('.right').click(function() {
var im = new Array();
var x;
var p;
for (x = 0; x < gallery_slider.length; x++) {
im[x] = gallery_slider[x];
}
for (p = 0; p < im.length; p++) {
if (im[p] == hello) {
break;
} else {
continue;
}
}
if (p >= (im.length - 1)) {
p = -1;
}
$('.limage').fadeOut(0);
$('.limage').html("<img src= " + im[p + 1] + ">");
$('.limage').fadeIn(500);
hello = im[p + 1];
});
$('.left').click(function() {
var im = new Array();
var x;
var p;
for (x = 0; x < gallery_slider.length; x++) {
im[x] = gallery_slider[x];
}
for (p = 0; p < im.length; p++) {
if (im[p] == hello) {
break;
} else {
continue;
}
}
if (p == 0) {
p = (im.length);
}
$('.limage').fadeOut(0);
$('.limage').html("<img src= " + im[p - 1] + ">");
$('.limage').fadeIn(500);
hello = im[p - 1];
});
$('.close').click(function() {
$('.lightbox').fadeOut();
$('header').css('display', 'block'); /*for some other purposes*/
});
};
CSS:
.gallery {
width: 100%;
height: 400px;
overflow: hidden;
margin: auto;
}
.gallery ul {
list-style: none;
}
.lightbox {
background-color: rgba(0, 0, 0, 0.3);
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
display: none;
z-index: 106;
}
.close {
color: #fff;
border: 1px solid #fff;
border-radius: 100px;
background-color: #000;
position: absolute;
top: 10px;
right: 20px;
padding: 10px;
font-family: firstfont;
font-size: 30px;
z-index: 101;
cursor: pointer;
}
.close:hover {
background-color: #ebebeb;
color: #000;
}
.left {
width: 50%;
height: 100%;
position: absolute;
top: 0;
left: 0;
cursor: pointer;
}
.right {
width: 50%;
height: 100%;
position: absolute;
top: 0;
right: 0;
cursor: pointer;
}
.limage {
position: relative;
margin: auto;
top: 17%;
left: 15%;
max-width: 90%;
max-height: 90%;
}
There might be some bugs in coding. Watch out.
This code is working for displaying images as thumbnails as a matrix and as slider in lightbox when clicked upon them. I am not able to figure out how to add hover functionality to initial thumbnails.
Jsfiddle :
http://jsfiddle.net/psd6cbd7/1/
I'd suggest putting a div inside the image div containing the text and then using CSS to hide/show it.
HTML:
<div class="gallery">
<ul id="images"></ul>
<div class="lightbox">
<div class='limage'>
<div class=".caption">Caption here</div>
</div>
<div class='left'>
</div>
<div class='right'>
</div>
<div class='close'>
x
</div>
</div>
</div>
CSS:
.limage { position: relative; }
.caption { display: none; }
.limage:hover .caption { display: block; position: absolute;}
Why you using array to store the images? Anyways, assume that you still using array, below is some example code that you want try:
HTML:
<ul id="images">
</ul>
<!-- assume this is the place that you want to display the caption -->
<div id="caption"></div>
Javascript:
var images = new Array();
images[0] = "p1.png";
images[1] = "p2.png";
images[2] = "p3.png";
images[3] = "p4.png";
var captions = new Array();
captions[0] = "Picture 1";
captions[1] = "Picture 2";
captions[2] = "Picture 3";
captions[3] = "Picture 4";
var x = $("#images");
var y = $("#caption");
const prefix = "image-";
if you are using HTML5:
for (var i = 0; i < images.length; i++) {
x.append("<img class='roll' src='" + images[i] + "' data-caption='" + captions[i] + "'>");
}
$(".roll").mouseover(function(){
//do whatever effect here when mouse over
y.html($(this).attr("data-caption"));
});
If you want to backward compatible:
for (var i = 0; i < images.length; i++) {
x.append("<img id='" + prefix + i + "' class='roll' src='" + images[i] + "'>");
}
$(".roll").mouseover(function(){
//do whatever effect here when mouse over
var index = $(this).attr("id").substring(prefix.length);
y.html(captions[index]);
});
Hope that this will help.