Results 1 to 2 of 2

Thread: Lightbox Image viewer v2.0

  1. #1
    Join Date
    Apr 2006
    Posts
    1
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default Lightbox Image viewer v2.0

    I am very very new at web design.. I am trying to do the image viewer and I understand how to incude the first part of the code into the header.. But I don't understand any of the rest.

    What does the instruction below mean.. "Include the Lightbox CSS file (or append your active stylesheet with the Lightbox styles)"

    And what I do with part 2?

    Can someonegive some advice or explain the below instrctions to me like im a 5 year old.. cheers




    Part 1 - Setup
    Lightbox v2.0 uses the Prototype Framework and Scriptaculous Effects Library. You will need to include these three Javascript files in your header.
    <script type="text/javascript" src="js/prototype.js"></script>
    <script type="text/javascript" src="js/scriptaculous.js?load=effects"></script>
    <script type="text/javascript" src="js/lightbox.js"></script>

    Include the Lightbox CSS file (or append your active stylesheet with the Lightbox styles).
    <link rel="stylesheet" href="css/lightbox.css" type="text/css" media="screen" />

    Check the CSS and make sure the referenced prevlabel.gif and nextlabel.gif files are in the right location. Also, make sure the loading.gif and closelabel.gif files as referenced near the top of the lightbox.js file are in the right location.

    Part 2 - Activate
    Add a rel="lightbox" attribute to any link tag to activate the lightbox. For example:

    <a href="images/image-1.jpg" rel="lightbox" title="my caption">image #1</a>

    Optional: Use the title attribute if you want to show a caption.

    If you have a set of related images that you would like to group, follow step one but additionally include a group name between square brackets in the rel attribute. For example:
    <a href="images/image-1.jpg" rel="lightbox[roadtrip]">image #1</a>
    <a href="images/image-2.jpg" rel="lightbox[roadtrip]">image #2</a>
    <a href="images/image-3.jpg" rel="lightbox[roadtrip]">image #3</a>

    No limits to the number of image sets per page or how many images are allowed in each set. Go nuts!

  2. #2
    Join Date
    Mar 2006
    Location
    Illinois, USA
    Posts
    12,164
    Thanks
    265
    Thanked 690 Times in 678 Posts

    Default

    What does the instruction below mean.. "Include the Lightbox CSS file (or append your active stylesheet with the Lightbox styles)"
    CSS-- cascading style sheet. What does that mean to you? no clue... just know it's formatting.
    You can, like with javascript (not sure if you know this yet), include the css directly in your html or as an external file.
    If in your page, it'll be added to the head section in a <style> tag. (or added to an existing style tag, which is what it mentiond in the instructions).
    Or, you can have an external file, formatting.css and refer to it in a tag also in your head section.

    Your page looks something like this:
    <html>
    <head>
    </head>
    <body>
    </body>
    </html>
    There... simplest page ever, and all the important parts.
    As I said, between the head tags is where this stuff goes....
    <link rel="stylesheet" href="css/lightbox.css" type="text/css" media="screen" />
    and <script type="text/javascript" src="js/prototype.js"></script> and the other JS links.

    Like this:
    <html>
    <head>
    <script type="text/javascript" src="js/prototype.js"></script>
    <script type="text/javascript" src="js/scriptaculous.js?load=effects"></script>
    <script type="text/javascript" src="js/lightbox.js"></script>
    <link rel="stylesheet" href="css/lightbox.css" type="text/css" media="screen" />
    </head>
    <body>
    </body>
    </html>

    *NOTE: You must have the css and js files on your website. As the code stands right now, you need the css in a folder called "css" in the same directory your page is in, and the js in a folder called "js". Just change the page of the href/src attributes to match where you put these files.


    Part two... just do what it says.
    <a href="url.htm"></a> tags are just links.
    Add rel="lightbox" to them, or if you want groups, do what it says there.

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •