Skip navigation
joshalbright
Currently Being Moderated

How can I set an absolute position for a Lightbox Composition (show)?

Dec 4, 2013 8:24 AM

Tags: #absolute_positioning #lightbox_widget #next_previous_buttons #loading_bar

Hi all,

I'm updating our website, and have built this pretty sweet (I think) Lightbox composition, with one HUGE flaw... I can't seem to position/anchor the actual show where I want it to lay. If I click on the "Stacked" view option, it sits in the appropriate spot, however the Next and Previous buttons show up without the show being activated (however the Close button does not). I'm guessing I've just been playing with the set up for too long and I'm missing an obvious solution (Though I have also clicked "Hide all initially" for all elements of the composition).

 

This link shows the issue, where on click, the show is in the right position, but the Next/Previous navigation shows up on top of everything:

http://ispitfire.com/newsitepreview/spitfire-services--branding,-tradi tional,-inbound,-web-more.html

 

The page does take a few seconds to load... so as a sidenote, I'd also like to include a "Loading" progress bar... any ideas for that would be super helpful as well.

 
Replies
  • Currently Being Moderated
    Dec 5, 2013 10:55 AM   in reply to joshalbright

    The total amount of data downloading for this page is huge, probably in the neighborhood of 100Mb. The primary cause of that is the heavy use of GIF images. GIF should generally be your last choice for an image file.

     

    First Choice JPEG

    For any image with mostly photographic content and that's an opaque rectangle, JPEG is the first choice. There are many GIF images on this page that would be 1/100th their current size (or less) as a JPEG with no reduction in the resolution of the image or detectable reduction in image quality.

     

    Second Choice PNG

    Browsers don't support transparency within JPEG images. Therefore any image that is not an opaque rectangle cannot be JPEG. (For example the masked beer mug image on this page is appropriately PNG format.)

     

    PNG may also be the better choice for a graphic that contains areas of solid color and hard edges between colors (typical of line art, computer drawn boxes, lines, etc.). It's really a decision each site creator needs to make and consider for each image. For some graphics some people will be quick to notice a smudge or fuziness to what was a hard edge that may be introduced by JPEG compression. For others the download speed benefits outweigh the slight fuziness or for there specific graphics the effect isn't noticeable. In still other cases for a graphic that's entirely computer drawn art the compression in PNG may result in a file that's significantly smaller than the equivalent JPEG.

     

    Third Choice GIF

    For small animated graphics, GIF is a viable choice.

     

     

    As for the lightbox position and appearance of the next/prevoius buttons, there is no direct support for what you're attempting to achieve.

     

    A lightbox is always centered within the browser view. (Or more precisely, the boundary box of the slideshow that's display and manipulable in Muse Design view, is always centered in the browser window.)

     

    For modes other than lightbox, the next/previous button are always shown. I've noted that it would make sense to add an option to control this behavior in a future Muse release.

     
    |
    Mark as:
  • Currently Being Moderated
    Dec 5, 2013 2:12 PM   in reply to joshalbright

    I don't think this page will be well received with the GIFs. 100Mb of data is 1/3 of some $20/month cell phone data plans. Average broadband speeds in the US are around 9Mbps. That equates to about 120 seconds to download this data. Data rates in Europe and the central US tend to be lower than that, so for many it would take even longer. 4G/LTE data rates are comparable, but many are still on slower technologies and thus the download time would be even longer.

     

    An example from the page is "6-4-work-print-tobacco-associates-ads.gif." It contains 5 unique images, but because of how GIF animation is handled the file contains 85 unique images and is 15.9 Mb. If you take the 5 unique images and save them as medium quality JPEG the combined 5 are roughly 333k. Roughly 1/50th the original size and download time.

     

    You don't need or want to use Flash. If you did find a Flash-based solution, it could address the image size issue, but it wouldn't work on iOS devices.

     

    If rather than placing a .gif image into each composition widget target container you put a Slideshow widget (with caption, next, previous, etc. turned off, autoplay on and a fade transition) for most of the GIFs you'd have nearly identical behavior at a very small fraction of the download cost. A couple differences that may or may not matter. On a touch device the visitor will be able to swipe through the images (unless swipe is specifically turned off) and autoplay in Muse loops, so the transitioning to the next image will wrap back around to the first image and continue.

     

    As you note, for GIFs like the banner ad the animation is not a simple fade between two images, so a GIF is the easiest solution there (though Edge Animate could be used to create that style of animation with less data download).

     
    |
    Mark as:
  • Currently Being Moderated
    Dec 6, 2013 9:59 AM   in reply to joshalbright

    Yes. Composition Lightbox with an autoplay slideshow in each target container.

     

    FWIW, the minimum data plan on AT&T is 300Mb for $20/month.

     

    Edge Animate could be used to create an animation that uses HTML5/CSS3 transition effects. The result works well on modern browsers (including iOS devices) and would be a much smaller download than a GIF, but the effects may not work on older browsers which in some cases will include IE8, which still has double digit market share last I checked.

     
    |
    Mark as:

More Like This

  • Retrieving data ...

Bookmarked By (0)

Answers + Points = Status

  • 10 points awarded for Correct Answers
  • 5 points awarded for Helpful Answers
  • 10,000+ points
  • 1,001-10,000 points
  • 501-1,000 points
  • 5-500 points