Pop Box is a simple and dynamic way to display the images. It is written in JavaScript that allows displaying images using different effects of enlargement, moving or resizing so dynamic way and it works well in Firefox and Internet explorer.
The setup is fairly simple. First download the zip file and unzip the file.



Upload the Popbox.js to your googlepage and copy the link by right click on the link in googlepage.

Now, add the popbox.js just before</head>

<script src="xxx.googlepage.PopBox.js" type="text/javascript"></script>
<link type="text/css" src="http://imagestore.com/xxx/PopBoxStyles.css?download"/>

You copy the link of your image store and paste here.

Now move to the zip folder. Upload the spinner40.gif, magminus.gif and magplus.gif to your image store. Here is the CSS class and edit it as directed. Copy the link of spinner40.gif, magminus.gif and magplus.gif and paste below.

GRAB THE CSS CODE

/* PopBox.js, Copyright (c) 2007, C6 Software, Inc. (http://www.c6software.com/)*/
.PopBoxImageSmall
{
border: none 0px #ffffff;
cursor: url("http://image store/albums/ magplus.gif"), pointer;
}
.PopBoxImageLarge
{
border: solid 1px #999999;
cursor: url("http:// image store /albums/ magminus.gif"), pointer;
}
.PopBoxImageShrink
{
cursor: url("http:// image store /albums/ magminus.gif"), pointer;
}
.PopBoxImageLink
{
cursor: pointer;
}
.PopBoxImageMove
{
border: none 0px #ffffff;
cursor: pointer;
}

The above CSS should be paste just before ]]</skin>. Take the preview and if there is no error then save it.
Here are some effects of Pop box. Use the code according your needs and the effects are just amazing.

Type-1



GRAB THE CODE

<img pbshowreverttext="false" onclick="Pop(this,50,'PopBoxImageLarge');" src="http://xxx.com/xxx.gif" id="name popboximg" pbshowrevertimage="false" style="width: 200px; height: 145px;" pbshowrevertbar="false" class="PopBoxImageSmall"/>


Type - 2



GRAB THE CODE

<img pbshowreverttext="false" onclick="Pop(this,50,'PopBoxImageLarge');" src="http://xxx.com/xxx.gif" pbSrc="http://xxx.com/xxx.gif" id="NAME popboximg" pbshowrevertimage="false" style="width: 200px; height: 145px;" pbshowrevertbar="false" class="PopBoxImageSmall"/>


Type-3


GRAB THE CODE

<img pbshowreverttext="false" onmouseover="Pop(this,50,'PopBoxImageLarge');" src="http://XXX.com/albums/IMAGE(1).jpg" pbSrc="http://XXX.com/albums/IMAGE(2).jpg" id="NAME popboximg" pbshowrevertimage="false" style="width: 200px; height: 100px;" pbshowrevertbar="false" class="PopBoxImageSmall"/>


Type-4


GRAB THE CODE

<img class = "PopBoxImageSmall" pbshowcaption = "true" pbcaption = "The text" title = "Click to enlarge / reduce" style = "width: 150px; height: 170px;" src = "http://xxx.com/albums/image.jpg" onclick = "Pop (this , 50, 'PopBoxImageLarge'); "/>

Yes, you done it.
Thanks for your visit!

Pop Box Subscribe to updates