How to use Lytebox

Posted on by

Note: lytebox appears to be discontinued by the author. See also Thickbox.

I was recently asked how to use lytebox in a gallery. The instructions at lyteboxes web page has several examples, but I guess they can seem a little overwhelming for some people, so I put together as basic an example as I could think of. It looks like this.

In this example, we are only dealing with useing lytebox with images in gallerys. There are lots of ways to use this library, and you can check his web page for the other options.

First, in order to use this library you need to get some files moved over. There are three things you need:

  1. lytebox.js
  2. lytebox.css
  3. images folder

These files need to be placed in the folder where your html file is going to be. So, for our example, this is what I have :

  1. index.html
  2. lytebox.js
  3. lytebox.css
  4. gallery.css
  5. images (folder)
  6. pictures (folder)

index.html is the gallery html file that has the thumbnails and pulls everything together. gallery.css is a css file to style our little gallery just a bit. You don’t need this file at all. The pictures folder is where I have all my images. You can organize your images how you would like.

Ok, lets look that what index.html looks like. The first thing you need to do is put some code in the <head> tag. This is to tell the browser where the lytebox css and js files are.

Then you need to create the links in the body of your document. I have chosen to link thumbnails to larger size images. Here is the code to one image:

So, the path to the thumbnail is in the img tag. That is what shows up first. Then, in the a tag, you add the rel attribute. This is not really standard html. Html is not using the rel attribute, so lytebox has decided to use the attribute to signal it that you are linking the image within the href of the a tag through lytebox. This all happens in the background when your document loads, the lytebox.js file scans your document looking for these rel attributes, and adds some code to make it all work.

Also, look at the this: rel=”lytebox[gallery1]”. To make this work, you only need to say rel=”lytebox”. We put “gallery1” inside the [] to link all these images together. This way lytebox knows to link these images together with “next” and “previous” buttons when the larger image comes up. In the example that I have here, I have two gallery’s, “gallery1” and “gallery2” so you can see how they work. One gallery per line.

Simple? Ok, so here is all the code in our example. I have here the code for the index.html and the gallery.css file. I have not listed the lytebox code. You can download that here.



	Lytebox Example
	
	
	


	
Lytebox Example Gallery

	
	
	
	
	

	
	
	
	



body {
	background-color: black;
	text-align: center;
}
h1 {
	color: white;
	font-family: sans-serif;
}
img {
	border: solid 1px gray;
}
img:hover {
	border: solid 1px white;
	/* doesn't work in ie */
}

Check out the finished gallery here.

35 thoughts on “How to use Lytebox”

  1. Hi,
    Thank you for the above helpful notes.
    Would you be kind enough to tell me if you know of a working example that would load the thing [in this example just one image] on the page onload or windows’ onload event?
    I have tried the mod posted on on this version here:
    http://pavel.kuzub.com/lytebox
    This version is more versatile. However, I still cannot get it to work on loading the page.

    I could find the solution for the original ‘Lightbox’ version 2.04, but not for this LyteBox one.
    Any help would be greatly appreciated.
    Kind regards.

  2. There are two things that need to be figured out. One is triggering the effect on a particular item, and the other is doing on page load.

    First, you can write a function like this:

          < script language="Javascript">
          function doLytebox() {
            var myLink = document.getElementById("myLink");
            myLytebox.start(myLink,false,false);
          }
      < /script>

    That will trigger the effect when the function is called. You can call this from a button if you wish. See index2.html

    Now the onload part. If you do this:

    < body onload="doLytebox()">

    it won’t work. This is a timing issue and Lytebox isn’t initialized yet. Instead you could add to the end of the last line in the lytebox.js file:

    function initLytebox() { myLytebox = new LyteBox(); doLytebox(); }

    That will change the beheviour for all uses of this script. A better way would be to use a method like jQuery has to register events. Then you can have several items called by the onload function.

    • I added the following function to the end of lytebox.js

      function doLytebox() {
      var myLink = document.getElementById(“startevent”);
      if ( myLink != null) {
      $lb.start(myLink,false,false);
      }
      }
      function initLytebox() { myLytebox = $lb = new Lytebox(); doLytebox();}

      You can put in each page, where you want a startup-lytebox an empty link like this:

  3. Hi there,
    Thank you for your kind reply.
    I tried the suggestion to put init function at the end, but to no avail.
    Do you have, or do you know of, an example page that would fire the thing up upon page load? I learn more from examples than from following the code in the traditional, academic way.
    Failing that I shall look into JQuery.
    Thanks again.

    • You will have to look into the code. I don’t know what has changed with the script that you have. Does the example at index2.html work for you? If it does, then modifying the last line of the JS to call the doLytebox() script that I wrote should work. If the button at the index2.html page does not work, then it is likely that the myLytebox object isn’t created by your script. You would have to look into what object is created. It is likely similar.

  4. Hi,
    Thanks again for your kind help.
    Well, to begin with, success. However, the Close button does not make an appearance.
    The problem was with these various versions of the script. I also have this version as well:
    http://www.faszination-china.com/about_imaging_lytebox.php
    In any case, I used the versions that you had used in index2.html and got it working. Previously I was comparing 3.20 to 3.22.
    However, it now works in a very light page. As soon as I use it in a heavily-laden page with very complicated css files, then the buttons do not show {I have checked paths, changed them, everything. This is now baffling me.
    But the answer lies somewhere in these files.
    I really appreciate your kind help.

    For the record, this is what I did: replaced this line
    function initLytebox() { myLytebox = new LyteBox();}
    with this:
    function initLytebox() { myLytebox = new LyteBox(); doLytebox(); }

    and also put this in the header:

    function doLytebox() {
    var myLink = document.getElementById(“myLink”);
    myLytebox.start(myLink,false,false);
    }

    Thanks again.

    • Glad it is mostly working now. My guess for the “heavy-laden” page, you probably have a CSS conflict, where two CSS elements are competing, or over-riding another element. It can be tough when you combine code and CSS from several people to get that sorted out. Have you tried using the firebug plugin for firefox to inspect the elements in question? That may help.

  8. Hello, I am having some trouble adding this code to individual blog posts on my Blogger blog. I have added the code to my template’s html and there are no errors, but I am having trouble adding images to individual posts. Without uploading a whole folder to a URL outside of Blogger, is there a way to utilize images that have been uploaded through Blogger? Please let me know.

  9. i’m having issues with the onLoad commands. this is the last line of my .js file:

    function initLytebox() { myLytebox = new LyteBox(); doLytebox(); }

    this is in my tag of default.asp file

    function doLytebox() {
    var myLink = document.getElementById(“myLink”);
    myLytebox.start(myLink,false,false);
    }

    with this coding – i get these errors in IE7
    line 34 / char 4
    error: myLytebox is undefined
    code:0

    and

    line 47/char 3
    error: DT is null or not an object
    code: 0

    if i take out the onload in the tag i get only the “DT is null error”

    i’ve also tried this:
    initLytebox = function() {
    myLytebox = new LyteBox();
    doLytebox();
    }

    still get DT error

    there doesn’t seem to be anything significant on line 47 of the .js, the .css or the .asp file that would be addressed by this error?!!

    needless to say – the lytebox is not popping up immediately upon page load

    help?

  10. Hi Chris

    Lytebox is working just fine, but the images are loading backwards. Meaning that the last image in my code is loading first, and giving me the ‘prev’ navigation hover and ‘image 3 of 3’ instead of ‘next’ and ‘image 1 of 1’.

    Any clue why it’s running backwards? Thanks

    • Sorry for the slow response, but I couldn’t thing of what would do that. At start up the script parses the code to find all the images and place them in a gallery, usually in the order they appear in the code. Not sure what would change that.

  11. I’m trying to use lytebox for my site, but I also have a spry menu in my code.
    The lytebox is completely not working, am I just have an issue between the codes competing with each other?

    Is there another alternative to lightbox, and lytebox that I could use?

    • Well, the spry menu is adobe code that I don’t really know, but I would guess doesn’t use jQuery. That was my first guess that there was a conflict in versions. I would check to see if there are CSS conflicts or if both items reuse the same ID names. There are lots of other javascript effects like lightbox. The category of these things are also called lightbox, so searching on google will turn up lots of others. Here is a link to a comparison of a bunch of them. Good luck.

  12. I have been using this option to auto open on page load the lyteframe option. I have been trying to use the above directions, but I think it might just be for images. Would there be a way to implement this feature with lyteframe?

    • Hi,
      First big thanks to Cristopher! Thank you man!

      Second to make his function works for lyteframe you just have to change this line in function doLytebox:

      myLytebox.start(myLink,false,false);

      with this one:
      myLytebox.start(myLink,false,true);

      Only difference is last attribute.

  15. I tried with this code but not getting lightbox onload.

    Where I have to use

    function doLytebox() {
    var myLink = document.getElementById(“myLink”);
    myLytebox.start(myLink,false,false);
    }

    My landing page or lytebox.js

  16. Hi Chris,
    Thank you for your helpful blog on this subject.
    My wife does web design (she is the creative one) and I help her with the technical stuff (though I am an engineer, not a web programming guru). Some time back we used LyteBox on my company’s website (above URL) and it worked perfectly with the help of your tips. Now she is trying to implement it on another website http://www.baphxopen.com and it is not working. The Pause, X and forward and back prompts are hidden, even though they are enabled in the LyteBox.js code (just as we did in our website). Can you offer any suggestions as to what the problem might be?
    Thank you and regards,
    Howard

    • The next/previous/close buttons work for me (2009 gallery), it’s just that I can’t see them. Looks like white on white. There must be a style sheet collisions somewhere.

      • Hi Chris,
        Thank you for your reply, yes that is exactly what we see and it’s baffling. We set the color to Red instead of the Grey which is the default in LyteBox, but it does not help. We will keep looking to see if we can figure it out. Any other ideas?
        Regards,
        Howard

  18. Hi,

    I get Javascript errors when I try to do this. The reason is that I’m not calling Lytebox from a href: This is the errorline: if ((imageLink.getAttribute(‘rel’) == ‘lytebox’)) {

    How can I open a lytebox (or thickbox) from Javascript, without having to use <a href ??

    Regards
    JP

  19. Aha, found it !

    I have to put the complete hyperlink into the document, with id=myLink etc etc. And then it’s working. And when I do not want to show the hyperlink, I’ll make it invisble. Great !

  20. Hi Everybody!

    I still have a problem with the onload fonction. I followed Chris Ward’s suggestions, and the onload function is working, I mean I have the overflow window but the picture doesn’t appear. The js is called from an iframe. What wrong?

  21. hello…i have created a lytebox gallery in my site & it’s working great except that it is repeating the first image twice…any idea what i’m missing?? …thanks!!

Comments are closed.