Jump to content


Photo
- - - - -

Carousel Bug, problems in Chrome and Safari


  • Please log in to reply
11 replies to this topic

#1 timquiggle

timquiggle

    Member

  • Members
  • PipPip
  • 15 posts
  • Country: Country Flag

Posted 11 March 2012 - 08:11 PM

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).

#2 Rob

Rob

    One Smart Egg

  • Members
  • 13575 posts
  • LocationEast Coast, USA
  • Framework Version:The Latest, of course
  • Country: Country Flag

Posted 11 March 2012 - 09:21 PM

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:

Please Login or Register to see this Hidden Content

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

Please Login or Register to see this Hidden Content

which provides some answers. This video might help a bit too

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.

#3 timquiggle

timquiggle

    Member

  • Members
  • PipPip
  • 15 posts
  • Country: Country Flag

Posted 12 March 2012 - 04:01 PM

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?

#4 Simon_P

Simon_P

    Messer

  • Administrators
  • 8388607 posts
  • LocationDevon
  • Framework Version:2.0
  • Country: Country Flag

Posted 12 March 2012 - 04:12 PM

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.

Please Login or Register to see this Hidden Content



#5 timquiggle

timquiggle

    Member

  • Members
  • PipPip
  • 15 posts
  • Country: Country Flag

Posted 12 March 2012 - 04:35 PM

Thanks Simon, Not sure what all that means. Any suggestions? Why does it work fine in Firefox and IE?

#6 Simon_P

Simon_P

    Messer

  • Administrators
  • 8388607 posts
  • LocationDevon
  • Framework Version:2.0
  • Country: Country Flag

Posted 12 March 2012 - 04:38 PM

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?

#7 timquiggle

timquiggle

    Member

  • Members
  • PipPip
  • 15 posts
  • Country: Country Flag

Posted 12 March 2012 - 05:08 PM

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?

#8 WebWerx

WebWerx

    Advocate

  • Members
  • 546 posts
  • LocationCanada
  • Framework Version:2.2
  • Country: Country Flag

Posted 12 March 2012 - 05:14 PM

@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.

#9 timquiggle

timquiggle

    Member

  • Members
  • PipPip
  • 15 posts
  • Country: Country Flag

Posted 12 March 2012 - 05:25 PM

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????

#10 Simon_P

Simon_P

    Messer

  • Administrators
  • 8388607 posts
  • LocationDevon
  • Framework Version:2.0
  • Country: Country Flag

Posted 12 March 2012 - 05:34 PM

They all have different ways of handling javascript and images.

#11 WebWerx

WebWerx

    Advocate

  • Members
  • 546 posts
  • LocationCanada
  • Framework Version:2.2
  • Country: Country Flag

Posted 12 March 2012 - 05:36 PM

@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:

Please Login or Register to see this Hidden Content



#12 catrina

catrina

    Advocate

  • Members
  • 12345 posts
  • LocationCalifornia
  • Country: Country Flag

Posted 13 March 2012 - 02:22 AM

@WebWerx Thanks for the insight.