Jump to content
Sign in to follow this  
timquiggle

Carousel Bug, problems in Chrome and Safari

Recommended Posts

timquiggle

My carousel works fine in IE and in Firefox, but in Chrome and Safari the buttons that advance the frames are dislocated way down on the page below the picture. Please help, as I am launching my site on Weds March 14 and would like to include a functioning carousel. The carousel gets its images from the posts below it (featured images).

Share this post


Link to post
Share on other sites
Rob
Tim, I think you should do some research into image scaling, resizing and memory load. Here's what happens in your site. You're using HUGE images in the posts. Here's one example from one of your posts: [code][/code] It's 3648px wide and 2736px high. That spans more than 2 times the size of the average monitor resolution today. When the Carousel picks up the images in Firefox and IE, it's selecting a reduced size, but even there, it took a portrait view image and heightened the background to match that as the default to all the others in landscape view. In Chrome and Safari, the reduced size isn't used, therefore the background is stretched to the designated height, even if the image displays in reduced sizes. That's why your navigation buttons are where they are. In fact, they're in the exact place they should be - dead center vertically. You should resize the image to something no wider than the width of your content area or, use a smaller version for the thumbnail, making sure they're all the same size. In all your images, particularly ones used in thumbnails, even if it's a customized setup for your posts, you MUST have consistent sizes or things like this Carousel issue will pop up. I'd suggest reading http://codex.wordpress.org/Using_Images which provides some answers. This video might help a bit too http://www.youtube.com/watch?v=7Qwb2XdQtV0 However, the best method, in my opinion, is to use a graphics or photo editing tool such as PhotoShop or PaintShopPro to resize the images to a manageable proper size that's standard among all your posts.

Former PageLines Moderator, Food Expert and Raconteur

Share this post


Link to post
Share on other sites
timquiggle
Thanks for you suggestions. I'm not sure where you got that image size, but every image on my site was re-sized to no larger than 500 x 500 before they were uploaded. They are the same size on the posts as on the carousel. With that in mind, I find it difficult to make any progress in solving my problem with your suggestion. Any other ideas?

Share this post


Link to post
Share on other sites
Simon
I dont think its a bug. In chrome the js for the carousel wont start onthe the page has loaded 100%, You have over 1MB of images to load on that page with over 30 http requests. http://tools.pingdom.com/fpt/#!/bbtmUgVyf/http://timothyquiggle.com/?page_id=19

Share this post


Link to post
Share on other sites
timquiggle
Thanks Simon, Not sure what all that means. Any suggestions? Why does it work fine in Firefox and IE?

Share this post


Link to post
Share on other sites
Simon
In chrome, the carousel javascript does not start to work until the page has fully loaded, you page has 1MB of images to load with over 30 separate requests and it takes a goot 10 seconds to fully load. Have you considered using thumbnails that link to the images?

Share this post


Link to post
Share on other sites
timquiggle
Thanks Simon. My goal is to have the largest images possible. The whole point of the site is to show large pictures of my work. If there is a way to do this with thumbnails then cool, but when I tried it they were all tiny. I also tried an experiment: I turned off the carousel and left all the posts up, and the site worked in Chrome. I understand, for some reason beyond my comprehension, that the carousel on my site will not work in Chrome. What baffles me is why it works fine in IE and Firefox? Why should I have to play around with it to make it work in different browsers? Is not that the responsibility of the developers? If the carousel only works under certain circumstances in certain browsers, then I would say it needs some work. Is that asking too much of Platform Pro?

Share this post


Link to post
Share on other sites
WebWerx
@timquiggle: There is a difference between the physical size (500 x 500) and the amount of compression you apply (file size). I read that your file sizes are too big and that is what is causing your issues. @pross makes a good point. 1 meg of images is "heavy" IMHO. When I do this type of work, I determine the image dimensions, then experiment with compression until I get it to the lowest (visually acceptable) file size (kbs.). I do it on one image. Then I save the settings as a preset in Photoshop or Lightroom... Then I do all of the images I want to post with the same settings. I hope I am not talking out turn here.

Share this post


Link to post
Share on other sites
timquiggle
Thank you. So I'm guessing on the photo editing end I can adjust the compression? This is not something I'm familiar with, but I do understand what you're saying. I'll see if I can figure out how to do it. Still curious about why this is only a problem in some browsers????

Share this post


Link to post
Share on other sites
Simon
They all have different ways of handling javascript and images.

Share this post


Link to post
Share on other sites
WebWerx
@timquiggle: You are welcome. Yes, you adjust the compression (and do the sizing - dimensions) in a photo editor. If don't have a decent photo editor, you can use Aviary (online editing). It works well with Chrome. Bear in mind what @rangelone & @pross are suggesting. Different browsers work with Javascript in different ways. IE is a crappy browser and I don't even consider it (well maybe a little bit). Also make sure that you are running the latest version of each of the major browsers. Also note that the issue you are outlining (above) really have nothing to do with the PL Framework. Look here also: http://goo.gl/ttlqj

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

Sign in to follow this  

×