• Registered: May 23, 2009
  • Posts: 4

Topic: I can't figure out this pirobox code?!

Hey everyone.

I am working on this portfolio site, and found this great script ( pirobox) but cannot figure out how to properly incorporate it into my html page


so far this is the script I have for a single page..But all I get is this weird arrow image thing and it erased all my text, and theres no images shown.

I guess I just don't know where to place the main code from the site into the body of my other work?


here is the main site with brief info:http://www.pirolab.it/pirobox/

Thanks



here is my document:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>untitled</title>
<link href="css_pirobox/pirobox_w.css" media="screen" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="js/jquery-1.3.1.min.js"></script>
<script type="text/javascript" src="js/jquery.easing.1.3.js"></script><!--OPTIONAL-->
<!--<script type="text/javascript" src="js/jquery1.2.6.js"></script>-->
<script type="text/javascript" src="js/piroBox.js"></script>
<script type="text/javascript">
$(document).ready(function(){

jQuery.easing.def = 'easeOutExpo';


    $('.thumbs').piroBox({<!--OPTIONAL,if don't want easing, just take it off, or comment-->
            mySpeed: 1500,
            open_speed : 1500,
            close_speed : 1500,
            bg_alpha: 0.8,
            pathLoader : 'url(css_pirobox/ajax-loader_w.gif) center center no-repeat;',
            gallery : '.pirobox_in li a',
            gallery_li : '.pirobox_in li',
            next_class : '.next_in',
            previous_class : '.previous_in'
    });   
    $('.thumbs').piroBox({
            mySpeed: 1500,
            open_speed : 1500,
            close_speed : 1500,
            bg_alpha: 0.8,
            pathLoader : 'url(css_pirobox/ajax-loader_w.gif) center center no-repeat;',
            gallery : '.pirobox li a',
            gallery_li : '.pirobox li',
            single : '.single  a',
            next_class : '.next',
            previous_class : '.previous'
    });   
});

<style type="text/css">
<!--
#apDiv1 {
    position:absolute;
    left:10px;
    top:31px;
    width:214px;
    height:557px;
    background-color:#FFF;
    layer-background-color:#FFF;
    border:0px none #000000;
    z-index:1;
}
body,td,th {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 9px;
    color: #999;
    font-weight: bold;
}
body {
    background-color: #FFF;
}
a:link {
    text-decoration: none;
    color: #999;
}
a:visited {
    text-decoration: none;
    color: #666;
}
a:hover {
    text-decoration: none;
}
a:active {
    text-decoration: none;
}
#apDiv2 {
    position:absolute;
    left:239px;
    top:31px;
    width:793px;
    height:555px;
    background-color:#FFF;
    layer-background-color:#FFF;
    border:0px none #000000;
    z-index:2;
}
-->
</style>
<script src="SpryAssets/SpryEffects.js" type="text/javascript"></script>
<script type="text/javascript">
<!--
function MM_effectHighlight(targetElement, duration, startColor, endColor, restoreColor, toggle)
{
    Spry.Effect.DoHighlight(targetElement, {duration: duration, from: startColor, to: endColor, restoreColor: restoreColor, toggle: toggle});
}
//-->
</script>
</head>
<body>
<body leftmargin="235" topmargin="30" marginwidth="14" marginheight="14"><link href="css_pirobox/pirobox_w.css" media="screen" rel="stylesheet" type="text/css" />   
<script type="text/javascript" src="js/jquery-1.3.1.min.js"></script> 
<script type="text/javascript" src="js/jquery.easing.1.3.js"></script><!-- OPTIONAL, just for easing--> 
<script type="text/javascript" src="js/piroBox.js"></script> 
<script type="text/javascript"> 
$(document).ready(function(){ 

                    <li>
                        <a href="images folder/GRAPHICS/Graphic1book.jpg" title="Enojet Sohest Album Booklet Design 2006" ><img src="images folder/GRAPHICS/Graphic1book.jpg" alt="demo" width="100" height="100" /></a>
                    </li>
                    <li>
                        <a href="images folder/GRAPHICS/Graphic2cards.jpg" title="Orphan's Roar Business Card Set 2006"  class="first_list"><img src="images folder/GRAPHICS/Graphic2cards.jpg" alt="demo" width="100" height="100" /></a>       
                    </li>
                    <li>
                            <a href="images folder/GRAPHICS/Graphic3posters.jpg" title="Selected Poster Designs 2002-200" class="first_list"><img src="images folder/GRAPHICS/Graphic3posters.jpg" alt="demo" width="100" height="100" /></a>
                </li>
                    <li>
                        <a href="images folder/GRAPHICS/Graphic4bargrill.jpg" class="first_list" title="Logo Design Set" ><img src="images folder/GRAPHICS/Graphic4bargrill.jpg" alt="demo" width="100" height="100" /></a>
                    </li>
         
                    <li>
                      <a href="images folder/GRAPHICS/Graphic5humans.jpg" title="Voices of Tools and Machines: Digital Print Set"><img src="images folder/GRAPHICS/Graphic5humans.jpg" alt="demo" width="100" height="100" /></a>       
                  </li>
                    <li>
                      <a href="images folder/GRAPHICS/Graphic6sleeve.jpg" title="Detail of Enojet Sohest Album Design 2006"><img src="images folder/GRAPHICS/Graphic6sleeve.jpg" alt="demo" width="100" height="100" /></a>       
                    </li>
                  <li>
                    <a href="images folder/GRAPHICS/Graphic7sus.jpg" title="Natural Plastic, Publication Cover Design 2007"><img src="images folder/GRAPHICS/Graphic7sus.jpg" alt="demo" width="100" height="100" /></a>       
                </li>
                    <li>
                    <a href="images folder/GRAPHICS/Graphic8close.jpg" title="Selected Album Booklet in leaf closeup 2006"><img src="images folder/GRAPHICS/Graphic8close.jpg" alt="demo" width="100" height="100" /></a>
<li>
                    <a href="images folder/GRAPHICS/Graphic9inter.jpg" title="Selected Poster Design: International Career Forum 2007"><img src="images folder/GRAPHICS/Graphic9inter.jpg" alt="demo" width="100" height="100" /></a>
                    </li>
<li>
                    <a href="images folder/GRAPHICS/Graphic10tranlim.jpg" title="Detail of Album Design Transference/Limerance 2008"><img src="images folder/GRAPHICS/Graphic10tranlim.jpg" alt="demo" width="100" height="100" /></a>
</li>
                </ul>
            </div>
            <div style="float:left; width:90%; margin-top:5px;">
                <h3>Single Image</h3>
            </div>

            <div class="pirobox">
                <span class="single thumbs_all">
                    <a href="images/9.jpg" title="Caption">
                    <img src="images/9_s.jpg" alt="demo" width="100" height="100" /></a>
                </span>
                <span class="single thumbs_all">
                    <a href="images/10.jpg" title="Caption"><img src="images/10_s.jpg" alt="demo" width="100" height="100" /></a>
                </span>
            </div>
            <div style="float:left; width:90%; margin:10px 0 10px 10px;">
            <a href="http://www.pirolab.it/pirobox/">back to pirobox </a>
            </div>
</body>
</html>

Vote up Vote down

  • From: Florida
  • Registered: December 19, 2008
  • Posts: 2,680
  • Reputation: 2

Re: I can't figure out this pirobox code?!

I have not tested but you have several errors in your page. The main problems is that you did n't have a closing tag for the script.  You also had two body tags and a missing open div tag.  Finally, you had portion of the script repeated in the body when it's already been called in head.

Also, there was a redundant style in your css 'layer-background-color' which I removed. I believe this styles was only meant for Netscape. As you know, Netscape is no longer supported and nearly non-existent.

Here's your newly cleaned up code. Again, it has not been tested so check it carefully.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
<title>untitled</title>
<link href="css_pirobox/pirobox_w.css" media="screen" rel="stylesheet" 
type="text/css" />
<script src="js/jquery-1.3.1.min.js" type="text/javascript"></script>
<script src="js/jquery.easing.1.3.js" type="text/javascript"></script>
<!--OPTIONAL-->
<!--<script type="text/javascript" src="js/jquery1.2.6.js"></script>-->
<script src="js/piroBox.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function(){

 jQuery.easing.def = 'easeOutExpo';


    $('.thumbs').piroBox({<!--OPTIONAL,if don't want easing, just take it off, or comment-->
            mySpeed: 1500,
            open_speed : 1500,
            close_speed : 1500,
            bg_alpha: 0.8,
            pathLoader : 'url(css_pirobox/ajax-loader_w.gif) center center no-repeat;', 
            gallery : '.pirobox_in li a', 
            gallery_li : '.pirobox_in li', 
            next_class : '.next_in',
            previous_class : '.previous_in'
    });    
    $('.thumbs').piroBox({
            mySpeed: 1500,
            open_speed : 1500,
            close_speed : 1500,
            bg_alpha: 0.8,
            pathLoader : 'url(css_pirobox/ajax-loader_w.gif) center center no-repeat;', 
            gallery : '.pirobox li a', 
            gallery_li : '.pirobox li',
            single : '.single  a',
            next_class : '.next',
            previous_class : '.previous'
    });    
});
</script>
<style type="text/css">
<!--
#apDiv1 {
    position: absolute;
    left: 10px;
    top: 31px;
    width: 214px;
    height: 557px;
    background-color: #FFF;
    border: 0px none #000000;
    z-index: 1;
}
body, td, th {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 9px;
    color: #999;
    font-weight: bold;
}
body {
    background-color: #FFF;
}
a:link {
    text-decoration: none;
    color: #999;
}
a:visited {
    text-decoration: none;
    color: #666;
}
a:hover {
    text-decoration: none;
}
a:active {
    text-decoration: none;
}
#apDiv2 {
    position: absolute;
    left: 239px;
    top: 31px;
    width: 793px;
    height: 555px;
    background-color: #FFF;
    border: 0px none #000000;
    z-index: 2;
}
-->
</style>
<script src="SpryAssets/SpryEffects.js" type="text/javascript"></script>
<script type="text/javascript">
<!--
function MM_effectHighlight(targetElement, duration, startColor, endColor, restoreColor, toggle)
{
    Spry.Effect.DoHighlight(targetElement, {duration: duration, from: startColor, to: endColor, restoreColor: restoreColor, toggle: toggle});
}
//-->
</script>
</head>

<body>

<div>
    <ul>
        <li><a href="images%20folder/GRAPHICS/Graphic1book.jpg" 
        title="Enojet Sohest Album Booklet Design 2006"><img alt="demo" 
        height="100" src="images%20folder/GRAPHICS/Graphic1book.jpg" 
        width="100" /></a> </li>
        <li><a class="first_list" 
        href="images%20folder/GRAPHICS/Graphic2cards.jpg" 
        title="Orphan's Roar Business Card Set 2006"><img alt="demo" 
        height="100" src="images%20folder/GRAPHICS/Graphic2cards.jpg" 
        width="100" /></a> </li>
        <li><a class="first_list" 
        href="images%20folder/GRAPHICS/Graphic3posters.jpg" 
        title="Selected Poster Designs 2002-200"><img alt="demo" height="100" 
        src="images%20folder/GRAPHICS/Graphic3posters.jpg" width="100" /></a>
        </li>
        <li><a class="first_list" 
        href="images%20folder/GRAPHICS/Graphic4bargrill.jpg" 
        title="Logo Design Set"><img alt="demo" height="100" 
        src="images%20folder/GRAPHICS/Graphic4bargrill.jpg" width="100" /></a>
        </li>
        <li><a href="images%20folder/GRAPHICS/Graphic5humans.jpg" 
        title="Voices of Tools and Machines: Digital Print Set"><img alt="demo" 
        height="100" src="images%20folder/GRAPHICS/Graphic5humans.jpg" 
        width="100" /></a> </li>
        <li><a href="images%20folder/GRAPHICS/Graphic6sleeve.jpg" 
        title="Detail of Enojet Sohest Album Design 2006"><img alt="demo" 
        height="100" src="images%20folder/GRAPHICS/Graphic6sleeve.jpg" 
        width="100" /></a> </li>
        <li><a href="images%20folder/GRAPHICS/Graphic7sus.jpg" 
        title="Natural Plastic, Publication Cover Design 2007"><img alt="demo" 
        height="100" src="images%20folder/GRAPHICS/Graphic7sus.jpg" 
        width="100" /></a> </li>
        <li><a href="images%20folder/GRAPHICS/Graphic8close.jpg" 
        title="Selected Album Booklet in leaf closeup 2006"><img alt="demo" 
        height="100" src="images%20folder/GRAPHICS/Graphic8close.jpg" 
        width="100" /></a></li>
        <li><a href="images%20folder/GRAPHICS/Graphic9inter.jpg" 
        title="Selected Poster Design: International Career Forum 2007">
        <img alt="demo" height="100" 
        src="images%20folder/GRAPHICS/Graphic9inter.jpg" width="100" /></a> </li>
        <li><a href="images%20folder/GRAPHICS/Graphic10tranlim.jpg" 
        title="Detail of Album Design Transference/Limerance 2008">
        <img alt="demo" height="100" 
        src="images%20folder/GRAPHICS/Graphic10tranlim.jpg" width="100" /></a>
        </li>
    </ul>
</div>
<div style="float: left; width: 90%; margin-top: 5px;">
    <h3>Single Image</h3>
</div>
<div class="pirobox">
    <span class="single thumbs_all"><a href="images/9.jpg" title="Caption">
    <img alt="demo" height="100" src="images/9_s.jpg" width="100" /></a> </span>
    <span class="single thumbs_all"><a href="images/10.jpg" title="Caption">
    <img alt="demo" height="100" src="images/10_s.jpg" width="100" /></a> </span>
</div>
<div style="float: left; width: 90%; margin: 10px 0 10px 10px;">
    <a href="http://www.pirolab.it/pirobox/">back to pirobox </a></div>

</body>

</html>
Imagine Building and Managing an Online Business
The Kasper Group

Vote up Vote down

  • Registered: May 23, 2009
  • Posts: 4

Re: I can't figure out this pirobox code?!

thanks, but it messed it up more. Now that weird arrow image is still on the page but for some reason the program made a whole bunch of thumbnails and lined them up on the side and my main text is also missing. It also has a bunch of pirobox random stuff underneath. I basically wanted to keep the main page, with the titles in the frame on the side, and then when you would click the text, it would pop up into the series of images. ( ie. no visible thumbnails) now I am completely lost. I will keep playing around with it, but if you know more about it that would be very helpful

thanks!

Vote up Vote down

  • Registered: May 23, 2009
  • Posts: 4

Re: I can't figure out this pirobox code?!

I guess, is there something from the file I need to move from the downloaded folder or put into my css document?

thanks

Vote up Vote down

  • From: Florida
  • Registered: December 19, 2008
  • Posts: 2,680
  • Reputation: 2

Re: I can't figure out this pirobox code?!

Sorry, totally missed your reply.

You will probably need to upload this to a host server and provide a url so we can take a look at what's going on.

Imagine Building and Managing an Online Business
The Kasper Group

Vote up Vote down