Support for Drupal 7 is ending on 5 January 2025—it’s time to migrate to Drupal 10! Learn about the many benefits of Drupal 10 and find migration tools in our resource center.Combine non animated pics into 1 gif and use CSS Sprites to select images.
| Comment | File | Size | Author |
|---|---|---|---|
| #5 | lightbox-sprite.zip | 4.8 KB | extect |
| #5 | lightbox-alt-sprite.zip | 5.86 KB | extect |
| #5 | loading_lite.gif | 2.18 KB | extect |
| #5 | loading.gif | 1.55 KB | extect |
| #4 | lightbox-alt-sprite.zip | 6.23 KB | mikeytown2 |
Comments
Comment #1
mikeytown2 CreditAttribution: mikeytown2 commentedBetter yet, using http://spritegen.website-performance.org/ here's the output
Comment #2
mikeytown2 CreditAttribution: mikeytown2 commentedSat down and did it for lightbox-alt. Here is a zip of my files. Also I changed the Close Icon to red. I don't use the slideshow option, but that could be loaded into the sprite.
Comment #3
stella CreditAttribution: stella commentedMarking back to needs work - changing the close button to red is not something I'm willing to consider at this time. The rest looks good, but haven't fully tested it yet.
Comment #4
mikeytown2 CreditAttribution: mikeytown2 commentedSwitched close back to original and added in Play/Pause.
Comment #5
extect CreditAttribution: extect commentedChanged sprites to PNG8 to reduce file size.
I also attached new versions of loading.gif and loading_lite.gif, which have been improved using gifsicle (lossless improvement).
loading.gif: 2767 Bytes -> 1588 Bytes
loading_lite.gif: 2364 Bytes -> 2228 Bytes
Comment #6
mikeytown2 CreditAttribution: mikeytown2 commented@extect
Only problem with PNG's is IE6, thus I think the reduction in file sizes isn't worth the it. Also Include the css changes to the lightbox css files, that way you can test it. Simply providing the output from http://spritegen.website-performance.org/ is not the way to do it. Splitting up the sprites into lightbox.css, lightbox_lite.css & lightbox_alt.css (already done) is the way to go. That way it only loads what you will use.
Comment #7
extect CreditAttribution: extect commentedNo, IE6 has no problems with PNG as long as you don't use alhpa transparency. As all the images for lightbox2 don't use that, my files should be totally fine for IE6.
Comment #8
daemon CreditAttribution: daemon commentedextect is right, png has no problems as long as you do not use alpha transparency.
It is not about file size reduction these days but the number of connections (http requests) the client makes to the server.
See Yahoo's Best Practices for Speeding Up Your Web Site.
Comment #9
jcisio CreditAttribution: jcisio commentedJust put the two alt files into my Lightbox2 module folder. It works well.
Comment #10
Jak-o CreditAttribution: Jak-o commentedHi how to implement this trick?
Thanks
Comment #11
joergvk CreditAttribution: joergvk commentedjak-o,
unzip the files in your lightbox2 module folder /ccs and /images and make sure you don't use the folder names in the zip. Then change the settings of lightbox 2 to use the alternative user interface if you don't use that interface already. That's it.
Joerg
Comment #12
Bensbury CreditAttribution: Bensbury commentedThat's very nice.
Thanks for doing this.
Comment #13
Jak-o CreditAttribution: Jak-o commentedJoerg thank you!
jak-o
Comment #14
lyricnz CreditAttribution: lyricnz commentedCan the maintainer of this module review this option? Lightbox2 and my Fusion-derived theme are the two main culprits for my 50+ images on a page.
Comment #15
xl_cheese CreditAttribution: xl_cheese commentedThanks for the image and css file!
I don't know if it's related, but after installing this I no longer get the background to darken when opening a lightbox image or frame.
Comment #16
baronmunchowsen CreditAttribution: baronmunchowsen commentedIn the lightbox_alt.css file, the selector #overlay should be #lightbox2-overlay - this will give you the dark background again.
Comment #17
ressa CreditAttribution: ressa commentedGreat work mikeytown2, I got rid of 8 elements by dropping in the two files and choosing "Use alternative layout" and went from 77 points to 82 on http://webpagetest.org :-)
It's RTBC.
Comment #18
pifagor+1