How do we implement this in WP
If you have looked at the Lytebox pages you have a good idea of how it is done, if
you have not looked please do here.
Download the Lightbox+ files from here. In this zip folder you will find 3 folders,
in the tiny & file folders these hold the small and large test photos of the above
for you to try if required, and resource folder which holds the .js & .css files
plus the graphics for Lightbox viewer.
What to upload and where
- First produce 2 of each photo, 1 small 1 large. Check out the size of the large photo
in the Lightbox.zip. As an example.
- The small photo is to be put onto your web page to act as a thumbnail with a hyperlink
to the larger to open in Lightbox+.
- From the resource folder take out the 2 .js files and then upload this folder to
your host. I use the free Filezilla FTP client to do this. This folder needs to be
uploaded into your root directory. This is the place you upload your site. Keep the
folder name as resource.
- Upload the 2 .js files into the root directory so they will be at the same level
on your host as the html page the thumbnail photos are on so the code we are to put
onto your web page picks up these files to use.
- Once you have made up your large photos upload these to your host to a folder that
you will link to when doing the hyperlink on the thumbnails. i.e. Images.
That’s all the uploading of files done so next we will work on getting the web page
set up.
What is Lightbox +
Lightbox + was written from the original Lightbox by Takuya Ottani. Lightbox + is
a simple, unobtrusive script used to overlay images in the current page and works
with all modern browsers. However if the overlay picture is larger than the screen
size it will be reduced to fit BUT with an option button to increase the size to
it’s normal size. You can also zoom into the photo, there is a location display to
show you where you are on the photo.
Features
- The image is expandable when the image size is larger than the current window size.
- The image is resized automatically to suit to the current window size.
- The echoic word image can be applied.
- The zoom ratio can be changed by mouse wheel.
- The zoomed image can be dragged.
The best way to explain this is in a demonstration, Click on one of the photos below
to view. You will find in the top left corner a button to increase the photo
to it’s normal size then just use the mouse to zoom.
Double click the large photo or the X top right to close.
