How to pan/zoom an image and an overlay simultaneously? - javascript

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>

Related

How to resize a png image to fit in a div?

I am trying to resize a PNG image to fit in a div
This the div where I'd like to fit it in:
But this is how it looks like:
I tried to solve it by this Changing image sizes proportionally using CSS? but no change was noticed.
Here's the code snippet:
<div className="Card-header">
{this.props.roadmapID}
<label className="Card-header-status">{this.props.technology.toString().replace(/,/g , " ")}</label>
<label>{this.props.category}</label>
<img src="images/dark_chat.png"></img>
<CardStatus
status = {this.props.status}
onClickStatus = {this.props.onClickStatus}
/>
</div>
div.Card-header > img {
max-width: 100%;
max-height: 100%;
}
Use in your Stylesheet
.Card-header {
width: XYpx;
height: XYpx;
}
and this in your html:
<div class="card-header">
<img src="yourpic.jpg" style=" width:100%; height:100%;">
</div>
Your image will now expand to your given div size you declared in the stylesheet.
Why not set your image height to 100% of your div and then use width:auto ?
<img src="/path/to/your-image.png" style="height:100%; width:auto;" >
Even if the height of your div changes, the image will adjust proportionally.
Also, if you want this page to load reasonably quickly, it would definitely be worth re-sizing that image.
There is no code so this is a guess:
<div MB018>
<img src="whatever.jpg" width="10px" height="10px">
</div>

How to add transparent hover overlay to these carousel portfolio images

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>

toogle not working when wrapped around 2 containers

am trying to make a slider, and make the text and image slide when i click on an arrow(img)
<div class="col span_12_of_12 bannerHomeHeight">
<div class="homeImage1" id="homeBannerContainer1" style="display: block">
<div class="homeImage">
<h4>HIV</h4>
<img src="/images/banner-hiv-icons.png" alt=""/>
</div>
<div class="homeBanner">
<h3>HIV support materials for healthcare professionals, paitent groups and paitents</h3>
<div class="homeArrow">
<img src="/images/arrow.png" alt=""/>
</div>
</div>
</div>
</div>
<div class="homeImage1" id="homeBannerContainer2" style="display: none">
<div class="homeImage">
<h4>HCV</h4>
<img src="/images/banner-hep-icons.png" alt=""/>
</div>
<div class="homeBanner">
<h3>HCV support materials for healthcare professionals, paitent groups and paitents</h3>
<div class="homeArrow">
<img src="/images/arrow.png" alt=""/>
</div>
</div>
</div>
My J query is:
$(function () {
$(".homeArrow").on('click', function () {
$('.homeImage1').animate({
width: 'toggle'
});
});
});
homeImage1 is the container which i want sliding but the 2nd one goes to the bottom rather than coming in from the side.
live: thenandnow.anytimeafter9.co.uk
The problem is your bannerHomeHeight for the first slider frame is still there taking up space when you toggle its child homeImage1's display.
Try toggle bannerHomeHeight instead:
$(function () {
$(".homeArrow").on('click', function () {
$(".bannerHomeHeight").animate({
width: 'toggle'
});
});
});
[EDIT]
The problem with this is that when both elements are side by side during animation they take up > 100% and one is forced underneath. To solve this we can give .bannerHomeHeight 2 style changes (max height and width) so it is as follows:
.bannerHomeHeight {
margin-top: -16px;
min-height: 170px;
background-color: #54565b;
max-height: 170px;
width: 98%;
}
This way the height isn't seen to change to fit the content as it animates, and being 98% width is just enough to prevent the combination of the 2 becoming over 100% (I don't know whats causing this exactly, I guess something to do with padding/margins ?)

I did a simple jquery slideshow - I want to toggle to one specific image by clicking thumbnail image

HTML:
<html>
<head>
<script type="text/javascript" src="jscript/jquery.js"></script>
</head>
<body>
<div class="slider_b">
<img src="img/frame_wood_back_460_380.jpg">
<img src="img/01_french_train_480_360.jpg">
<img src="img/05_cherries_480_360.jpg">
<img src="img/06_wheat_480_360.jpg">
<img src="img/10_renault_480_360.jpg">
</div>
<div id="button"><img src="img/06_wheat_480_360.jpg" width="48px" height="auto"></div>
<script>
setInterval("switchit()", 3000);
$('.slider_b img:gt(0)').hide();
function switchit() {
$('.slider_b img:first-child').fadeOut(0).next('img').fadeIn(2000).end().appendTo('.slider_b');
}
</script>
</body>
</html>
CSS:
.slider_box img{
position:relative;
top:0px;
left: 0px; }
.slider_box {
position:absolute;
width: 480px;
height: 360px; }
#button {
position: relative;
top: 10px;
left: 500px;}
The slideshow works - I just could not figure out how to switch the slideshow to one of the images by clicking a thumbnail button (id=button) - the slideshow should continue then in the regular circle order.
You could add a data attribute to your <img> elements, and append the button with the first child <img>element to carry over that data attribute. e.g:
<img src="" data-slide="1">
And for the append
var thumbnail = $("div.slider_b").find("img:first");
$("#button > img").replaceWith(thumbnail);
Once this is done, make it so that
("#button").on(click, function() {
var moveTo = $(this).find("img").data(slide);
var item = $("div.slider_b").find("[data-slide='" + moveTo + "']"
$("div.slider_b).prepend(item);
}
I'm not 100% right with the jQuery, but I believe I'm on the right lines. A bit more exploration down this route will get you to where you need to be.
Try making a relation between the slide and its thumbnail to fetch the respective slide, e.g. by using attibutes pairs, like data-slide="slide1" for the thumbnail and id="slide1" for the actual slide
on thumbnail click, adjust the current slide to the respective one and continue auto animation from this point
Point one is just one solution, it's the creativity part ;) You could come up with something else, like e.g. using thumbnails and slides indexes, etc. Good luck.

Get the image to appear larger with moving my other elements on my page

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/

Categories