Sumit Gupta

LightBox Vs VideoBox Vs Custom Code

Recently I was given a task to make LightBox and VideoBox work on same page, where we have Images and Video to show. However, Videobox is inspired by Lightbox as per developer, they are not compatible with each other. The reason I found is that they share few variable and hence they are breaking each other’s code. Now since we need functionality to be done, I have give to find a quick alternative solution..When my company said quick solution they mean a solution in next 1 hr.

Let us check what we can do..Lightbox, read image tag with a tag and show image based on those, and this is what Videobox do, it read for “rel=vidbox” in anchor tag, and then it detect the type of video source to display the item in bigger div. What I do is I modify it to recognize images as well, i.e. if we put rel=”vidbox” in anchor tag for your images, (something we do in lightbox) my modified VideoBox code will read and check for extension jpg, jpeg, gif,png and if found i write “custom code” in variable this.other to show img tag instead of SWFObject or other.

Now VideoBox is no more a video only box, and it can handle Images for me as well :).

Download modified VideoBox Code

Sumit Gupta

, ,
, , ,

36 responses to “LightBox Vs VideoBox Vs Custom Code”

  1. nice, but now you have a problem with the fixed height/width. Images won’t be displayed in their original dimensions

  2. Well, when I use it I was defining the Image height and width as I usually do in my code. Also since Videobox has default setting for height and width, they will automatically called in my modified version if you do not set Image tags height and width. CSS settings won’t work here.

  3. Hello Dave,

    I don’t think it works with Set, atleast I never use it that way. However, about the width and height, for me it works perfectly with my set of script.

    If you already have Original set of JS files with you in your project, those need to be remove to make my version of script works fine.

    I will investigate for Set of images, or append this code for that if needed 🙂

  4. Thanks for modifying the code I was having trouble having the 2 codes together on the same page and was happy I stumbled across this.

    I was wondering If there was a way to fix the overlay issue? I tried setting the body with margin 0: padding:0 but it still just overlays what’s visible and when you scroll the overlay is cut off to where the page wasn’t visible when the file is clicked (if that makes sense). I noticed this happening in the original code as well

  5. Hello,

    I observe that issue as well, however it is from original code only. However, I observe it is not the case when viewed on Firefox but only on IE.

    Seems the browser war is on in this code. Currently I have not solution for it, but if you found one please let us all know about it.

    Thanks

  7. Hello Saul,

    Actually you are talking about Lightbox feature, where as I modify VideoBox, so virtually there is no LightBox in above code.

    Hope that answer our question.

  8. Hi have see this before just wondering is there anyway to make it run with instead of I know it just a matter a of inserting this Doctype but any help be gratful

  9. Hi and thx for this version of videobox I have a question does videobox need xhtml strict to use? I downloaded inserted into my page videbox opened but the rightside of the white surround border is missing…. I am using html 4.01 but if i change the docutype to xhtml it ok but what I need to know is can it be used with just html 4.01 any feedback be helpful

  10. Hello,

    XHTML and HTML has different page parser, this make the rendering different in both cases. It is not that videobox is limited to any particular HTML code. (if it is, it belongs to VideoBox only, I didn’t modify that part). If it runs well with XHTML, then yes maybe it is XHTML code. I use it for XHTML site only :).

    Inserting DOCTYPE is good to get proper rendering results.

  11. I have been looking looking around for this kind of information. Will you post some more in future? I’ll be grateful if you will.

  12. I keep adding information as I encounter any, but if you have any specific requirement you can always email to try if I got the answer for you :).

    thanks for reading post.

  13. Hello,

    First off, thank you for attempting this and successfully creating the custom code to the script. I too, however, am experiencing issues when attempting to retrieve the linked image as I’m imagining the videobox is grabbing the initial height. On my tags I am setting the thumbnail size but I would like for it to open in its original size which is approx. 813×360. Is there any other way to attempt this work-around? I’m a beginner in the programming world and have even tried customizing your code as well but no luck so far. Once again, thanks for all your work and sharing with the world!

  14. Hi Peter, thanks for your kind word. Since you are new I would like to say, we all programmer work like this, we share our code and help each other. I will wait for a day when I use your shared code.

    About the problem you suggest, well I never had that problem with my inital code, I never give height to my Ima tag or video tag, what I basically do is I send thumbnail of the size that I need in popup box I show full image. It maybe your code is confusing with other included JS. Maybe you should try to to use without other code on same page.

  15. Hi Sumit,

    Thank you for the suggestions. I have tried the following:

    Testing on a single page:

    – With only the scripts you have provided in a js/ folder
    – Regular IMG (813×360)
    – Thumbnail IMG (336×149)

    My code is as follows:

    +

    I’m still unable to get the vidbox to appropriately show the 813×360 IMG.

    Here’s an example: ridenrla.com/qa/index.php
    > the video shows up well
    > the picture doesn’t seem to complying with me T_T

    **Thank you for any suggestions Sumit and also thank you again for all your help.

  17. Hi peter, I didnt’ get your code again .. sorry but my blog filter that out. Can you take my email from about us page and email me that.

  18. First off, absolutely love the Lightbox workaround Sumit! Exactly what I needed…

    Not sure if it’s still an issue for most, but I got the overlay problem fixed. Should remain, even when scrolled. Modified the videobox.css, should now look like:

    #lbOverlay {
    position: fixed;
    left: 0px;
    top: 0px;
    width: 100%;
    background-color: #000;
    cursor: pointer;
    }

    Works in Safari and Firefox.

  20. Hi Guys,

    Do you know how to :

    Add a background image different for each player (rel vidbox parameters) when video is ended

    Or / and
    automaticaly close videobox when video is ended.

    Thank you
    Bibi

  21. First thing to know about achieve this demand is that Videobox or Lightbox doesn’t provide any Video player of its own, so they never know when video is playing or stopping or for that matter ending. Though it is possible if you are using video with “your own” video player (and not of youtube or other video hosting). Since you have your own Flash player, you can embed a simple code that trigger a javascrpit function on some Event within Video such as when video starts or end it call a Javascript function. Once that function is called it can remove Lightbox effect or change background. You can also search in Youtube if they already have such a call to notify the embeded HTML page and then you can use it as well.
    Second method can be, you send a new parameter with your Video tag that include TIME of video that is embedded. Then one can write a simple Javascript function within VideoBox code, that trigger a timer for that time. But then make sure that if what happen when client pause or if there is network streaming delay, because JS timer will run in those condition and never stop of it’s own.

    Hope that helps you build your code ahead.

  23. Hello, First no developer is poor, it is just that you might not do that stuff before.
    Secondly it is not just JS programmer work as I suggest, you need to ask ActionScript developer to embed a notify code in his flash player. Later you just need to create a JS function that does something like
    function CallToClose()
    { .visible = false;
    }

  25. I have already answer that question. Video Box or Light box are just a placeholder in good looking manner, playing Video or music or anything within them is not their task and hence they cannot do it of there own. For this you need to get your flv player or media player to play when they get loaded. Hope that make sense.

  27. Did you ever figure out how to get a set to work so you can click next and previous? Just curious because I could really use that feature.

    And by the way, thank you for sharing your insight. It’s been a tremendous help!

  29. well, frankly I have leave this code unattended, because now I use the Jquery based slideshows with mix of facebox. Facebox open my dialog box with custom HTML. In that HTML I open up the Slideshow of video or image control from Florplayer tool slideshow.
    Since both code us JQuery code they are compatible with each other and works fine. I will share that code when time permit.

  32. Hello Sumit

    I wonder if you know why it does not work properly when you have videolightbox and lightbox together? Lightbox is working correctly as long as no jquery.tools.min.js appear in html. If not jquery.tools.min.js included the video only plays in full size of the screen. What I want is to have some part with lightbox and another part with videolightbox at the site. If you look at my site that I have linked you will see the lightbox works but the video will have full screen on videolightbox. I want the video screen to display the same size as the original film.

    t would be extremely nice if you can figure out where the problem lies. Yours sincerely,

    /kenna

  33. I made a typo in my last message. It is videolightbox who works as it should and not lightbox. That’s because jquery.tools.min.js is in html.

    • I never use VideoLightbox, but as I said in one of previous comment, use ColorBox with flowplayer jquery tools it works fine. I used them many item. infact I use jquery UI most often but Flowplayer’s jquery tools is good too use as well.
      Colorbox literately solve most of your popup problems with easy.