Page 1 of 2 12 LastLast
Results 1 to 10 of 16

Thread: Lightbox image viewer 2.03a

  1. #1
    Join Date
    Apr 2011
    Posts
    82
    Thanks
    43
    Thanked 0 Times in 0 Posts

    Default Lightbox image viewer 2.03a

    1) Script Title:

    Lightbox image viewer 2.03a



    2) Script URL (on DD):

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



    3) Describe problem:

    Not working.
    This page example is :rexi1
    Last edited by rexi; 04-17-2011 at 03:06 PM.

  2. #2
    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

    The script requires a DOCTYPE that invokes standards mode. However, that's just for certain niceties in the presentation. The basic problem on the page you linked to is that all of these:

    Code:
    <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" />
    are 404 Not Found. Did you download the Lightbox V2.03a archive:

    http://www.dynamicdrive.com/dynamici...htbox2.03a.zip

    and use its files and folder structure as a template? These files are required.

    However, there are other more advanced versions of this script (I see v2.05 with IE 9 support is now out):

    http://www.huddletogether.com/projects/lightbox2/

    and other lightbox type scripts. So you might want to consider alternatives. See:

    http://www.google.com/search?hl=en&c...1g-m1&aql=&oq=

    for Google search results on 'lightbox clones'.
    - John
    ________________________

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

  3. The Following User Says Thank You to jscheuer1 For This Useful Post:

    rexi (04-15-2011)

  4. #3
    Join Date
    Apr 2011
    Posts
    82
    Thanks
    43
    Thanked 0 Times in 0 Posts

    Default

    Wow,..thank you very much.It is not for me hahahaha.This is very complicated for me.
    Have good time .....

  5. #4
    Join Date
    Apr 2011
    Posts
    82
    Thanks
    43
    Thanked 0 Times in 0 Posts

    Default Lightbox image viewer 2.03a

    1) Script Title:

    Lightbox image viewer 2.03a

    2) Script URL (on DD):

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

    3) Describe problem:

    When I download "lightbox.js",...and I copy this part of script,..and put on my HTML ,..which I need put around this script:"<style type="text/css">" ..or.."<script type="text/javascript">".

    Tankx.

  6. #5
    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:
    <script type="text/javascript">
    //script code goes here
    </script>
    But it's a little more complicated than that. You would still need the prototype.js, scriptaculous.js loading effects.js. These could be loaded from Google. And you would need the lightbox.css file (this could be put on the page) as well as the resource images, at minimum the close image. If using the group feature you would also need the next and previous image 'buttons'. The loading image would be nice too.

    Here's it setup like I said:

    Attachment 3852

    Just unzip all the files to a folder and view the google_api.htm in the browser. As the external scripts are online, you must be connected to the internet for it to work.

    Demo:

    http://home.comcast.net/~jscheuer1/s...google_api.htm
    - John
    ________________________

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

  7. #6
    Join Date
    Apr 2011
    Posts
    82
    Thanks
    43
    Thanked 0 Times in 0 Posts

    Default

    Thank you for time.
    Still not working.Iwill try ask you for more time for me.

    I will ask you for four (4) steps wich is right or wrong.

    1 So I save "lightbox.js file".


    2 I put this on the my page:

    <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" />



    3 Also I put "lightbox.css file" in my page which looking like that :


    <script type="text/javascript">

    #lightbox{
    position: absolute;
    left: 0;
    width: 100%;
    z-index: 100;
    text-align: center;
    line-height: 0;
    }

    #lightbox a img{ border: none; }

    #outerImageContainer{
    position: relative;
    background-color: #fff;
    width: 250px;
    height: 250px;
    margin: 0 auto;
    }

    #imageContainer{
    padding: 10px;
    }

    #loading{
    position: absolute;
    top: 40%;
    left: 0%;
    height: 25%;
    width: 100%;
    text-align: center;
    line-height: 0;
    }
    #hoverNav{
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    z-index: 10;
    }
    #imageContainer>#hoverNav{ left: 0;}
    #hoverNav a{ outline: none;}

    #prevLink, #nextLink{
    width: 49%;
    height: 100%;
    background: transparent url(../images/blank.gif) no-repeat; /* Trick IE into showing hover */
    display: block;
    }
    #prevLink { left: 0; float: left;}
    #nextLink { right: 0; float: right;}
    #prevLink:hover, #prevLink:visited:hover { background: url(prevlabel.gif) left 15% no-repeat; }
    #nextLink:hover, #nextLink:visited:hover { background: url(nextlabel.gif) right 15% no-repeat; }


    #imageDataContainer{
    font: 10px Verdana, Helvetica, sans-serif;
    background-color: #fff;
    margin: 0 auto;
    line-height: 1.4em;
    overflow: auto;
    width: 100%
    }

    #imageData{ padding:0 10px; color: #666; }
    #imageData #imageDetails{ width: 70%; float: left; text-align: left; }
    #imageData #caption{ font-weight: bold; }
    #imageData #numberDisplay{ display: block; clear: left; padding-bottom: 1.0em; }
    #imageData #bottomNavClose{ width: 66px; float: right; padding-bottom: 0.7em; }

    #overlay{
    position: absolute;
    top: 0;
    left: 0;
    z-index: 90;
    width: 100%;
    height: 500px;
    background-color: #000;
    }
    </script>


    4 And I put this on the page:

    <a href="http://www.dynamicdrive.com/dynamicindex4/lightbox2/sushi3.jpg" rel="lightbox" title="my caption">image #1</a>


    IT is OK. or no ??

  8. #7
    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

    Unzip the google_api.zip file from my last post to an empty folder and then view the google_api.htm in the browser.

    You may look at its source code in your editor.
    - John
    ________________________

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

  9. The Following User Says Thank You to jscheuer1 For This Useful Post:

    rexi (04-16-2011)

  10. #8
    Join Date
    Apr 2011
    Posts
    82
    Thanks
    43
    Thanked 0 Times in 0 Posts

    Default

    OK...So those my 4 steps is wrong ??

  11. #9
    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

    Yes. Have you unzipped the file? You could also look at the demo:

    http://home.comcast.net/~jscheuer1/s...google_api.htm

    and use your browser's 'view source' to see its code. It's exactly the same as what's in the .zip file. You should then be able to easily see what needs to be done.

    The only difference is that the .zip file also contains the images. Everything else is either right on the page or linked to from the Google API library.

    If you want more help, put up a demo of your own, your best effort, and give us a link to it.
    - John
    ________________________

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

  12. The Following User Says Thank You to jscheuer1 For This Useful Post:

    rexi (04-16-2011)

  13. #10
    Join Date
    Apr 2011
    Posts
    82
    Thanks
    43
    Thanked 0 Times in 0 Posts

    Default

    Thank you,..I am shame ask you more.I can't show you link on my page ,but same problem,..it is just open new window when I click on picture.

    Usually when I looking HTML from"wiew source" on some people who has "Lightbox image viewer 2.03a"..there is not many scripts.There is just like this:


    <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" />



    and source for picture like this:
    <a href="images/image-1.jpg" rel="lightbox" title="my caption">image #1</a>

    For me just not working,..I spend many hours,..but no efect.I can't find key for that,..because any other scripts is not solution.
    Sory for my english language,..and thank you for your help.

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
  •