Skip navigation
StormCloudSeven
Currently Being Moderated

Can't get Lightbox/Pirobox to work.

Jun 29, 2013 11:52 PM

In an earlier discussion which I've posted, some people have recommended that I use Lightbox or Pirobox to achieve the image display effect I was asking for, but I can't seem to get either to work for the life of me.

 

I've downloaded the Jquery file from here: http://jquery.com/download/  and then placed the file into the Lightbox/Pirobox folder (even though I've read that it isn't required to be in the same folder?)

I then followed the steps the Lightbox/Pirobox website provided, copying and pasting the codes in the head section, along with the code for the image sources.

 

Pirobox:


<head>

 

<link rel="stylesheet" type="text/css" href="css_pirobox/style_2/style.css"/>

<script type="text/javascript" src="js/jquery.min.js"></script>

<script type="text/javascript" src="js/jquery-ui-1.8.2.custom.min.js"></script>

<script type="text/javascript" src="js/pirobox_extended.js"></script>

 

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>Untitled Document</title>

</head>

 

<body>

<a href="img/img01.jpg" rel="single"  class="pirobox" title="your title">

    <img src="img/img_thumb01.png"  />

</a>

 

</body>

</html>

 

When I preview it, all I see is the thumbnail image, and when I click it, it opens up the large image in a new window. So this is just regular image linking without the pirobox effect at all. What am I missing?

 
Replies
  • Currently Being Moderated
    Jun 30, 2013 12:06 AM   in reply to StormCloudSeven

    Sounds like (although without seeing your code it's only a guess) you've got some file path(s) wrong in your HTML. Unless you copied the pirobox files into the exact same location as they were where you downloaded the code from, your page isn't "calling them" to dispay the image.

    Usually the best indicator of that is the image opens like there was no "box" display... as you say it does.

     

    Double check ALL your pirobox links in your header to make sure they're pointing to the files in the right location.

     
    |
    Mark as:
  • Currently Being Moderated
    Jun 30, 2013 1:22 AM   in reply to StormCloudSeven

    Bad link to the large image?

     
    |
    Mark as:
  • Currently Being Moderated
    Jun 30, 2013 1:46 AM   in reply to StormCloudSeven

    Where is the constructor as in

    <!doctype html>

    <html>

    <head>

    <meta charset="utf-8">

    <title>Untitled Document</title>

    <link href="http://www.pirolab.it/pirobox/css_pirobox/style_5/style.css" rel="stylesheet" />

    <script type="text/javascript" src="http://www.pirolab.it/pirobox/js/jquery_1.5-jquery_ui.min.js"></script>

    <script type="text/javascript" src="http://www.pirolab.it/pirobox/js/pirobox_extended_feb_2011.js"></script>

    <script type="text/javascript">

    $(document).ready(function() {

        $.piroBox_ext({

        piro_speed :700,

        bg_alpha : 0.5,

        piro_scroll : true,

        piro_drag :false,

        piro_nav_pos: 'bottom'

    });

    });

    </script></head>

     

    <body>

    <div class="demo">

      <ul>

        <li> <a href="http://www.pirolab.it/pirobox/img/33.jpg" rel="gallery"  class="pirobox_gall" title=""> <img src="http://www.pirolab.it/pirobox/img/33s.jpg"  /> </a> </li>

        <li> <a href="http://www.pirolab.it/pirobox/img/34.jpg" rel="gallery"  class="pirobox_gall" title=""> <img src="http://www.pirolab.it/pirobox/img/34s.jpg"  /> </a> </li>

        <li> <a href="http://www.pirolab.it/pirobox/img/37.jpg" rel="gallery"  class="pirobox_gall" title=""> <img src="http://www.pirolab.it/pirobox/img/37s.jpg"  /> </a> </li>

        <li> <a href="http://www.pirolab.it/pirobox/img/38.jpg" rel="gallery"  class="pirobox_gall" title=""> <img src="http://www.pirolab.it/pirobox/img/38s.jpg"  /> </a> </li>

      </ul>

    </div>

    </body>

    </html>

    Copy and paste the above code into a new document and view it in your favourite browser.

     
    |
    Mark as:
  • Currently Being Moderated
    Jun 30, 2013 5:12 PM   in reply to StormCloudSeven

    Evidently, you have got an error in your markup.

     

    If you want us to help you find the error, we will need to be privy to your markup in a manner similar to what I have shown in Reply#4

     
    |
    Mark as:
  • Currently Being Moderated
    Jun 30, 2013 6:43 PM   in reply to StormCloudSeven

    Nothing wrong with the code that you have shown.

     
    |
    Mark as:
  • Currently Being Moderated
    Jun 30, 2013 9:49 PM   in reply to StormCloudSeven

    You could be right. On the other hand you could be wrong.

     

    The answer lies in the code and as you are the only one that has a full overview of the code, you are in the best position to find the solution.

     
    |
    Mark as:

More Like This

  • Retrieving data ...

Bookmarked By (0)

Answers + Points = Status

  • 10 points awarded for Correct Answers
  • 5 points awarded for Helpful Answers
  • 10,000+ points
  • 1,001-10,000 points
  • 501-1,000 points
  • 5-500 points