Page 2 of 2 FirstFirst 12
Results 11 to 19 of 19

Thread: Centering Popup

  1. #11
    Join Date
    Feb 2013
    Posts
    58
    Thanks
    10
    Thanked 1 Time in 1 Post

    Default

    Tried it. Still not centering to page. It centers to the camera image. Is tooltip.js causing some of this not to work. I am trying to minimize the number a clicks a person has to do. Thats why I have the rollover. Otherwise, its on clik to see and another to close.

  2. #12
    Join Date
    Jul 2008
    Location
    Derbyshire, UK
    Posts
    1,969
    Thanks
    16
    Thanked 307 Times in 305 Posts
    Blog Entries
    11

    Default

    I'm stuck on iPhone for the time being so I can't test anything but this looks promising: http://jmar.github.com/jquery-hoverZoom/
    Focus on Function Web Design | Latest News RSS | Facebook | Twitter |
    Fast Edit (A flat file, PHP web page editor & CMS. Small, FREE, no database!) | Fast Edit BE (Snippet Manager) (Web content editor for multiple editable regions!) | Fast Apps |
    The only limit to creativity is imagination: JemCon.org

  3. #13
    Join Date
    Feb 2013
    Posts
    58
    Thanks
    10
    Thanked 1 Time in 1 Post

    Default

    Thank you. I am trying it now. First impression is that it's slow to load large image the first time...about 5 seconds. But I am giving it a shot! Once again, Thank you.

  4. #14
    Join Date
    Jul 2008
    Location
    Derbyshire, UK
    Posts
    1,969
    Thanks
    16
    Thanked 307 Times in 305 Posts
    Blog Entries
    11

    Default

    I think the speed has more to do with your images than the script. I say that because your page has been crashing my iphone if I have more than a few tabs open - something about it is really causing it to struggle, and usually that's the amount of stuff downloading in the background, more often than not, images.

    When I got it to work, I pulled off an image ( http://www.menuhead.net/Restaurants/...dAdams_Eve.png ) - the first thing I noticed is that its a png, which isn't the best web format for photos. Jpeg is more appropriate for that.

    The size is the next thing you should address - this current pic comes in at 262kb, which really is too big, but you can compress it to about a tenth of the size if you optimise and convert it to jpeg. You can optimise to around 60% without noticing much of a quality loss. Around 60%-75% is standard for the web.

    I ran it through the image optimiser here on DD http://tools.dynamicdrive.com/imageoptimizer/index.php and sure enough, after converting to jpeg and choosing a 60%-70% quality compression, the resulting size is about 28kb. That's around a 90% saving!

    I haven't checked all of your other images, but the 4 that I did were all high quality png, so for arguments sake lets say that they're all in the same png format... You could reduce your whole page to a tenth of its current size by converting to jpeg and optimising - and just think how much of an improvement that will have on speed.

    You can use the DD image optimiser tool for single images, but for batch conversions, try Shrink-O-Matic: http://toki-woki.net/p/Shrink-O-Matic/

    There are many FREE image optimisation tools available that do a fair job with compression, but most don't strip out all the extra background EXIF data (when a photo was taken, camera model, landscape or portrait, etc). That's fine for most people's web optimisation needs (the fact that a web designer/developer has used ANY form of image compression shows they're thinking about their visitors' needs and sets them apart from less experienced hobbyists), but if size is a critical issue and you need to crunch out every last byte that you can get your hands on, you can resort to more specialised tools, such as SmushIt http://www.smushit.com/ysmush.it/ , PunyPNG http://www.punypng.com/ or Adobe Fireworks (commercial), which will have greater collective results on larger amounts of in-page photos/images. I tend to 'smush' template/layout images and gallery photos (ie, the images that impact on every web page or a large, same-page group that could collectively slow things down)

    Anyway, just some things for you to look into.
    Focus on Function Web Design | Latest News RSS | Facebook | Twitter |
    Fast Edit (A flat file, PHP web page editor & CMS. Small, FREE, no database!) | Fast Edit BE (Snippet Manager) (Web content editor for multiple editable regions!) | Fast Apps |
    The only limit to creativity is imagination: JemCon.org

  5. The Following User Says Thank You to Beverleyh For This Useful Post:

    DS928 (03-20-2013)

  6. #15
    Join Date
    Feb 2013
    Posts
    58
    Thanks
    10
    Thanked 1 Time in 1 Post

    Default

    Thank you Beverly. You are the best! I really appreciate you taking the time time to explain all ofthis about images. I will get busy and start the conversions today. For some reason I thought png was the way to go. Once again. Thank you.

  7. #16
    Join Date
    Jul 2008
    Location
    Derbyshire, UK
    Posts
    1,969
    Thanks
    16
    Thanked 307 Times in 305 Posts
    Blog Entries
    11

    Default

    Png has its place and it does offer an excellent, lossless quality - its just that the filesize that goes with it tends to be much larger. The general idea with any web image is to retain enough quality so things look good while keeping filesize small enough so load times aren't drastically slowed down.

    General rules -

    Use .jpg/jpeg for photos or detailed images that require a lot of colours, and optimise to about 60%-75% quality for web.

    Use .gif for simple, small animations, logos, diagrams and images that require 1-bit transparency, which means a pixel is either transparent or it isnít (no middle-ground). .Gif only supports 256 colours so you may notice speckling after saving in this format.
    You might also like to try substituting .gif for .png-8 as it can offer a 7-12% saving over the .gif format.

    Use .png-24 for images that require lots of colours, very precise/crisp edges and alpha-transparency (pixels can be varying degrees of transparency)
    Focus on Function Web Design | Latest News RSS | Facebook | Twitter |
    Fast Edit (A flat file, PHP web page editor & CMS. Small, FREE, no database!) | Fast Edit BE (Snippet Manager) (Web content editor for multiple editable regions!) | Fast Apps |
    The only limit to creativity is imagination: JemCon.org

  8. The Following User Says Thank You to Beverleyh For This Useful Post:

    DS928 (03-20-2013)

  9. #17
    Join Date
    Feb 2013
    Posts
    58
    Thanks
    10
    Thanked 1 Time in 1 Post

    Default

    Thank you. That fills volumns of reading. A good set of rules!

  10. #18
    Join Date
    Feb 2013
    Posts
    58
    Thanks
    10
    Thanked 1 Time in 1 Post

    Default

    Thank you Beverly. I ended up using colorbox. I still have to convert the images. But I am really happy with the results though. even with a loss of rollover / mouseover. Once again. Thank you. http://menuhead.net/Pages/BigHead.php

  11. #19
    Join Date
    Jul 2008
    Location
    Derbyshire, UK
    Posts
    1,969
    Thanks
    16
    Thanked 307 Times in 305 Posts
    Blog Entries
    11

    Default

    No problem.

    BTW - you've said thank you a lot in this thread but have you noticed the grey "thanks" (thumbs-up) buttons towards the bottom left of each post? Click those on the helpful replies and it makes the thanks official
    Focus on Function Web Design | Latest News RSS | Facebook | Twitter |
    Fast Edit (A flat file, PHP web page editor & CMS. Small, FREE, no database!) | Fast Edit BE (Snippet Manager) (Web content editor for multiple editable regions!) | Fast Apps |
    The only limit to creativity is imagination: JemCon.org

  12. The Following User Says Thank You to Beverleyh For This Useful Post:

    DS928 (03-20-2013)

Similar Threads

  1. Centering a JavaScript Popup Window
    By yuriyneo in forum JavaScript
    Replies: 1
    Last Post: 03-28-2009, 06:21 AM
  2. Auto-centering Popup Window
    By monique in forum Dynamic Drive scripts help
    Replies: 4
    Last Post: 03-12-2007, 01:20 AM
  3. Auto-centering Popup script problem
    By dead-poetic in forum Dynamic Drive scripts help
    Replies: 0
    Last Post: 01-05-2006, 12:55 AM
  4. question about auto-centering popup window
    By limitedvista in forum Dynamic Drive scripts help
    Replies: 0
    Last Post: 09-01-2005, 09:07 PM
  5. Script: Auto-centering Popup Window
    By soniablu in forum Dynamic Drive scripts help
    Replies: 1
    Last Post: 10-26-2004, 01:34 AM

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •