Album Directory arranged by Categories

[wirewolf]

As suggested by Hein (thank you for reminding me, I've been remiss), I've updated the album list plugin (album_directory_v1.1.zip), see post below:
http://forum.coppermine-gallery.net/index.php?topic=39429.msg187155#msg187155

Instructions have not changed (zip file has README with instructions) and the main script is the same, but I included the french and dutch language files in the updated zip file (thanks to Frantz and Hein for the translations respectively)

Link to working script:
http://academyphotos.net/photogallery/index.php?file=album_directory/album_list

Enjoy, wirewolf

[François Keller]

Hey wirewolf

look's good 

It can be a great plugin with the css for the pop-up window.
I like the css pop-up window and would like to see how you do this (to use in an other future plugin i will do  )

[wirewolf]

Hi Frantz, got the plugin done, see - http://academyphotos.net/photogallery/index.php?file=album_directory/album_list

I just have to do a bit of clean up and write up a README file with instructions. I wrote the "The Latest, the Greatest and Pot Luck!' screen as an option, selectable in the codebase file and if that option is selected, you can use the css pop ups or not. (used two separate included php files). Been at it for hours, got to go to bed. Work in the morning! 

I like the css pop-up window and would like to see how you do this (to use in an other future plugin i will do

No problem. I have three different definitions of this css pop up in my theme css file. preview (like the one in this plugin), description, see this page - http://academyphotos.net/photogallery/museum_list.html , (mouse over the image titles) and tooltip (don't have an example as yet). It's the same css functions, I just changed some of the parameters for each depending on what it's doing. Here's the section of my css file with the three definitions:

Code Select Expand

/* image preview mod by wirewolf - suggestion - only edit the background, border and text colors below */
.preview{
position: relative;
z-index: 24;
font-size:11px;
text-decoration: none;
}

.preview:hover{
background-color: transparent;
z-index: 25;
cursor:pointer;
cursor:hand;
text-decoration: none;
}

.preview span{
position:absolute;
z-index: 100;
border:1px solid #0B198C; /* border color of the window */
background-color: #F5F5FF; /* background color of the window */
padding:5px;
width:201px; /* this number sets the window position width - 1 px wider than the preview image */
display:none;
color: #000000; /* text color in the window */
font-size:10px;
text-align:left;
text-decoration: none;
/* Remove below line to remove shadow. Below line should always appear last within this CSS .preview span - works in IE only */
filter: progid:DXImageTransform.Microsoft.Shadow(color=gray,direction=135);
}

.preview:hover span{
display:inline;
text-decoration: none;
top: -75px; /* this number sets the window position over the 'Image Preview' - do not edit! */
left: -57px; /* this number sets the center window position over the 'Image Preview' - do not edit! */
}

/* end image preview mod by wirewolf */

.tooltip{
position: relative;
z-index: 24;
text-decoration: none;
}

.tooltip:hover{
background-color: transparent;
z-index: 25;
cursor:pointer;
cursor:hand;
text-decoration: none;
}

.tooltip span{
position:absolute;
z-index: 100;
border:1px solid #0B198C;
background-color: #F5F5FF;
padding:5px;
width:225px;
display:none;
color: #000000;
font-size:11px;
text-align:left;
text-decoration: none;
/*Remove below line to remove shadow. Below line should always appear last within this CSS*/
filter: progid:DXImageTransform.Microsoft.Shadow(color=gray,direction=135);
}

.tooltip:hover span{
display:inline;
text-decoration: none;
top: 1em;
left: -.25EM;
}

.description{
position:relative;
z-index: 24;
font-size:12px;
text-decoration: none;
}

.description:hover{
background-color: transparent;
z-index: 25;
cursor:pointer;
cursor:hand;
text-decoration: none;
}

.description span{
position:absolute;
display:block;
z-index: 100;
font-size:11px;
border:1px solid #0B198C;
background-color: #F5F5FF;
padding:5px;
width:400px;
display:none;
color: #000000;
text-align:left;
text-decoration: none;
/*Remove below line to remove shadow. Below line should always appear last within this CSS*/
filter: progid:DXImageTransform.Microsoft.Shadow(color=gray,direction=135);
}

.description:hover span{
position:absolute;
display:inline;
text-decoration: none;
top: 2em;
left: 10em;
}

The stuff in the window is in the span tag, example:
<a title="blah blah" href="blahblah.com" class="preview">blah<span>all the stuff you want in the window goes here</span></a>

Play around with it! I shoud have the completed plugin done by tomorrow. 

wirewolf

[François Keller]

wirewolf,

thank's a lot for your work. it's great. I'm waiting for your plugin
Great work on your gallery. All your Mods or plugin are usefull.

[wirewolf]

Thanks for the compliment Frantz, much appreciated!

Anyway, here's the finish product (I hope!)

The zip file is at the end of this post. Includes a README file with install instructions and explanations. In brief:

Coppermine 1.4.10
Gallery Album List Plugin v1.0 by wirewolf
Installs a Menu Link to a bulleted list of Albums, listed by Category,
See example: http://academyphotos.net/photogallery/index.php?file=album_directory/album_list
(You'll see my links end in html, I have mod rewrite, but the script is written with the normal php paths.)

Script:
The script will only list Categories that have at least one Public Album and Albums that have at least one approved file.
While always best to have titles for the files, this script will also check for a title, and if there is none, it will substitute the filename.

Install:
unzip package and upload album_directory folder as is to plugins folder and use plugin manager to install it.
if you're not sure, read - How to install plugins - http://forum.coppermine-gallery.net/index.php?topic=24327.0

Language:
english, french and dutch now available in the package. You can translate into your language, please share if you do.

Options:
The script as is defaults to showing the 'The Latest, the Greatest and Pot Luck!' screen with Image CSS pop up preview below the Album List. See example above. You can toggle this option on or off, and you can also select preview or no preview. In the codebase.php file look for and edit the following lines:

// CONFIGURATION OPTIONS - BEGIN - THIS ARE THE ONLY LINES YOU NEED TO EDIT!!!

// define ALBUM_LIST_SCREEN for true or false
// true - use 'The Latest, the Greatest and Pot Luck!' screen
// false: don't use 'The Latest, the Greatest and Pot Luck!' screen

define('ALBUM_LIST_SCREEN',true);

// if you define ALBUM_LIST_SCREEN as true, then define ALBUM_LIST_PREVIEW for true or false
// true:  use image css preview - pop up window, false: don't use image css preview - just normal url links

define('ALBUM_LIST_PREVIEW',true);

// if you define ALBUM_LIST_PREVIEW as true, then you can define the preview image width here,
// 200 default (200 pixels, 150 pixels works well too)

define('IMAGEWIDTH', 200);

// if you define ALBUM_LIST_PREVIEW as true or false, define limit here.
// limit is the number of thumbnail columns and the column spans. 3 or 4 works well.

define('LIMIT', 4);

// CONFIGURATION OPTIONS - END - DO NOT EDIT ANY LINES BELOW!!! REALLY!!!

==========================================================
I've played around a lot with these values, and the image width of 200 seems to be a good number. 150 works well too. But any value larger than 200 blows out the page too much and anything less than 150 doesn't seem worth it. Also, the value of 3 or 4 for the number of thumbnails works well too. I originally set the LIMIT to cpg's $CONFIG ['thumbcols'] (same as the thumbnail page, set in the Admin Panel), but decided to keep this script independent. Some users may not select the use of thumbnail pages.

There are some other options in the the preview script for the css, but I won't list them here. The css file is commented through out. They're in the README file.

For now I suggest leaving the default values. Try the script out and get used to it. Edit the codebase file first for ALBUM_LIST_SCREEN, ALBUM_LIST_PREVIEW, IMAGEWIDTH and LIMIT and see how it works. Then play around with the other values if you want.

If the Devs like, move accordingly. Or if anyone has any suggestions, don't hesitate to post them.

Enjoy! wirewolf 

[François Keller]

Hey Wirewolf,

Great work.
Attached, french.php language file 

[wirewolf]

Thanks for the translation Frantz. That reminds me. I've been playing around with the code in your summary.php file, http://academyphotos.net/photogallery/photo_summary.html , if you'd like I can send you the script by PM or email. Don't want to post here. Send me a PM and let me know.
Cheers, wirewolf

[Hein Traag]

Dutch.php added to this post.

Wirewolf, maybe it is time to update the plugin package and update the first post in this thread ?

Cheers
Hein

[wirewolf]

Thanks for the reminder Hein. Top post and file updated with included language files. 

[martinkatz]

Spanish attached
Thanks Wirewolf, nice plugin!!
Martin

[nointerest]

Hi,

I add a German language file.

I dont use the Plug-In myself - if I made any mistakes in the translation please let me know.

[fotovagu]

I like this plugin.

@wirewolf : A new version of this plugin for CPG 1.5.X would be very cool ..

thanks..

[Joachim Müller]

@fotovagu: don't clutter the existing threads for stuff for cpg1.4.x to request ports for another version. See http://forum.coppermine-gallery.net/index.php/topic,24540.0.html