I'm building a site that uses a jQuery image gallery. You can see an example here.
For some reason, when the gallery changes images, or when you manually change images, the page height seems to be 'flickering' for want of a better word. It seems as though the page height is being increased by the new image, and then very quickly being reduced back to its original height.
Does anyone have any ideas on what's causing this and how to fix it?
As always, any help is appreciated!
Thanks in advance,
Tom
You may try this google code contain with jquery.lightbox-0.5.css
code.google.com/p/imdametadata/source/browse/trunk/guidelines/documents/web/css/jquery.lightbox-0.5.css
Related
Do you know any script which can help to achieve effect like on whis website: http://www.julianabicycles.com/
When you clik on any bike, you can see lightbox sizing effect, but most important is that it is fullscreen.
I tryed to achieve look alike effect with colorbox and similar scripts, but i cant find option for width and height 100%.
I also tryed to examine code of that website, but i consider myself newbie in js, so that's why i'm looking for your help.
Thanks in advance!
That site is using swipe.js. https://github.com/bradbirdsall/Swipe
But, colorbox has a width parameter. The 100% will be of the containing div, so make sure that is also 100%. You might want to show what you've tried.
I am doing on a webpage for display a large amount of pictures/thumbnails. What I am looking for is to auto-resize the pictures, make each line has fixed height, and the right margin of each line is also equal. Even the images are reformatted when I change the size of window, the above mentioned style is kept.
That is quite similar with what google did when displaying their images search results:
Google image example (resize your browser window and you may find what I'm trying to say :-) )
Anyone has idea on this would be much appreciated! Thanks
According to me there 2-ways, 1)by css 2)by js
1)CSS: you can add this in your css, this will resize your thumbnail accordingly.
img{max-width:100%;}
2)JS: Using js you can resize the thumbnails based on the available space and also decide on how many images do you want to show in one row.
I have a short question for you. Could anybody help me figure out why after an Ajax request, the page scroll is changing back to the top? I think it's about JQuery. I can't find too much info on the web, so I ask for your help. This is the test page where I'm doing that. Try changing and see what is happening. Thank you so much!
www.*.ca/test/script.php
Got the answear. Thank's
I just ran into this situation with some embedded pagination and I came up with a trick for dealing with it. On page load I grab the calculated pixel height of the content div and then set that fixed height back onto itself. This keeps the div at a fixed size while the page contents are destroyed and replaced.
var height=$('#content').height();
$('#content').height(height);
Or more briefly:
$('#content').height($('#content').height());
Because the page momentarily becomes shorter, so the scrolling position cannot remain where it was or else the page would be scrolled past its contents.
Having a problem where my images are covered by whitespace using a javascript slideshow plugin and i believe the issue lies in the javascript, checked all the html and css and nothing there seems to be causing the issue. Basically the top and bottom portions of the image are literally obscured, very annoying.
Website: www.nokwin.com
Thanks in advance,
Nick.
Looking at your html/css, nothing appeared incorrect, so I checked your image source:
http://www.nokwin.com/wp-content/uploads/2011/02/slide2-940x198.jpg
Your image was cropped when you uploaded it, apparently.
Look at the #slider height. It's already at 298px. you probably need to go down to 198 or whatever the height of the images is.
I've spent a few hours now trying to figure this one.
I've got a store display that cycles through properties and I've knocked up a simple gallery sort of script. For the last week it has worked beautifully.
I went in today to tinker some unrelated JavaScript (but on the same page) and now there is an issue.
To make the images fade to each other, I update the img's src, and then fade it out over the next image of the img element's containing element's background.
What seems to happen now is that occasionally the #main-image's background gets stuck on a previous image, despite me setting it with jQuery's css() method.
It is available to view here
http://vanquish.websitewelcome.com/~utopia66/store-display
I must stress this is happening in Google Chrome, and I am targeting that browser only.
For your convenience too I have sped up the rate of cycling through images to save you time.
So, why is the image getting stuck and how can I fix it? update on closer inspection it may be that the img element is getting stuck, i.e. it can not update the src attribute. updating again actually I'm pretty sure it is the background.
JavaScript is here
http://vanquish.websitewelcome.com/~utopia66/assets/js/display.js
I very much appreciate any help!
Thanks a bunch.
What I've found with images and fade-in/out is to do it after the image is loaded. This will fix flicker type effect when the image is first loaded after a refresh:
$('#something').attr('src', 'pathToImage').load(function(){$(#something).fadeOut('slow')});
I'm pretty sure I solved it by wrapping the backgroundImage values with double quotes like this.
$('#something').css({ backgroundImage: 'url("' + pathToImage + '")' });
Some of the newer images had parenthesis in their filename.
One of the more frustrating ones!
Thanks if anyone looked into it for me :)