Lightbox JS is very cool and useful script to display an image on the page.
However only the part of the image is displayed when the image size is larger than the window size. So I've created a script based on Lightbox JS.
This script can be used in much the same way as Lightbox JS.
<script type="text/javascript" src="spica.js"></script>
<script type="text/javascript" src="lightbox_plus.js"></script>
Add rel="lightbox" attribute to any link tag to activate the lightbox.At the end of "lightbox_plus.js",
addEvent(window,"load",function() {
var lightbox = new LightBox({
loadingimg:'loading.gif',
expandimg:'expand.gif',
shrinkimg:'shrink.gif',
previmg:'prev.gif',
nextimg:'next.gif',
effectimg:'zzoop.gif',
effectpos:{x:-20,y:-20},
effectclass:'effectable',
closeimg:'close.gif',
resizable:true
});
});
images, which are used in Lightbox Plus, are indicated.
So you can change these when the images are changed or put on the different directory.
The default settings are set like above on the premise that html files, "lightbox_plus.js", and all images are put on the same directory. So I recommend to change it as absolute path, like "http://serennz.sakura.ne.jp/toybox/lightbox/resource/loading.gif".
effectimg indicates url of an echoic word image, effectpos indicates position of the image, effectclass indicates class attribute to apply an echoic word image.
When effectclass has no value but effectimg has a valid value, all lightbox images are displayed with an echoic word image. When effectclass is valid, an echoic word image is displayed for the same class.
For example, when the setting set as "effectclass:'effectable'", the following anchor could be displayed with the echoic word image.
<a href="[...image...]" rel="lightbox" class="effectable">****</a>
Set "resizable" as false if you want to turn off mouse wheel feature.
text-align:center is probably set against main content element such as <body> tag. So please change a property of #overlay on your lightbox.css, as follows:
#overlay {
text-align: left;
background-image: url(overlay.png);
}
Don't hesitate to contact me if you have any question about it.
Thank you for your visiting. I hate to inconvenience you but my reply may delay.
You are viewing a mobilized version of this site...
View original page here
Mowser