put multiple image-before-after section with jquery - javascript

I am trying to implement before-after image comparison by jquery below.It takes two images and shows the comparison.
fiddled here
<div>
(image comparison1)
</div>
<div>
(image comparison2)
</div>
<div>
(image comparison3)
</div>
though it is very useful for me for single pair comparison, but the problem is whenever I want to implement the same effect with multiple pair, the container size defined in css becomes trouble. I have tried to make the width and height of css as auto & as fit to content, but nothing seems to work. I want to implement multiple pair comparison on the same page as shown in div above.
its like pairs of before after images.Each pair is of different size. Any suggeston for corrections with my coding is really appreciated.
Thank You in advance.

After some searching, this was the solution:
<div class="beforeAfterSlidebar" style="width:400px;height: 400px;">
<div class="bottomImage"><img src="http://static13.jassets.com/p/Clarus-Urbane-Solid-Cotton-400-Tc-Satin-Double-Comforter-4656-990776-1-product2.jpg" width="400" height="400" alt="after" /></div>
<div class="topImage"><img src="http://static13.jassets.com/p/Clarus-Urbane-Solid-Cotton-400-Tc-Satin-Double-Comforter-3369-201776-1-product2.jpg" width="400" height="400" alt="before" /></div>
</div>
<div class="beforeAfterSlidebar">
<div class="bottomImage"><img src="http://upstairsweb.com/images/afterImage.jpg" width="200" height="200" alt="after" /></div>
<div class="topImage"><img src="http://upstairsweb.com/images/beforeImage.jpg" width="200" height="200" alt="before" /></div>
</div>
With the JS:
$(".topImage").css('width', '50%');
$(".beforeAfterSlidebar").mousemove(
function(e) {
// get the mouse x (horizontal) position and offset of the div
var offset = $(this).offset();
var iTopWidth = (e.pageX - offset.left);
// set width of bottomimage div
$(this).find(".topImage").width(iTopWidth);
});
=-=-=-=-=-=-=-=-=-=-=-=-=-=-
Old answers - but they might help others:
I think you mean something like this?
http://jsfiddle.net/m9jj2fsp/6/
I didn't use divs, but the images instead to create the effect:
<div class="beforeAfterSlidebar">
<img id="topImg" src="http://upstairsweb.com/images/afterImage.jpg" width="800" height="600" alt="after" />
<img id="middleImg" src="http://placehold.it/300" width="800" height="600" alt="middel"/>
<img id="botImg" src="http://upstairsweb.com/images/beforeImage.jpg" width="800" height="600" alt="before" />
</div>
The javascript to go with it:
$(".beforeAfterSlidebar").mousemove(function(e) {
// get the mouse x (horizontal) position and offset of the div
var offset = $(this).offset();
var iTopWidth = (e.pageX - offset.left);
// set width of bottomimage div
$(this).children("#middleImg").css("clip", "rect(0px," + (iTopWidth + 50) + "px,600px,"+(iTopWidth - 50) +"px)");
$(this).children("#botImg").css("clip", "rect(0px," + (iTopWidth - 50) + "px,600px,0)");
});
If this isn't what you needed, just tell me, and I'll try to adapt my code.

Related

Preset amount of degree an image rotates per scroll

Is it possbile to set a preset amount an image rotates per scroll?
I created a rotate function with js, which rotates an image (gears in my case) by scrolling up and down the website. In my opinion it needs to rotate more degrees per scroll and Im trying to increase the degrees the image is rotating
JS
function rotate(e) {
e.preventDefault();
rot += e.deltaY * 0.5;
leftGear.style.transform = `rotate(${rot}deg)`;
rightGear.style.transform = `rotate(${rot}deg)`;
}
let rot = 0;
const leftGear = document.querySelector(".leftGear");
document.body.onwheel = leftGear.onwheel = rotate;
const rightGear = document.querySelector(".rightGear");
document.body.onwheel = rightGear.onwheel = rotate;
html
<div class="gearBox">
<!--<img src="img/proxcopAIO.png" height="60">-->
<img src="img/gearProxBlue.png" id="gearText" height="100">
<div class="rightGear" id="rightgear">
<img src="img/gear.png" height="50">
</div>
<div class="leftGear" id="leftgear">
<img src="img/gear.png" height="50">
</div>
</div>
I tried changing '0.5' as factor but somehow it doesnt change anything, or maybe its a false thought of mine
it's because your rotate the whole div which width is 100% of your browser.
Add a width to your div, it will solve your problem
.rightGear{
width:100px;
}

Set picture width to proportional size

Imagine that you have an image
<img id="imgid" height="15" width="149" src="image.png" alt="[]" />
and you want to change its dimensions to height="30" and width to proportional size. The first part is easy:
document.getElementById('imgid').height=30px;
However, wat about the second part? Is it possible to do something similar to
document.getElementById('imgid').width='auto';
Thanks for the answers.
Just change the css properties instead (included both jQuery and plain JS solutions):
$(document).ready(function() {
$("#resize").click(function() {
$("#test").css("width", "100px");
$("#test").css("height", "auto");
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body>
<script>
function resizeImg() {
var el = document.getElementById("test")
el.style.width = "200px"
el.style.height = "auto"
}
</script>
<img id="test" src="https://media.licdn.com/media/p/8/000/1e9/0e5/26e178f.png" width="323" height="110">
<br>
Resize jQuery
Resize plain JS
</body>
As per documentation
width
The intrinsic width of the image in pixels. In HTML 4, either a
percentage or pixels were acceptable values. In HTML5, however, only
pixels are acceptable.
Use style properties instead
document.getElementById('imgid').style.height="30px";
document.getElementById('imgid').style.width='auto';
It should be style.height and style.width. Check below snippet for reference.
document.getElementById('imgid').style.height = '90px';
document.getElementById('imgid').style.width = 'auto';
<img id="imgid" height="180" width="240" src="https://www.joomlack.fr/images/demos/demo2.jpg" alt="" />
This will solve your problem if I understand correct your problem:
img {
max-height: 30px;
width: auto;
}

Slider - How would you make a simple slider?

EDIT: I WANT MY SLIDER TO BE EASY TO YOU AND ONCE A LINK IS CLICKED THE IMAGE THAT CORRELATES WITH LINK SHOWS.
I'm looking to make a really simple "slider" that if you click a link, the img shows that correlates with it. I've been trying to find something for a bit now and things are either too flash or don't suit my needs. This came close: http://jsfiddle.net/bretmorris/ULNa2/7/
I would something a little simpler that can be applied easily to multiple images for different divs.
This is what my code looks like with just a plain img tag to it:
<div id="adobe_content" class="hdiv"><button class="x">X</button>
<img src="images/adobefront.png"><br>
<img src="images/adobeinside.png"><br>
<img src="images/adobeback.png"><br>
<h5>Adobe Brochure</h5>
<p>
I wanted to make something functional and out the box that Adobe might consider giving out. It's clean like their work and sparks interest in opening the brochure with the cut out in the center. The front flap is able to slide into a slot on the right side for a neat logo. They're now more interested in their cloud, but the information is inside is still relevant!
</p>
<b>Programs used: Adobe Illustrator, InDesign and Photoshop.</b>
</div>
The code doesn't work for me because, well I partially don't understand it, and I'm not sure how to make it suit my needs (especially if I got up to multiple images) like correlating with an image.
Perhaps understanding what is going on would maybe get you on the right track, so here is an explanation:
$('a.prev').click(function() {
prevSlide($(this).parents('.slideshow').find('.slides'));
});
//clicking image goes to next slide
$('a.next, .slideshow img').click(function() {
nextSlide($(this).parents('.slideshow').find('.slides'));
});
This part is relatively straightforward, when you click on the previous or next links, call the prevSlide or nextSlide function, passing the collection of slides as an argument.
//initialize show
iniShow();
function iniShow() {
//show first image
$('.slideshow').each(function() {
$(this).find('img:first').fadeIn(500);
})
}
Initialize the slideshow by finding each slideshow on the page and fading in the first image. $(this) refers to the <div class="slideshow"> parent, find all child image tags and take the first, fade that element in (and do it in 500 milliseconds).
function prevSlide($slides) {
$slides.find('img:last').prependTo($slides);
showSlide($slides);
}
function nextSlide($slides) {
$slides.find('img:first').appendTo($slides);
showSlide($slides);
}
The prevSlide and nextSlide functions both rearrange the order of images, this line in particular:
$slides.find('img:first').appendTo($slides);
Is moving the first image to the end of the images, so:
<img src="http://placekitten.com/300/500" width="300" height="500" />
<img src="http://placekitten.com/200/400" width="200" height="400" />
<img src="http://placekitten.com/400/400" width="500" height="400" />
becomes:
<img src="http://placekitten.com/200/400" width="200" height="400" />
<img src="http://placekitten.com/400/400" width="500" height="400" />
<img src="http://placekitten.com/300/500" width="300" height="500" />
$slides.find('img:last').prependTo($slides); does the inverse and moves the last image to the beginning.
function showSlide($slides) {
//hide (reset) all slides
$slides.find('img').hide();
//fade in next slide
$slides.find('img:first').fadeIn(500);
}
Finally, showSlide accepts the collection of images, hides all of them and then fades in the first image (since the collection is reordered each time, the first is a different image).
Now, if you want a link for each image that will display a corresponding image, you could do something as simple as:
<a class="image" data-src="http://placekitten.com/300/500">Kitten 1</a>
<a class="image" data-src="http://placekitten.com/200/400">Kitten 2</a>
<a class="image" data-src="http://placekitten.com/400/500">Kitten 3</a>
<div id="image-container">
<img src="http://placekitten.com/300/500" />
</div>
and something like the following:
$('.image').on('click', function() {
var imageSrc = $(this).data('src');
$('#image-container img').prop('src', imageSrc);
});
Which will update the child image tag of <div id="image-container"> with the data-src attribute value in the clicked link.
http://jsfiddle.net/9sxt6n0t/
Hope this helps.
just a quick function to slide
function slideIt(images , prev , next){
$('.slideshow img:nth-child(1)').show();
var imagesLength = $(images).length;
var i = 1;
$(prev).click(function() {
$(images).hide();
if(i !== 1){
$(images + ':nth-child('+ (i - 1) +')').show();
i--;
}else{
$(images +':nth-child('+imagesLength +')').show();
i = imagesLength;
}
});
//clicking image goes to next slide
$(''+next+','+images+'').on('click',function() {
$(images).hide();
if(i !== imagesLength){
$(images + ':nth-child('+ (i + 1) +')').show();
i++;
}else{
$(images + ':nth-child(1)').show();
i = 1;
}
});
}
and use like that slideIt(Images , prevArrow , nextArrow)
slideIt('.slideshow img','a.prev' , 'a.next');
DEMO HERE

jQuery - moving image to the left on every click

The below code is not working in two ways. it is not moving to the left after every click like it should (did i declare the position : relative correctly?), and also the delay for the left animation is 1 second, but the fade effect should only be set to 100. however, the fade is also taking 1000 . Thanks in advance and here is my code:
<html>
<center>
<img src="image1.jpg" id="a1"></img>
<br>
<h1>it worked.</h1>
<br>
<img src="image2.jpg" width="500" height="500" id="a2" style="position:relative"></img>
</center>
</html>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script>
var x = .99;
$(document).ready(function () {
$("h1").hide();
$("#a2").click(function () {
if (x > .15) {
x -= .1
$("#a1").animate({
"left": "+=1000px"
}, 1000);
$("#a1").fadeTo(100, x);
} else {
$("h1").show(10);
}
});
});
</script>
"left" css property applies only to the elements which are non-statically positioned. So please check this - add style position relative to your first image:
<img src="image1.jpg" id="a1" style="position:relative" />
Demo: http://jsfiddle.net/57nZp/

Can't get width of image with Jquery after using max-height for resize

I have a set of images that I get dynamically. To each image I'm applying a max-height, I use this for re-sizing purposes.
I have a jquery re-size function:
// resize my pics
function resizeMyImg(objct, containerWidth, containerHeight) {
var width = $(objct).width(); // I try alerting here and get a 0 answer
if (width < containerWidth) {
var percentageToAdd = ((100 * width) / containerWidth) + 100;
$(objct).css({ maxHeight: percentageToAdd + "%" });
}
}
And I'm trying to apply this resize function to my images:
$(document).ready(function () {
$(".photoAlbum").find("img").each(function () {
var myImage2 = $(this);
myImage2.load(function () {
alert(myImage2.height()); // I try alerting here and also get a 0 answer
resizeMyImg(myImage2, 240, 240);
});
});
});
This is the html I'm using in my page, hope it helps:
<div style="padding-top: 0px;" id="photosHere">
<div class="photoAlbum">
<img alt="" src="/Uploads/553290_471992686161625_498413822_n867.jpg" style="max-height: 100%;">
</div>
<div class="photoAlbum">
<img alt="" src="/Uploads/484524_430827793626240_991120671_n575.jpg" style="max-height: 100%;">
</div>
<div class="photoAlbum">
<img alt="" src="/Uploads/553290_471992686161625_498413822_n717.jpg" style="max-height: 100%;">
</div>
<div class="photoAlbum">
<img alt="" src="/Uploads/me993.jpg" style="max-height: 100%;">
</div>
<div class="photoAlbum">
<img alt="" src="/Uploads/me759.jpg" style="max-height: 100%;">
</div>
</div>
My problem is that I can't get the width of the images I always get a 0 instead of the real width. However, using firebug if I test an image I get the correct width.
N.B: Sometimes I get the correct answer but then I refresh and get 0 again. Any suggestions please ?? It's frustrating I've spent hours on this..
Today I was writing a jQuery plugin and I had the same issue so I ended up referencing the DOM element instead. Try
$(this)[0].height instead of myImage2.height()
and
$(this)[0].width instead of myImage2.width().
I assume that the correct width may be from fiddling in firebug, and a refresh clears all of the fiddling.
Did you try:
alert(myImage2.outerHeight());
in your second shown code and
var width = $(objct).outerWidth
in your first code?
( http://api.jquery.com/outerWidth/)

Categories