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.
Related
I'm trying to implement a static HTML template to CAKEPHP and is stuck in a problem. The main problem is I can't figure out why the problem is appearing. Below is the image that'll tell more.
The image (slider) that is being displayed in the static HTML version is not being displayed on the CAKEPHP version, while I've made sure all the necessary CSS and JS files are included, but no solution yet. Haven't faced this problem before, so what might be causing this?
I tried to fix the width and height of the image in the code but the image is still not being displayed and shows as 0*0 pixels as in the image.
This problem may occur when you have included multiple versions of jquery library at once. Make sure you have loaded single jquery file only.
The included jquery-slider may have been confused between two jquery files of different versions.
I'm having size issues with the jQuery colorbox plugin. When I click an image to display it in the colorbox it grabs the correct size from the image to display but it fails to add the width and height of its own borders (the ones of the pop-up box) which are 25px each. The inner width and height are correct while the outer width and height end up having 50px too little. This causes the image to not be displayed at all. Only the borders are visible and not in the correct location.
I have searched for hours trying to find someone with a similar problem and have tried many things to get it fixed, but still I have no clue why it keeps doing this.
Some info:
- I'm using jQuery 1.4.2 (this cannot be changed and I'm pretty sure that it's compatible)
- My current code looks like this
$.colorbox({inline:true, href:'#inline_content'});
Where #inline_content is the ID a HTML image tag
- The files are loaded in this order: colorbox CSS - jQuery - colorbox JS
- Firebug does not show any javascript errors
EDIT:
I figured out that somebody else changed the version of colorbox to the newest one. Which only works with jQuery 1.4.3+
This was causing the strange issue.
Thank you for you help and sorry if I wasted your time.
No one could help you with such description. I create test jsfiddle for you:
http://jsfiddle.net/QkdL2/
Edit this example and press Update, then show us link with problem demonstration (also include your css styles).
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
Example here: http://jezebel.com/5896408/racist-hunger-games-fans-dont-care-how-much-money-the-movie-made
Click on the 3x3 Tweets screencap they have up. I love the way the lightbox makes a scrollbar. I viewed the source and inspected the element via Chrome and don't see any script that stands out, so I'm guessing it's probably something custom-made.
If so, does anyone know of similar scripts that look like that lightbox and can have a scrollbar effect like that? It's gorgeous!
Edit: I found the code, and I do not think they use a modified version of lytebox: http://ganja.gawkerassets.com/assets/base.v10/static/base.v10.jqueryplugin.20120424_8.js (ctrl/cmd + f for 'glimage'. They use their own thing. Still, I am having trouble finding the perfect jQuery lightbox with presentable vertical scrolling if the image is larger than the windowWidth.
It seems that they're using a modified version (glytebox) of this script:
http://lytebox.com/
IMHO, their lightbox isn't anything special. The scrollbar is probably something that most lightboxes display when the content is too big to fit on the screen.
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 :)