Results 1 to 6 of 6
  1. #1
    Join Date
    Dec 2007
    Posts
    312
    Thanks
    1
    Thanked 35 Times in 30 Posts

    how to put lightbox2 in your site?

    okay...i still have quite an old fashioned site and i want to upgrade it a bit. so i want to use the lightbox 2 feature from java in my existing site.

    i downloaded the lightbox2 package from the site and read the tutorial....but...i..don't...well..understand..any thing from it.

    i am horrible with coding and i tried reading codes from other pages that use the lightbox feature, i tried to read other tutorials but i have no clue how to even start putting this feature in...i really don't get how i can create my pages so, that when i click a thumb a lightbox popuppgae comes up and...well shows the image.


    thanks for your time
    Last edited by bluemonika; January 1st, 2009 at 08:35 AM.


  2. Hide this ad by registering as a member
  3. #2
    Join Date
    Jul 2006
    Posts
    213
    Thanks
    1
    Thanked 72 Times in 21 Posts
    how far have you got ;]

    you need to unzip the files and upload them to your web space

    then add the code in between the <head> and </head> tags on the page you want to use it

    depending on which folder on your site you upload it to you may need to change the url in the css file of where the images for the lightbox are

    then to use it you add rel="lightbox" inside the image tags on the page

    that's it at a basic overview

    if you need more then ask away ;]

  4. #3
    Join Date
    Dec 2007
    Posts
    312
    Thanks
    1
    Thanked 35 Times in 30 Posts
    well i unzipped the files of course

    you need to unzip the files and upload them to your web space <--so i need to put them on the ftp beforehand?

    then add the code in between the <head> and </head> tags on the page you want to use it <---i understood this part from the tutorial so i did try that. question is...wich page should i put this into...the page with the tumbnails??

    depending on which folder on your site you upload it to you may need to change the url in the css file of where the images for the lightbox are


    i started to get lost at this last part i understand that i need to adjust the CSS code for it to work...how do i do this when my images are stored in several different folders?...does it make it more difficult to adjust or...

    then to use it you add rel="lightbox" inside the image tags on the page

    is this also the thumbnail page?

  5. #4
    Join Date
    Jul 2006
    Posts
    213
    Thanks
    1
    Thanked 72 Times in 21 Posts
    you need to add the stuff to the head on every page that you want to use the lightbox

    the css file url editing is to point at where the lightbox images are, not the images you want to show inside the lightbox (the lightbox itself uses images for the forward and back etc)

    and the last part apologies, had a hangover brainfart when i said that

    you add it to the code for the link that goes to your image

    <a href="images/skunk.jpg" rel="lightbox" title="my caption"><img src="skunkthumbnail.jpg" alt="skunk" /></a>

    for example if you had a picture of a skunk

  6. #5
    Join Date
    Dec 2007
    Posts
    312
    Thanks
    1
    Thanked 35 Times in 30 Posts
    hihi sorry that i've been adscent for a while

    let me see...this is what i have so far:

    you need to unzip the files and upload them to your web space ( still am not sure if i need to upload the zipp files on my ftp beforehand..)

    then add the code in between the <head> and </head> tags on the page you want to use it (check)

    depending on which folder on your site you upload it to you may need to change the url in the css file of where the images for the lightbox are your last explanation made it a bit more clear for me...but i still have some difficulties.

    let's say that i have the images for the lightbox in the CSS folder itself...would this be correct?: <link rel="stylesheet" href="css/lightbox.css" type="text/css" media="screen" />

    orrrr....for example...if i have the images in a folder named...images...would i have to put this?: <link rel="stylesheet" href="images" type="text/css" media="screen" /> i have not putted any of the lightbox files onto the ftp...do i need to put them on there first and than link the html adress of the folder instead?

    and then finally: as for linking the images itself...tehre are also problems there. first of all the links to my images that i want to show look like this:
    <a target="_blank" href="nieuw/aquarell/angryangel.htm >
    <img border="0" src="nieuw/aquarell/angryangelthumb.jpg" width="70" height="70"></a></td>

    is this the correct way to put the lightbox code in there?

    <a target="_blank" href="nieuw/aquarell/angryangel.htm"rel="lightbox">
    <img border="0"src="nieuw/aquarell/angryangelthumb.jpg" width="70" height="70"></a></td>

    whenever i try out the codes the picture still pop ups in a normal new window or whatever kind of window i choose in target frame properties.....no lightbox the official site said this: This is commonly caused by a conflict between scripts. Check your body tag and look for an onload attribute. Example:
    <body onload="MM_preloadImages(‘/images/menu_on.gif’)…;">


    problem is...that code is not on my page so that can't be it. when putting the lightbox on my site..what target frame setting should i use? or should this have no effect on the light box?

  7. #6
    Join Date
    Jul 2006
    Posts
    213
    Thanks
    1
    Thanked 72 Times in 21 Posts
    I went to the dreamchaser site in your signiture and looked at the source code. There is no link to a css file in the <head>, though there is inline css formatting elsewhere in the page. Also its designed with a table for layout, which is a really bad outdated way of doing things.

    Anyway...

    ok, when I say you need to edit the url to the images in the css file, I mean you need to open lightbox.css and edit the file. You do not change the what is put in the <head> tags to load the css file. So that first one of those two is right. If you really can't work it out, you can put the full link to the image file in the css file. So use www.mysite...../images/....jpg instead of images/....jpg. for example

    <a target="_blank" href="nieuw/aquarell/angryangel.htm"rel="lightbox">
    <img border="0"src="nieuw/aquarell/angryangelthumb.jpg" width="70" height="70"></a>
    this is nearly right a target="_blank" href="nieuw/aquarell/angryangel.htm"rel="lightbox" remove the target option, you don't need it in this case

    you are linking to angryangel.htm which is a page not a picture, so thats why its loading a seperate page. change that to angryangel.jpg or whatever the image is called

    put a space before rel="lightbox" remove the border="0" (that is css and should be in the css file, which lightbox will already have set anyway)

    It's also good practice to put an alt="image description" in the img tag. This will let people know whats there if the image doesn't load. You can google for more info on that.


    Ok, just had more of a poke around the page source. Not sure why you are using frames. I can't see a link to a css file on any of the pages in the <head>:

    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=shift_jis">
    <title>Home</title>
    </head>
    There is also a lot of inline css
    <div style="position: absolute; width: 100px; height: 195px; z-index: 1; left: 107px; top: -1px" id="layer2" align="center">
    that could be just <div class="thumbnailslayout"> and then all the rest of that should be in a css file. The advantages of that is that if you wanted to change that layout, you just edit the css file and it will update every page with that <div> tag on it. Putting it inline means you will have to make the change on every page seperatly. It also uses less code overall so, less to download for a user. Means you use less of your hosts bandwidth which saves money all round.

    Not sure what you used to make the site, but I would look at learning the basics of xhtml and css if you can spare the time. You can always leave that up for now and work on it on a hidden page till you have worked it out.

    Of course its all up to you at the end of the day ;]

Similar Threads

  1. Art: New to this Site!
    By JesseSmith in forum Finished Art
    Replies: 1
    Last Post: April 2nd, 2011, 03:02 AM
  2. Replies: 0
    Last Post: March 23rd, 2011, 04:35 PM
  3. Art: I have a new site
    By Creature_designer in forum 3D Art, Sculpture & Toy Art
    Replies: 2
    Last Post: October 10th, 2006, 11:27 PM
  4. my new site
    By cartoonfox in forum Artist Lounge
    Replies: 4
    Last Post: October 30th, 2003, 11:36 AM
  5. Art: site is up
    By Zeravla in forum Finished Art
    Replies: 5
    Last Post: July 6th, 2003, 08:49 AM

Members who have read this thread: 0

There are no members to list at the moment.

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
  •  
Designed by The Coldest Water, we build the coldest best water bottles, ice packs and best pillows.