Call-back icon  Enterprise Sales: +1.310.775.2674 (N. America)   +44 20.3286.4137 (UK)

Magento

eCommerce Software for Online Growth

Adding Shadowbox to Magento


A tutorial on how to add the Shadowbox modal box to your Magento online store. Via Chad Coleman.

RSS comments feed for this entry

User Comments

|12 comments
  1. srinigenie

    1srinigenie |posted June 21 2008

    oh! great ...shadowbox looks great and the tutorial seems very instructive too !! But I am seeing a lot of these and had some questions -

    1. How to decide on lightbox or lightwindow or shadowbox
    2. Will this cause any major impact on the page load time?

  2. mjohnsonperl

    2mjohnsonperl from Carthage, MO|posted June 21 2008

    My preference visually is Shadowbox, as the controls are out of the way at the bottom of the image, but they are ALWAYS visible, where with lightbox if you have multiple images you sometimes have to remind yourself to move the mouse over the image on the left or right side to get the control to display… so you can see them.

    I like the concept for keeping things clean and hiding the controls, but in this case if you have multiple images probably one of the biggest things is to move between the images, so I’d rather see the controls instantly and know exactly where to move the mouse the instant I want to move to the next image (I have a tendency to forget about using the keyboard arrow keys to move between images).

    Not that you couldn’t change this with the others, but I do like the white text on a black background with Shadowbox for the title, and controls because it seems to highlight the actual photo a little more, which is the main purpose with this kind of tool. The way this is done, it makes the controls and title less significant visually, but the controls still remain present and quickly/intuitively accessible, and that’s the part I like the most about shadowbox.

    The white footer in lightbox seems to be more connected with the image, like it’s a part of the image, and I tend to find it draws my attention away from the image. Lightbox is great, and has a really nice area for captions, if the caption is important to the image you are displaying. The close button is more obvious with Lightbox and also suplements the command “close” with a symbol “x” that is universally recognized.

    Depending on both the type of person that is coming to your site, and how well they use the controls might be one things to consider. The other might be how you intend to use it, and what kind of content you end up displaying inside the box.

    So, there is an opinion on the differences, both are great tools, and Chad, thank you very much for providing a guide on how to make this work with Magento.

  3. thE_iNviNciblE

    3thE_iNviNciblE from Oldenburg|posted June 22 2008

    this is a nice improvement for useabillity grin
    looks great.

    @srinigenie:
    2. 88 KB Download. Its made with the YUI from Yahoo i think its quite fast.

  4. karynn

    4karynn |posted June 23 2008

    The demos on http://mjijackson.com/shadowbox/#demos were quite slow… is that due to the site or inherent with the Shadowbox code?

  5. i960

    5i960 from Bakersfield, CA|posted June 23 2008

    I prefer Floatbox. http://randomous.com/tools/floatbox/ It’s based on Lytebox, which was based on Lightbox.  Like Shadowbox, it also keeps the controls visible at all times, but you can also click on the right or left side of the image to navigate.  Which image viewer you choose is largely up to personal preference.  I’ve tried nearly all of them, and Floatbox is my favorite for now.

  6. thE_iNviNciblE

    6thE_iNviNciblE from Oldenburg|posted June 23 2008

    Hi i960,

    Floatbox http://randomous.com/tools/floatbox/ is really fast !!
    Nice that you can navigate with on screen controlls (DHTML - Layer) like “NEXT” “PREVIOUS”.
    Its much faster than the normal Lightbox - http://www.lokeshdhakar.com/projects/lightbox2/.

  7. vivaknievel

    7vivaknievel |posted March 8 2009

    Does anyone happen to have any idea of how to incorporate the latest version of either Shadowbox or Floatbox to the samples generated for downloadable products?  It would be fantastic to be able to play MP3 or video samples this way.  I tried following Chad’s example for Shadowbox, and other tutorials on using Lightbox, in order to get an idea of it… but no dice. 

    The other alternative I’ve been trying to figure out is being able to call up one of these scripts, by making an attribute and placing the rel links in the text box.  Something tells me there are other pages involved that I’m not quite sure about. 

    Has anyone tried any of these yet?

  8. chll

    8chll |posted May 18 2009

    shadowbox have a newer version 3.0b now

    is there any instruction of implemenation?

    thank you

  9. Pixxa
  10. InfernoX

    10InfernoX |posted 1 month ago

    I am actually having problems with shadowbox 3.0b, it is working perfectly in firefox, and in IE 8, but in IE6 and 7 I am getting a operation aborted windows warning for some reason.

  11. thE_iNviNciblE

    11thE_iNviNciblE from Oldenburg|posted 1 month ago

    i had the problem with the lightbox which gets broken ...with products that have custom options… but the tutorial is now updated…

    http://www.magentocommerce.com/wiki/adding_lightbox_to_magento_v2

  12. chll

    12chll |posted 1 month ago

    Lightbox can only pop up image
    So it is not suitable to me as I want the box pop up website


© Copyright 2009 Varien. Magento, eCommerce software, is a trademark of Irubin Consulting Inc. DBA Varien
Privacy Policy|Terms of Service
Magento Community Count
108785 users|264 users currently online|199901 forum posts