I am using jQuery rotate plugin to rotate an image. The problem is that when the image rotates it comes out of the boundry of the container as the width and height of the container are not updated.
Is there away to update the container dimensions also? If you want to look at the application you can go here. Upload an image and press rotate to see the problem.
There is a callback function which will be called when the animation is done.. In this function you can reset the img container width and height like this (not tested):
var img = $('#img');
var cont = img.parent();
img.rotate({bind:{
click: function(){
$(this).rotate({
angle: 0,
animateTo:180,
callback: function(){
cont.css({ width: img.css('height'), height: img.css('width') });
}
})
}
}
});
Related
I have to combine two images as in the diagram (under this message). The green image must be on the red line of another image, the problem is that by reducing the window as soon as the image 1 is resized responsively, the green image moves and no longer remains glued with the other.
I reserve a way to do this (HTML, CSS or jQuery), the two images must behave as if they were one, responsively. Also when I click on the small image this must be changed with another image of the same size but different.
Thanks to everyone who will offer me help.
See the code snippet below (also found here - it doesn't show very well on SO as you can't resize the output window). It's not 100% clear to me what you want to do, but I think this accomplishes it. If not, let me know and I'll amend the answer.
// This position is relative to the original size of the first image.
// i.e. when the window is exactly as large as image 1, image 2 will
// be displayed at (100, 200)
var pos = [100, 200];
// Reposition img2 as the window is resized
function reposition () {
img2.style.left = (pos[0] / img1.naturalWidth * img1.clientWidth) + "px";
img2.style.top = (pos[1] / img1.naturalHeight * img1.clientHeight) + "px";
// The position is re-calculated based on the scaling of image 1
// (its current width / its original width)
// This is multiplied by pos to ensure that image 2 is always in the
// same position proportional to the size of image 1
}
// Run reposition on window changes
window.onresize = function () {
reposition();
}
window.onload = function () {
reposition();
}
// Change the image on click
img2.onclick = function () {
img2.src = "https://upload.wikimedia.org/wikipedia/commons/thumb/f/fc/Unterf%C3%BChrung_B22_M%C3%BCnchner_Ring_3150017.jpg/320px-Unterf%C3%BChrung_B22_M%C3%BCnchner_Ring_3150017.jpg"
}
/* Image 1 will fill the window */
#img1 {
width: 50vw;
}
/* Image 2 has absolute position, and is 1/5 the size of image 1 */
#img2 {
position: absolute;
width: 15vw;
/* Obviously this sizing can be changed */
}
body {
margin: 0;
}
/*
Because both images scale with the window, they will keep
the same size proportional to each other. This could also be done in Javascript if needed.
*/
<!-- Example images -->
<img id="img1" src="https://cdn.pixabay.com/photo/2016/06/18/17/42/image-1465348_960_720.jpg" />
<img id="img2" src="https://upload.wikimedia.org/wikipedia/commons/thumb/f/f2/Tunnel_Eierberge_Regional_Express_3300341.jpg/320px-Tunnel_Eierberge_Regional_Express_3300341.jpg" />
So on click of these polaroid like images, I replace them with <div class="poof"></div> using jQuery's .replaceWith(). The reason I do this is to display a poof animated gif animation that I style to that class with js.
However, on click of the .polaroid, the polaroid images, the .poof div replaces that html every time, but its background never shows.
Try it for yourself, here:
Click an image, it is replaced by the .poof div, but the poof animation doesn't show.
I would greatly appreciate it someone could help me figure out why this is and how to get the animation to show each time.
Here is my javascript:
$(function(){
var time=1;
$('.polaroid').click(function(){
$(this).replaceWith('<div class="poof"></div>');
$('.poof').css('height', $(this).height()).css('width', $(this).width()).css('background', 'transparent url(poof.gif?t='+time+') center no-repeat');
time++;
});
});
Here is .poof's CSS:
.poof{
height:32px;
width:32px;
}
You are getting the height and width of an object that was remove / replaced in the DOM
Change to this:
var heights = 32;
var widths = 32;
$('.polaroid').click(function(){
heights = $(this).height();
widths = $(this).width();
$('.poof').css('height', heights).css('width', widths).css('background', 'transparent url(http://i.imgur.com/FsVe2LC.gif?t='+time+') center no-repeat');
time++;
setTimeout(function(){
$('.poof').remove();
}, 1500);
});
I am trying to vertically align middle some pics using jquery.
Here is my code
$(".scroll a").hover(function (evt) {
$("#box a").empty().append(
$('<img src='+this.href+' class="loadimg">')
);
vertical_align();
});
while the vertical align function is here
function vertical_align(){
var child = $(".loadimg").height();
var parent = $("#box").height();
var margin = (parent - child)/2;
$("#box a").children("img").css('margin-top', margin);
}
Now the problem i am facing is that when the page is loaded, the imageHeight gives zero and the margin of the pic becomes half of the parent height which mean that imageheight is returning zero. But this only happens for the first time hover on each image.
this happens probably because you're reading the height too early, when at the first request the image isn't fully loaded. You should wait the load (or complete, from the 2nd request of the same image) event for the image, like so
$(".scroll a").hover(function (evt) {
var node = $("#box a");
node.empty();
$('<img src='+this.href+' class="loadimg">')
.appendTo(node)
.one('load complete', function() {
vertical_align();
});
});
I am trying get this background to fade in on click. I found one tutorial that was helpful, and I ended up created the code so it has two images, and they fade in and out on click to bring up the picture.
Here's the work: http://www.mccraymusic.com/bgchangetest.html
Only a couple of issues though:
How do I make this work without the images getting selected at random? I'd like it to just switch from the plain black image to the image with the drum set. (And cross-fade to if possible, but not necessary)
How do I center the image on the page, so the image of the drums are centered?
I'm guessing this is what you're after:
$(function() {
var images = ["black.jpg","bg.jpg"];
$('<img>').attr({'src':'http://www.mccraymusic.com/assets/images/'+images[0],'id':'bg','alt':''}).appendTo('#bg-wrapper').parent().fadeIn(0);
$('.entersite').click(function(e) {
e.preventDefault();
var image = images[1];
$('#bg').parent().fadeOut(200, function() {
$('#bg').attr('src', 'http://www.mccraymusic.com/assets/images/'+image);
$(this).fadeIn(1000);
});
$(this).fadeOut(1000, function() {
$(this).remove();
});
});
});
DEMONSTRATION
Also added :
display: block;
margin-left: auto;
margin-right: auto;
to your #bg element to center the image.
Alright, assuming you use JQuery
You have #backgroundid and #imageid
Begin by setting
$('#backgroundid').css('opacity',1);
$('#imageid').css('opacity',0); // setting opacity (transparency) to 0, invisible
Now you have #buttonid.
Set up a jquery event so that when it's clicked, you fade out the background, and fade in the image using JQuery's animate.
$('#buttonid').click(function() {
$('#backgroundid').animate(function() {
opacity : 0 // fade it to 0 opacity, invisible
}, 1000); // animation will take 1000ms, 1second
$('#imageid').animate(function() {
opacity : 1 // fade it to full opacity, solid
}, 1000);
});
Now about that image centering.
You can either let css manage it with
body { /* Body or #imageid parent */
text-align : center;
}
#imageid {
margin: 0px auto;
}
Or you can stick to a JQuery solution, using absolute/fixed positioning.
First, use some css to fix the position of your image
#imageid {
position: absolute; // or fixed, if you want
}
Now use JQuery to reposition it
function positionImage() {
var imagewidth = $('#imageid').width();
var imageheight = $('#imageid').height();
$('#imageid').css('left', ($(window).width() - imagewidth) / 2);
$('#imageid').css('top', ($(window).height() - imageheight) / 2);
}
$(document).ready(positionImage); // bind the ready event to reposition
$(window).resize(positionImage); // on window resize, reposition image too
if you keep a div element with height and width as 100% and bgcolor as black. And then change the opacity of the div as desired to get the fade in/out effect, that should generate the same effect. I guess..
You are better off using any available jQuery plugin as they would have optimized and fixed bugs for multiple browsers.
Try lightBoxMe plugin
http://buckwilson.me/lightboxme/
This is the simplest plugin available!
I've got quite the problem with jQuery and a custom photo gallery I am building. I've searched high and low and tried endlessly different solutions but nothing is working perfectly. So let me present the information:
This photo gallery has thumbnails on the left side and a big image in the center. Every thumbnail can be clicked which calls a function passing in its' ID. What I want it to do is, AJAX POST to server to get image comment and image name. Fadeout the current big picture div, switch the src in the img tag, get the new image's width, set the width of an overlaying comment div, fadeIn the big picture div.
The problem is that I can't get the width of the new image after it has loaded (even using the a form of .load() to wait for the image to finish loading). Now I can get it to work when I fadeIn the new image and then get the width but that isn't what I need. I need to get the width and set the div's width before I fadeIn.
Any ideas or corrections would be great, hopefully I have provided enough information.
Here is the code I am wrestling with:
function thumbClick(val) {
$.post('ajax.php', {
photo_in: val
}, function (data) {
$('div#picture').fadeOut('slow', function () {
//$('img#big-picture').load(function(){
$('img#big-picture').one('load', function () {
//alert($('img#big-picture').width());
//will alert 0
$('div#picture').fadeIn('slow', function () {
$('div#comment-box').width($('img#big-picture').width());
//set comment to what I want
$('p#comment').html("");
//alert($('img#big-picture').width());
//will alert new image width after FadeIN
$('p#comment').html(data.comment);
});
}); //end of one(load)
$('img#big-picture').attr("src", data.newImage);
}); //end of fadeout
}, "json"); //end of post
}
I've encountered this before; what seems to be the easiest solution is to quickly show the image, grab it's width, and hide it again. This operation occurs so quickly users will never notice.
In your case, i believe the code would be:
$("#big-picture").show();
alert($('#big-picture').width()); //this should be the real width, now
$("#big-picture").hide();
The width is zero because hidden elements (elements with display: none have, by definition, zero height and width). After fadeOut(), jQuery hides the element(s). A few different solutions:
Use .fadeTo(), not .fadeOut():
$('#picture').fadeTo('slow', 0, function () {
var $pic = $(this);
$('#big-picture').one('load', function () {
var $bigPic = $(this);
$pic.fadeIn('slow', function () {
$('#comment-box').width($bigPic.width());
$('#comment').html(data.comment);
});
}).attr('src', data.newImage);
});
Use a separage <img> element:
$('#picture').fadeOut('slow', function () {
var $pic = $(this);
$('#big-picture').one('load', function () {
var img = new Image(),
width;
img.src = this.src;
width = img.width;
$pic.fadeIn('slow', function () {
$('#comment-box').width(width);
$('#comment').html(data.comment);
});
}).attr('src', data.newImage);
});
Use the "off-left" technique:
CSS
.off-left {
position: absolute;
left: -99999px;
}
JavaScript
$('#picture').fadeOut('slow', function () {
var $pic = $(this);
$('#big-picture').one('load', function () {
var $this = $(this),
width = $this.addClass('off-left').show().width();
$this.removeClass('off-left').hide();
$('#picture').fadeIn('slow', function () {
$('#comment-box').width(width);
$('#comment').html(data.comment);
});
}).attr('src', data.newImage);
});
Notes
When using an ID selector, there's no point in qualifying the selector further, since element IDs must be unique.
Pick a quote style and use it consistently. Avoid mixing single- and double-quotes as string delimiters.
You should be able to set the CSS property visibility to hidden and then get the width, as visibility doesn't take it out of the document flow (like display: none), but simply makes it invisible. Just make sure you set the visibility property back to visible when you fade in.