I am trying to create a photo gallery. It will contain a bunch of images moving across the screen with a marquee, and when I click on any image, it will enlarge on the above div.
What new I am trying to achieve is that, the selected image for highlighted and should stop moving, while all other images in a marquee tag will continue moving.
I am not able to achieve to task described in bold text. Please help me with that.
here's my code
function func(val) {
var current_image = document.getElementById(val);
var source = document.getElementById(val).src;
document.getElementById("img1").src = source;
current_image.style.border = "2px solid black";
}
img {
height: 200px;
width: 200px;
}
#img1 {
height: 440px;
width: 100%;
}
<img src="https://images.unsplash.com/photo-1486570318579-054c95b01160?ixlib=rb-0.3.5&s=8cb4fb1b4ac3ab4e5335a6f5961d5d86&auto=format&fit=crop&w=890&q=80" id="img1">
<div class="marqueeImage">
<marquee onmouseover="stop()" onmouseout="start()">
<img src="https://images.unsplash.com/photo-1472152083436-a6eede6efad9?ixlib=rb-0.3.5&s=93a9b1fd63f0d00e2edac3cea5650819&auto=format&fit=crop&w=749&q=80" onclick=func(1) id="1">
<img src="https://images.unsplash.com/photo-1474436799594-1974f1add7ad?ixlib=rb-0.3.5&s=f5fc0f9a97ed3dc7d8f069470b51a864&auto=format&fit=crop&w=724&q=80" onclick=func(2) id="2">
<img src="https://images.unsplash.com/photo-1475687111391-295db56c4d68?ixlib=rb-0.3.5&s=31e11f83c2196cf8c3df3afcbea3974f&auto=format&fit=crop&w=837&q=80" onclick=func(3) id="3">
<img src="https://images.unsplash.com/photo-1490237014491-822aee911b99?ixlib=rb-0.3.5&s=3b012e88f4bd20f38706d25928b51fe6&auto=format&fit=crop&w=750&q=80" onclick=func(4) id="4">
<img src="https://images.unsplash.com/photo-1482920387559-08269818bcfc?ixlib=rb-0.3.5&s=7d4daea39d40f2f10c879b75f5b7fddd&auto=format&fit=crop&w=750&q=80" onclick=func(5) id="5">
<img src="https://images.unsplash.com/photo-1486570318579-054c95b01160?ixlib=rb-0.3.5&s=8cb4fb1b4ac3ab4e5335a6f5961d5d86&auto=format&fit=crop&w=890&q=80" onclick=func(6) id="6">
</marquee>
</div>
Related
https://jsfiddle.net/dmaltron87/odpeLLv6/
Trying to make it so a simple overlay with text appears when I hover over the images, but I can't get anything to work with this code. I found this in a demo tutorial and edited for my site, but my javascript understanding/skills are still pretty basic. I'm not too picky about the end result, just want ideas.
tried something like this, and added a css overlay with opacity=0 then hover at .75. straightforward, but didn't work.
<div class="container">
<img src=".." alt="Avatar" class="image">
<div class="overlay">
<div class="text">Hello World</div>
</div>
</div>
You'll need to capture the mouseenter() and mouseleave() events and add some dynamic content.
Here's an example:
$(".carousel img").on("mouseenter", function() {
//start hover
let me = $(this);
let position = me.position();
//create overlay
let overlay = $('<div class="overlay"></div>');
//set position and size
overlay.css({
left: position.left,
top: position.top,
height: me.height(),
width: me.width()
});
//append overlay
me.after(overlay);
});
//remove hover when the overlay is de-hovered
$(".carousel").on("mouseleave", ".overlay", function() {
//end hover
$(this).remove();
});
.overlay {
background: url(http://via.placeholder.com/200x200/00AA00?text=Overlay) no-repeat center;
opacity: 0.7;
position: absolute;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="carousel">
<img src="http://lorempixel.com/200/200/sports/1/" />
<img src="http://lorempixel.com/200/200/sports/2/" />
<img src="http://lorempixel.com/200/200/sports/3/" />
</div>
I'm using jquery.panzoom to pan and zoom an image in response to mouse or touch events. This works fine, but now I'd like to zoom the image together with an overlay (either a SVG file or another image). The overlay and the image are exactly the same size, I just want them to behave as a single image with respect to pan and zoom.
I tried putting them both in a div, like this:
<div id="mydiv">
<img src="image.jpg" style="position: fixed; top: 0; left: 0; width: 500; height: 500;">
<img src="overlay.svg" style="position: fixed; top: 0; left: 0; width: 500; height: 500;">
</div>
<script>
$("#mydiv").panzoom();
</script>
The layout gets messed up when I do that.
How can I pan/zoom an image and overlay (or several images) simultaneously?
(I'd like to keep using jquery.panzoom since that seems to work very well on my target platforms, but if there is another library that does the same that could also work)
According to their documentation, this should work:
(function() {
var $section = $('#collectionId');
$section.find('.panzoom').panzoom({
$set: $section.find('.parent > div')
});
})();
<section id="collectionId">
<div class="parent">
<div class="panzoom">
<img src="image.jpg">
</div>
<div>
<img src="overlay.svg">
</div>
<div>
<img src="anotherOverlay.svg">
</div>
</div>
</section>
I'm trying to calculate the padding-bottom property for multiple elements in an image gallery. Check out the following code for one element:
<div class="item-container fashion">
<a href="images/fashion/11-large.jpg"
data-size="600x900"
class="item"
style="padding-bottom: 150%">
<img class="lazyload"
alt="Description"
src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw=="
data-sizes="auto"
data-src="images/fashion/11-small.jpg"/>
</a>
</div>
As you can see I define the size of the image in "data-size" attribute (600x900). In order to get the padding-bottom value which I need to prevent reflow, I simply divide calculate (height/width) x 100, which in this case yields 150 - my padding-bottom value.
Now I can easily calculate this manually and input it as I'm doing above and it works just fine. But since my gallery will contain hundreds of images all with different ratios, I'm gonna need a more automated way of calculating the padding value.
Is there anyway to achieve this by doing the calculation in JavaScript and then apply it to the respective element? If I were to include the dimensions in the filename for example and parse it maybe I could even avoid manually inputting the data-size value too...?
I would really like to avoid having to manually do hundreds of calculations, plus It'll be great to learn a new trick for the future. Thanks!
UPDATE
here's what I got so far, as you can see image1 and image2 have different dimensions and ratio. As you can see i'm doing something wrong the padding isn't working out just right. I'm setting "item" height to 0 because padding-bottom will end up taking care of the height. thoughts?
var tags = document.getElementsByClassName('item');
for (var i = 0; i < tags.length; ++i) {
/* This is the part I mentioned about, you may want to use one of the methods above depending on how your css and the rest of your code looks like*/
tags[i].style.paddingBottom = (100 * (tags[i].offsetHeight / tags[i].offsetWidth)) + 'px';
}
.item {
position: relative;
height: 0;
display: inline-block;
border: 1px solid red;
overflow: hidden;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="item-box fashion">
<a href="http://lorempixel.com/output/city-h-c-600-900-7.jpg" data-size="600x900" class="item">
<img width="300" height="450" class="lazyload" alt="Image description" src="http://lorempixel.com/output/city-h-c-600-900-7.jpg" data-sizes="auto" />
</a>
</div>
<div class="item-box fashion">
<a href="http://lorempixel.com/output/fashion-q-c-600-400-5.jpg" data-size="600x900" class="item">
<img width="300" height="200" class="lazyload" alt="Image description" src="http://lorempixel.com/output/fashion-q-c-600-400-5.jpg" data-sizes="auto" />
</a>
</div>
First of all why don't you have to define the dimension of the picture. You can use element.offsetWidth element.offsetHeight OR element.style.width, element.style.height (these two would have to be parsed because they return a string for instance 5px) OR element.getBoundingClientRect() (the lattest is an object containing top, left, right, bottom etc.)
Now, that being said using java you can do the following ...
var tags = document.getElementsByClassName('item');
for(var i = 0; i < tags.length; ++i){
/* This is the part I mentioned about, you may want to use one of the methods above depending on how your css and the rest of your code looks like*/
tags[i].style.paddingBottom = (100 * (tags[i].offsetHeight / tags[i].offsetWidth)) + 'px';
}
.item{
width: auto;
height: auto;
display: inline-block;
border: 1px solid red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="item-box fashion">
<a href="http://lorempixel.com/output/city-h-c-600-900-7.jpg" data-size="600x900" class="item">
<img width="300" height="450" class="lazyload" alt="Image description" src="http://lorempixel.com/output/city-h-c-600-900-7.jpg" data-sizes="auto" />
</a>
</div>
<div class="item-box fashion">
<a href="http://lorempixel.com/output/fashion-q-c-600-400-5.jpg" data-size="600x900" class="item">
<img width="300" height="200" class="lazyload" alt="Image description" src="http://lorempixel.com/output/fashion-q-c-600-400-5.jpg" data-sizes="auto" />
</a>
</div>
Hi I am new to JavaScript and have to make a game.
My game involves finding animals that are hiding behind objects in the space of 60 seconds. All my objects are images and I have created them with divs.
I need to hide the image of the animal behind the object so when the player clicks on the object the animal appears. I was going to use an alert but not sure if that's the best approach.
Example of code:
Html:
<div id ="clown">
<img src="clown.png" width="300" height="250">
</div>
Javascript: clown = document.getElementById('clown')
So as I understand, you want two types of images displayed: object and animal, where animal is hidden by default and is revealed when the object is clicked.
This can be done using css and javascript as shown in example below.
<style>
#object .animal {
position: absolute;
left:0;
top:0;
visibility:hidden;
}
</style>
<div id="object">
<img class="animal" src="animalimgsrc">
<img src="objimgsrc">
</div>
<script>
document.getElementById("object").onclick = function(){
document.getElementById("object").getElementsByClassName("animal")[0].style.visibility = "visible";
};
</script>
I guess, you need to make "object" class instead of id, if you want multiple objects.
You can achieve this by changing the selected image display from none to block. see HTMLElement.style and display property for further info, Check this:
CSS
.image-wrapper {
width: 300px;
height: 250px;
background-color:#00ff21;
float:left;
margin:2%;
}
.image-wrapper img {
display: none;
width: 300px;
height: 250px;
}
HTML
<div id="clown" class="image-wrapper">
<img src="clown.png" width="300" height="250" />
</div>
<div id="bird" class="image-wrapper">
<img src="bird.png" width="300" height="250" />
</div>
JavaScript
var divs = document.querySelectorAll(".image-wrapper");
for (i = 0; i < divs.length; i++) {
var div = divs[i];
div.onclick = function () {
var img = this.getElementsByTagName('img')[0];
if (img != undefined) {
img.style.display = "block";
console.log(img)
}
}
}
Here is the demo
Here is the exact thing i've got to do:
Appropriate JavaScript and html so that when the user moves the mouse
over a thumbnail image of one particular type of room that is on
special offer, a full size (larger) image relating to it is displayed
(note that the display of a larger image should not cause other page
elements to move). When the user moves the mouse away from the
thumbnail image, the larger image should disappear.
Here is my website.
I just want to be able to hover over those image and get them to appear above the page, without altering how the page looks now.
This is my javascript section at the moment;
div = {
show: function(elem) {
document.getElementById(elem).style.visibility = 'visible';
},
hide: function(elem) {
document.getElementById(elem).style.visibility = 'hidden';
}
}
But i'm unsure if that is right or now for what i want,
Then this is the html;
<img src="images/garden2.jpg" width="201" height="143" alt="Garden Room" onMouseOver="div.show('div1')" onMouseOut="div.hide('div1')"/>
<div id="div1"><img src="images/garden2.jpg" alt="Garden Room" /></div>
but that creates a div below the image and alters the my elements which is not what i want to happen.
If you want some element to appear over other elements this element need to be positioned - the best way in your case is to set all containers element - meaning elements that contains the original shown image and the hidden image - in style position relative - and the hidden image set absolute position and when you hover on the original image just show the hidden image as your coded already:
I made a simple jsfiddle for you to understand
html:
<div class="container">
<img src="http://www.numyspace.co.uk/~unn_w12001251/images/fellside22.jpg" onMouseOver="div.show('div1')" onMouseOut="div.hide('div1')" />
<div id="div1" class="hid-img"><img src="http://www.numyspace.co.uk/~unn_w12001251/images/fellside22.jpg" /></div>
<div>
<div class="container">
<img src="http://www.numyspace.co.uk/~unn_w12001251/images/garden2.jpg" onMouseOver="div.show('div2')" onMouseOut="div.hide('div2')" />
<div id="div2" class="hid-img"><img src="http://www.numyspace.co.uk/~unn_w12001251/images/garden2.jpg" /></div>
<div>
css:
.container{
position: relative;
}
.container .hid-img{
position: absolute;
display:none;
z-index:1;
}
js:
var div = {
show: function(elem) {
document.getElementById(elem).style.display = 'block';
},
hide: function(elem) {
document.getElementById(elem).style.display = 'none';
}
}
EDIT:
just add width,height to img tag http://jsfiddle.net/MKPgv/2/
I would use a simpler code like this:
HTML:
<a href="http://www.numyspace.co.uk/~unn_w12001251/images/fellside22.jpg">
<img width="100" src="http://www.numyspace.co.uk/~unn_w12001251/images/fellside22.jpg" />
<img class="fullsize" src="http://www.numyspace.co.uk/~unn_w12001251/images/fellside22.jpg" />
</a>
<a href="http://www.numyspace.co.uk/~unn_w12001251/images/garden2.jpg">
<img width="100" src="http://www.numyspace.co.uk/~unn_w12001251/images/garden2.jpg" />
<img class="fullsize" src="http://www.numyspace.co.uk/~unn_w12001251/images/garden2.jpg" />
</a>
CSS:
a {
position: relative;
display: inline-block;
}
a .fullsize {
position: absolute;
top: 100%;
left: 0;
display: none;
z-index: 1;
}
a:hover .fullsize {
display: inline;
}
JS:
-NONE-
Fiddle: http://jsfiddle.net/84anu/
Preview http://jsfiddle.net/84anu/show/