Guys i'm having a problem with the javascript in my website. I cant center the div to properly show the image i click. It only works at the second try, the first try of any image it allways show the div to the bottom right.
I've tried messing around with the javascript but can't get my head around it.
Check it out here
It happens because you apply the CSS properties before setting the image src.
When you first load an image, there is no previous image and it does nothing to center.
When you click another picture, it centers the image according to the previous image's dimensions.
It happens becouse your div doesn't have any offsetWidth and height yet.
Related
I am creating a lightbox style plugin that opens an image in fullscreen and adds text about it next to it. I need a zoom animation, that just zooms the small image up to fill the screen. Since the small image is in a column layout, i need to move it out of the current dom structure. However i am unable to do so while doing the zoom animation.
So my question is:
Is there any way to move an element in the dom, or just change its position to fixed and keep its position on screen? I have jQuery avaliable
If all you want to do is get it done, this plugin could do the job.
magnific-popup
Otherwise, I'd put the image in a container of the same size so that you can change the image display property without having your layout get screwed up.
You don't need to move the element in your DOM. Just change the css.
Also this stackoverflow question could possibly help you.
I am trying to use the following gallery/carousel http://coolcarousels.frebsite.nl/c/2/ to implement onto a site.
What I am trying to do is add a text area identifying who created the image next to it, i.e. having the image in a div floated to the left and the content floated to the right.
I create the div and set it all out in css and looks all ok but for some reason the carousel does not work, its like there is a problem with adding HTML tags.
Has anyone used this carousel and had a div rotating with an image and text in it if so please help me.
Cheers Andy.
EDIT: I was an idiot. I simply had an image that was vertically long, so it "moved", because the scroll bars showed up. I know... :O
I'm having a lot of trouble figuring out why an image is moving the entire body, and it is a huge issue. You can check it out here: http://needstackhelp.tumblr.com/
So basically, if you click the "hide post" on the top right, it contracts the div, thus hiding the image. You will also notice whenever you click hide post, then show, it moves the entire body left and right slightly. Why so?
If I remove the image that reads "This is an image", however, the body stays in one place!
How can I fix this issue? I plan to always have an image inside the div, so it's a pretty important issue to me.
Also, for those who are going to diagnose the source, I'm sorry, I never thought anyone else would ever need to see the code, and I've just been a very lazy designer. Just use Chrome/Firefox's inspect element for the most part.
The only change I'm seeing is simply caused by the browser hidiing / showing its vertical scrollbar, thereby altering the body width slightly and causing the centered content to readjust.
Your image is taller than your window browser, so, your browser have to construct a vertical scrollbar. This is why, your body width is affected.
I have 4 images stacked on top of each other, see below:
I'm trying to achieve two things:
When the mouse is over an image that is in the background, that
image should come to the foreground with a fading effect. There is
also different text below each image, that text should come to the
foreground. (no fading needed there)
The result should be like this:
Every 10-15 seconds (without user input), the next image on the right should fade in
automatically.
Technically, I thought about putting each image and text into a separate div, and playing with the z-order. The fading effect could maybe be achieved using jquery, but I've not used that before, unfortunately.
Any example code, specific help or pointers is greatly appreciated.
Thanks!
Although it's impossible to control the fade of an element through his z-index
we can always trick what our eyes see.
DEMO GALLERY
To achieve that we can do:
Insert into our gallery a DIV element that will grab the src attribute of the current image and set it as his background image
hide the current image, position the DIV on this image .position()
fade our DIV in/out
reset image visibility
Let me know if you have some issues, I can comment my code to make clearer the steps I used.
Happy coding
Take a look at this plugin. Just explore it, this has got 100s of different effects which you might like to use in your case.
http://jquery.malsup.com/cycle/browser.html
Basically what I have is a page with a background image and when I have content which is quite long and overflows. I want the text to be inside that image and it appears to fade out when scrolling at the end of the image and the top of the image. I do not want internal scrollbars. The background image itself is fixed and centered and I want the text to always remain inside there.
Is this possible? if this is not clear then I will try and explain myself further.
I have looked at options in Jquery and CSS fading but cannot find exactly what i want.
Any help is appreciated!
Thanks
H
I would suggest you plant an image overlay (white to transparent) at the top and bottom of the div, but that might not work because of your background...could we perhaps see the background you are using?
The two images Nexxeus says should be placed in a fixed position at the top and bottom of the browser. You shouldn't touch what the overflow does, since it will be hidden below the two images.