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
! Gallery Layout Options
A number of layout styles are provided by the the fisheye package, and additional layout styles can easily be integrated if required.
Fixed Grid
The images will be displayed in a fixed grid. You can specify the number of thumbnails to display per page. Selections are provided for number of rows and number of columns to display.
Auto Flow
"The layout of the images on each gallery page will automatically adjust to the browsers width. Selection is provided so that you can specify the total number of thumbnails to display per page.
Position Number
This option allows you to designate each specific image on each page. The image order number entered on the Image Order page will determine the exact location of each image. Fractional numbers indicate PAGE.POSITION and will specifiy variable images per page, such as: 1.1, 1.2, 2.1, 3.1, 3.2, 3.3
Simple List
This option allows a single column display of images with mime details where available.
This can be set on a gallery by gallery basis, so One can create a list of galleries which then open out into grid or other layouts. In addition, the thumbnail size, if the original image is made available and whether comments can be added to entries can also be controlled on a per gallery basis. Public galleries can also be set up allowing anybody to upload to them. ( See security options for the various methods of controlling uploading and editing content )
! ToDo
* process and include EXIF data using liberty_meta tables.
* Intregate attached Tiki Gallery to Fisheye code {attachment id=845}
! <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
! Gallery Layout Options
A number of layout styles are provided by the the fisheye package, and additional layout styles can easily be integrated if required.
Fixed Grid
The images will be displayed in a fixed grid. You can specify the number of thumbnails to display per page. Selections are provided for number of rows and number of columns to display.
Auto Flow
"The layout of the images on each gallery page will automatically adjust to the browsers width. Selection is provided so that you can specify the total number of thumbnails to display per page.
Position Number
This option allows you to designate each specific image on each page. The image order number entered on the Image Order page will determine the exact location of each image. Fractional numbers indicate PAGE.POSITION and will specifiy variable images per page, such as: 1.1, 1.2, 2.1, 3.1, 3.2, 3.3
Simple List
This option allows a single column display of images with mime details where available.
This can be set on a gallery by gallery basis, so One can create a list of galleries which then open out into grid or other layouts. In addition, the thumbnail size, if the original image is made available and whether comments can be added to entries can also be controlled on a per gallery basis. Public galleries can also be set up allowing anybody to upload to them. ( See security options for the various methods of controlling uploading and editing content )
! ToDo
* process and include EXIF data using liberty_meta tables.
* Intregate attached Tiki Gallery to Fisheye code {attachment id=845}
! <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.