History of FisheyePackage
{maketoc}
! Image Gallery
Fisheye is an advanced, easy to use image gallery, that has some astounding usability features including:
* delayed batch thumbnail creation
* multiple simultaneous image uploads
* very customisable layout settings
* various image size display options
! ToDo
* process and inlude EXIF data
! <div> based layout option
we give you the option to display your galleries using <div>s or <table>s
!! Advantages and disadvantages of divs vs tables
Tables
* pros
** browser compatible
** easy to set up
* cons
** not flexible
** same number of images per row, regardless of browser width
Divs
* pros
** highly flexibe
** number of images per row adjusts to browser width
** text browsers display items below each other, making them easier to read
* cons
** some browsers might have difficulties displaying these (very few by now)
** need to have css definitions to get them working
!! div based css
if you have having problems with the div based layout, you can go back to using the table based layout, or set some definitions in your css file.
the selector for the image surrounding box is:
.thumbnailblock .box {}
this is the code in fisheye/div_layout.css
we dynamically create class names based on the thumbnail size selection you have. have a look at the code below and you will see that we have 4 classes which correspond to the selected thumbnail size.
* .avatar-thmb
* .small-thmb
* .medium-thmb
* .large-thmb
this is the code in fisheye/div_layout.css
{code ()}
/* generic div based fisheye settings */
/* you can override these in your own css file */
.thumbnailblock .avatar-thmb,
.thumbnailblock .small-thmb,
.thumbnailblock .medium-thmb,
.thumbnailblock .large-thmb {float:left; overflow:auto;}
.thumbnailblock .avatar-thmb {width:120px; height:170px;}
.thumbnailblock .small-thmb {width:180px; height:230px;}
.thumbnailblock .medium-thmb {width:420px; height:470px;}
.thumbnailblock .large-thmb {width:820px; height:870px;}
{code}
you can modify the file directly or apply set width and height in your css file, which will override the above settings.
! Image Gallery
Fisheye is an advanced, easy to use image gallery, that has some astounding usability features including:
* delayed batch thumbnail creation
* multiple simultaneous image uploads
* very customisable layout settings
* various image size display options
! ToDo
* process and inlude EXIF data
! <div> based layout option
we give you the option to display your galleries using <div>s or <table>s
!! Advantages and disadvantages of divs vs tables
Tables
* pros
** browser compatible
** easy to set up
* cons
** not flexible
** same number of images per row, regardless of browser width
Divs
* pros
** highly flexibe
** number of images per row adjusts to browser width
** text browsers display items below each other, making them easier to read
* cons
** some browsers might have difficulties displaying these (very few by now)
** need to have css definitions to get them working
!! div based css
if you have having problems with the div based layout, you can go back to using the table based layout, or set some definitions in your css file.
the selector for the image surrounding box is:
.thumbnailblock .box {}
this is the code in fisheye/div_layout.css
we dynamically create class names based on the thumbnail size selection you have. have a look at the code below and you will see that we have 4 classes which correspond to the selected thumbnail size.
* .avatar-thmb
* .small-thmb
* .medium-thmb
* .large-thmb
this is the code in fisheye/div_layout.css
{code ()}
/* generic div based fisheye settings */
/* you can override these in your own css file */
.thumbnailblock .avatar-thmb,
.thumbnailblock .small-thmb,
.thumbnailblock .medium-thmb,
.thumbnailblock .large-thmb {float:left; overflow:auto;}
.thumbnailblock .avatar-thmb {width:120px; height:170px;}
.thumbnailblock .small-thmb {width:180px; height:230px;}
.thumbnailblock .medium-thmb {width:420px; height:470px;}
.thumbnailblock .large-thmb {width:820px; height:870px;}
{code}
you can modify the file directly or apply set width and height in your css file, which will override the above settings.