Results 1 to 9 of 9

Thread: lightbox image viewer implementation

  1. #1
    Join Date
    Jun 2007
    Posts
    10
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default lightbox image viewer implementation

    lightbox image viewer

    http://www.dynamicdrive.com/dynamici...tbox/index.htm

    Hello
    I’m new to DD and to html, scripts etc but would really love the above script working on my Frontpage photo based website. Currently all the larger versions of my thumbnail images are on separate pages of my web. For this ‘image viewer script do I need to make a copy of all my large images and place them in a separate folder or can I just link to each image where they are now?
    Also, is it fairly straightforward for a newbie to implement this?
    Thanks - mc

  2. #2
    Join Date
    Feb 2007
    Posts
    293
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    You should be able to keep the images where they are. Just make sure that the path (location) is correct in your html script.

    Yes, it's pretty simple to implement. Just follow the directions. If you are using Frontpage, it would be best to insert the links in Source or HTML View. Also, start with one picture and get it to work before doing all your pics.

    If you have problems, come on back, post a link to your page, and someone can look at it and help.

  3. #3
    Join Date
    Jun 2007
    Posts
    10
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    Thank you Veronica for the reply and suggestion re Frontpage. I'm in the process of changing hosts so thought it would be nice to change the look of my site. Will give the script a go within the next week or so and hopefully things will go without any problems. Good to know if i do encounter any i can get some help

  4. #4
    Join Date
    Jun 2007
    Posts
    10
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    O.K. i downloaded the zip file and named a folder on my frontpage 'lightbox'. I then unzipped the zip (new to all of this so may have done things wrong) and added the five files - copy and pasted each one into the folder. I think i added the part that should go into the head section correctly but not 100% sure.
    Uploaded the site via frontpage and just checked the first five images on top which were the only ones i did to see if it worked and sadly they didn't. The page if anyone can check where i might have gone wrong or need to add is here:
    photos-london.com/london2.htm

    Thanks for any help in sorting this out. Would be great to see it working

  5. #5
    Join Date
    Jun 2007
    Posts
    10
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    any help please? Below is the relevant part of the view source page if it helps. if it looks a mess it is frontpage! I've highlighted in blue the bits that i've placed as per instructions via the DD script. THANK YOU


    <title>quality photos of London. British images from the English capital</title>
    <link rel="stylesheet" href="lightbox.css" type="text/css" media="screen"/>
    <script type="text/javascript" src="lightbox.js"></script>


    </head>

    <body link="#808080" alink="#C0C0C0" bgcolor="#3D3D3D" text="#FFFFFF" vlink="#C0C0C0">

    <td align="center" height="19" width="107"><a href="demo.htm" rel="lightbox"><img border="2" src="demolew_small.jpg" width="94" height="106"></a></td>
    <td align="center" height="19" width="106"><a href="girl.htm" rel="lightbox"><img border="2" src="girl_small1.jpg" width="100" height="93"></a></td>
    <td align="center" height="19" width="108"><a href="cityblds1.htm" rel="lightbox"><img border="2" src="cityblds1_small1.jpg" width="100" height="77"></a></td>
    <td align="center" height="19" width="107"><a href="london/london0002.htm" rel="lightbox"><img border="2" src="london0002_small.jpg" alt="london0002.jpg (97751 bytes)" width="95" height="103"></a></td>
    </tr>

  6. #6
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    30,495
    Thanks
    82
    Thanked 3,449 Times in 3,410 Posts
    Blog Entries
    12

    Default

    Code:
    http://www.photos-london.com/lightbox.js
    and:

    Code:
    http://www.photos-london.com/lightbox.css
    Are not on your server. There could be other problems, but the script & stylesheet (as well as the other resource files*) must be on the server in the location indicated in the page's code.

    Additionally, the href for the rel="lightbox" links must be the address of the larger image, not the address of a page.



    *overlay.png, loading.gif, close.gif
    Last edited by jscheuer1; 07-03-2007 at 03:46 PM. Reason: add info
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  7. #7
    Join Date
    Jun 2007
    Posts
    10
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    Hi and thanks for checking. They are there but i put them in a folder named 'lightbox' see link http://www.photos-london.com/lightbox/
    Is this wrong? and if so how should i have uploaded them? Cheers

  8. #8
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    30,495
    Thanks
    82
    Thanked 3,449 Times in 3,410 Posts
    Blog Entries
    12

    Default

    See my previous message, I just updated it to include more information. However, your new question requires additional information as well. If you put the files on the server in a folder, that location must be reflected on the page that uses those resource files. Example for your demo page:

    Code:
    <link rel="stylesheet" href="/lightbox/lightbox.css" type="text/css" media="screen" />
    <script type="text/javascript" src="/lightbox/lightbox.js"></script>
    You still need to make the href of the rel="lightbox" links be an image address, not a page address. And, the path to the other resource files:

    *overlay.png, loading.gif, close.gif

    needs (for this to work with all browsers that support lightbox and with all page locations on your site) to be given in the lightbox.css and lightbox.js files wherever they are mentioned in those files. You can skip this last bit at first, just to get the basic effect working.
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  9. #9
    Join Date
    Jun 2007
    Posts
    10
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    Thanks you for pacing me gently through this. Just did a quick read of your answer and it'll take a bit of time for it to sink in but i added the folder name 'lightbox' to the head code as instructed, re-uploaded and clicked on an image and the page went dark as it does in the example script. Just got the other parts to work now Many Thanks

    Quote Originally Posted by jscheuer1 View Post
    See my previous message, I just updated it to include more information. However, your new question requires additional information as well. If you put the files on the server in a folder, that location must be reflected on the page that uses those resource files. Example for your demo page:

    Code:
    <link rel="stylesheet" href="/lightbox/lightbox.css" type="text/css" media="screen" />
    <script type="text/javascript" src="/lightbox/lightbox.js"></script>
    You still need to make the href of the rel="lightbox" links be an image address, not a page address. And, the path to the other resource files:

    *overlay.png, loading.gif, close.gif

    needs (for this to work with all browsers that support lightbox and with all page locations on your site) to be given in the lightbox.css and lightbox.js files wherever they are mentioned in those files. You can skip this last bit at first, just to get the basic effect working.

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
  •