Make Lightbox 1.0 simple enhancement for phpwcms contentpart

[culda_a]

I try to install the lightbox but Is not working... I have copy the files from zip files in to phpwcms_template and made the changest to conf.template_default.inc.php ... but I have no new options in the content part Images ?!!! I copy the content of my conf.template_default.inc.php here to see if i made something wrong:

<?php
// predefine the default article/content values like space holder images, classes and so on

// simple navigation table defaults
$template_default["nav_table_simple_struct"]["width"] = "100%";
$template_default["nav_table_simple_struct"]["border"] = "0";
$template_default["nav_table_simple_struct"]["cellpadding"] = "0";
$template_default["nav_table_simple_struct"]["cellspacing"] = "0";

// row based navigation
$template_default["nav_row"]["before"] = '';
$template_default["nav_row"]["after"] = '';
$template_default["nav_row"]["between"] = ' | ';
$template_default["nav_row"]["link_before"] = '';
$template_default["nav_row"]["link_after"] = '';
$template_default["nav_row"]["link_before_active"] = '<span style="text-decoration:none;font-weight:bold;">';
$template_default["nav_row"]["link_after_active"] = '</span>';
$template_default["nav_row"]["link_direct_before"] = '';
$template_default["nav_row"]["link_direct_after"] = '';
$template_default["nav_row"]["link_direct_before_active"] = '';
$template_default["nav_row"]["link_direct_after_active"] = '';
$template_default["nav_row"]["show_active_hidden"] = 0;

// navigation table defaults
$template_default["nav_table_struct"]["table_border"] = "0";
$template_default["nav_table_struct"]["table_width"] = "100%";
$template_default["nav_table_struct"]["table_height"] = "";
$template_default["nav_table_struct"]["table_bgcolor"] = "";
$template_default["nav_table_struct"]["table_class"] = "";
$template_default["nav_table_struct"]["table_cspace"] = "0";
$template_default["nav_table_struct"]["table_cpad"] = "0";
//
$template_default["nav_table_struct"]["space_width"] = 10;
$template_default["nav_table_struct"]["space_left"] = 7;
$template_default["nav_table_struct"]["space_right"] = 10;
$template_default["nav_table_struct"]["space_celltop"] = 2;
$template_default["nav_table_struct"]["space_cellbottom"] = 2;
//
$template_default["nav_table_struct"]["cell_width"] = "100%";
$template_default["nav_table_struct"]["cell_height"] = "15";
$template_default["nav_table_struct"]["cell_class"] = "nav_table";
//
$template_default["nav_table_struct"]["cell_active_width"] = "100%";
$template_default["nav_table_struct"]["cell_active_height"] = "15";
$template_default["nav_table_struct"]["cell_active_class"] = "nav_table_active";
//
$template_default["nav_table_struct"]["js_over_effects"] = 1;
$template_default["nav_table_struct"]["all_nodes_active"] = 1;
//
$template_default["nav_table_struct"]["linkimage_norm"] = '<img src="img/article/nav_link_0.gif" alt="" border="0">';
$template_default["nav_table_struct"]["linkimage_over"] = '<img src="img/article/nav_link_1.gif" alt="" border="0">';
$template_default["nav_table_struct"]["linkimage_active"] = '<img src="img/article/nav_link_2.gif" alt="" border="0">';
//
$template_default["nav_table_struct"]["row_norm_bgcolor"] = "#D9DEE3";
$template_default["nav_table_struct"]["row_norm_class"] = "";
//
$template_default["nav_table_struct"]["row_over_bgcolor"] = "#FF9900"; //#AAB7C1
$template_default["nav_table_struct"]["row_active_bgcolor"] = "#FFFFFF";
$template_default["nav_table_struct"]["row_active_class"] = "";
//
$template_default["nav_table_struct"]["row_space"] = 1;
$template_default["nav_table_struct"]["row_space_bgcolor"] = "#4A5966";
//
$template_default["nav_table_struct"]["show_active_hidden"] = 0;

/*
* sublevel layout
* ===============
* setup unique style for each node/level
* ['array_struct'][1] => the number represents level ID
* so root level is [0] and so on...

$template_default["nav_table_struct"]['array_struct'][1]["linkimage_norm"] = '<img src="img/article/nav_link_0.gif" alt="" border="0">';
$template_default["nav_table_struct"]['array_struct'][1]["linkimage_over"] = '<img src="img/article/nav_link_1.gif" alt="" border="0">';
$template_default["nav_table_struct"]['array_struct'][1]["linkimage_active"] = '<img src="img/article/nav_link_2.gif" alt="" border="0">';

$template_default["nav_table_struct"]['array_struct'][1]["row_norm_bgcolor"] = '#FAEAC8';
$template_default["nav_table_struct"]['array_struct'][1]["row_norm_class"] = $template_default["nav_table_struct"]["row_norm_class"];
$template_default["nav_table_struct"]['array_struct'][1]["row_over_bgcolor"] = '#FAEAC8';
$template_default["nav_table_struct"]['array_struct'][1]["row_active_bgcolor"] = '#FAEAC8';
$template_default["nav_table_struct"]['array_struct'][1]["row_active_class"] = $template_default["nav_table_struct"]["row_active_class"];

$template_default["nav_table_struct"]['array_struct'][1]["space_celltop"] = $template_default["nav_table_struct"]["space_celltop"];
$template_default["nav_table_struct"]['array_struct'][1]["space_cellbottom"] = $template_default["nav_table_struct"]["space_cellbottom"];

$template_default["nav_table_struct"]['array_struct'][1]["cell_height"] = $template_default["nav_table_struct"]["cell_height"];
$template_default["nav_table_struct"]['array_struct'][1]["cell_class"] = "navLevel1";
$template_default["nav_table_struct"]['array_struct'][1]["cell_active_height"] = $template_default["nav_table_struct"]["cell_active_height"];
$template_default["nav_table_struct"]['array_struct'][1]["cell_active_class"] = "navLevel1a";

$template_default["nav_table_struct"]['array_struct'][1]["show_active_hidden"] = 0;

*/


// article listing with summary
$template_default["space_top"] = '';
$template_default["space_bottom"] = '';
$template_default["space_aftertop_text"] = '';
$template_default["space_between_list"] = '';
$template_default["space_between_sum"] = '';
//
$template_default["top_listentry_before"] = '<div class="listEntry">';
$template_default["top_listentry_after"] = '</div>';
$template_default["top_headline_before"] = '<h1>';
$template_default["top_headline_after"] = '</h1>';
$template_default["top_subheadline_before"] = '<h2>';
$template_default["top_subheadline_after"] = '</h2>';
$template_default["top_text_before"] = '<p class="topText">';
$template_default["top_text_after"] = '</p>';
$template_default["top_readmore_before"] = " ";
$template_default["top_readmore_link"] = "more…";
$template_default["top_readmore_after"] = "";
$template_default["top_headline_space"] = "";
$template_default["top_subheadline_space"] = "";
$template_default["top_count"] = 1;
$template_default["article_order"] = 1; // 0 = manual, 2 = creation date, 4 = start date -> + 0 = ASC, + 1 = DESC
//
$template_default["list_startimage"] = '<img src="img/article/list_startimage.gif" width="11" height="7" border="0" alt="">';
$template_default["list_headline_before"] = '<div class="articleListListhead">';
$template_default["list_headline_after"] = '</div>';

// breadcrumb
$template_default["breadcrumb_spacer"] = ' <span class="breadcrumb_spacer">></span> ';

// article default
$template_default["article"]["title_before"] = '<h1>';
$template_default["article"]["title_after"] = '</h1>';
$template_default["article"]["subtitle_before"] = '<h2>';
$template_default["article"]["subtitle_after"] = '</h2>';
$template_default["article"]["summary_before"] = '<div class="articleSummary">';
$template_default["article"]["summary_after"] = '</div>';

$template_default["article"]["div_spacer"] = true; //if true or 'div' = <div>..., if false or not set <br><img...>

$template_default["article"]["head_after"] = '';

$template_default["article"]["content_head_before"] = '<h3>';
$template_default["article"]["content_head_after"] = '</h3>';
//$template_default["article"]["content_head_class"] = "contentHead";
$template_default["article"]["content_subhead_before"] = '<h4>';
$template_default["article"]["content_subhead_after"] = '</h4>';
//$template_default["article"]["content_subhead_class"] = 'contentSubHead';

$template_default["article"]["text_class"] = "articleText";
$template_default["article"]["code_class"] = "articleCode";

$template_default["article"]["link_email_before"] = '<div class="linkEmail"><img src="img/article/extlink_1.gif" alt=""><img src="img/leer.gif" width="1" height="11" alt="">';
$template_default["article"]["link_email_after"] = '</div>';

$template_default["article"]["bullet_sign"] = "<img src=\"img/article/bullet_1.gif\" alt=\"\" /><img src=\"img/leer.gif\" width=\"1\" height=\"1\" alt=\"\" />";
$template_default["article"]["link_sign"] = "<img src=\"img/article/extlink_1.gif\" alt=\"\" /><img src=\"img/leer.gif\" width=\"1\" height=\"11\" alt=\"\" />";
$template_default["article"]["back_sign"] = "<img src=\"img/article/back_link_0.gif\" border=\"0\" alt=\"\" />";
$template_default["article"]["top_sign"] = "<img src=\"img/article/top_link_0.gif\" border=\"0\" alt=\"\" />";
$template_default["article"]["top_sign_before"] = '<div align="right">';
$template_default["article"]["top_sign_after"] = '</div>';

$template_default["article"]["file_name_cell_class"] = "v11";
$template_default["article"]["file_size_cell_class"] = "v10";
$template_default["article"]["file_size_info_class"] = "v09";

$template_default["article"]["form_align"] = '';

$template_default["article"]["link_article_sign"] = "<img src=\"img/article/intlink_1.gif\" alt=\"\" /><img src=\"img/leer.gif\" width=\"1\" height=\"11\" alt=\"\" />";
$template_default["article"]["link_article_class"] = "articleLinkInternal";

$template_default["article"]["image_table_class"] = "";
$template_default["article"]["image_table_bgcolor"] = "";
$template_default["article"]["image_bgcolor"] = "";
$template_default["article"]["image_align"] = "";
$template_default["article"]["image_valign"] = "";
$template_default["article"]["image_border"] = 0;
$template_default["article"]["image_class"] = "image_td";
$template_default["article"]["image_imgclass"] = "image_img";
$template_default["article"]["image_caption_class"] = "image_caption";
$template_default["article"]["image_caption_bgcolor"] = '';
$template_default["article"]["image_caption_valign"] = '';
$template_default["article"]["image_caption_align"] = 'center';
$template_default["article"]["image_caption_before"] = '';
$template_default["article"]["image_caption_after"] = '';
$template_default["article"]["image_div"] = false;

$template_default["article"]["imagelist_table_class"] = "alpinshow";
$template_default["article"]["imagelist_table_bgcolor"] = "";
$template_default["article"]["imagelist_bgcolor"] = "";
$template_default["article"]["imagelist_align"] = "";
$template_default["article"]["imagelist_valign"] = "";
$template_default["article"]["imagelist_border"] = 0;
$template_default["article"]["imagelist_class"] = "imagelisttd";
$template_default["article"]["imagelist_imgclass"] = "imagelistimg";
$template_default["article"]["imagelist_caption_class"] = "imglistcaption";
$template_default["article"]["imagelist_caption_bgcolor"] = "";
$template_default["article"]["imagelist_caption_valign"] = "";
$template_default["article"]["imagelist_caption_align"] = "";
$template_default["article"]["imagelist_caption_before"] = '';
$template_default["article"]["imagelist_caption_after"] = '';

$template_default["article"]["keyword_before"] = '<span class="phpwcmsKeywords">';
$template_default["article"]["keyword_after"] = '</span>';
$template_default["article"]["newsletter_error"] = "Please check email address!";

// date and time formatting
$template_default["date"]["language"] = "DE"; // DE=German, IT=Italian, FR=French
$template_default["date"]["long"] = "l, j. F Y"; // (Monday, 1. October 2003)
$template_default["date"]["medium"] = "D, j. M y"; // (Mon, 1. Oct 03)
$template_default["date"]["short"] = "Y/m/d"; // (2003/12/25)
$template_default["date"]["article"] = "Y/m/d"; // (2003/12/25)
$template_default["time"]["long"] = "H:i:s"; // 15:25:45
$template_default["time"]["short"] = "H:i"; // 15:25

// rss image
$template_default["rss"]["image"] = '<img src="img/article/rss_valid.gif" width="64" height="13" border="0" alt="Valid RSS">';

// related articles based on keywords
$template_default["related"]["before"] = '<div class="related">';
$template_default["related"]["after"] = '</div>';
$template_default["related"]["link_before"] = '<p>';
$template_default["related"]["link_after"] = "</p>";
$template_default["related"]["link_symbol"] = "";
$template_default["related"]["link_target"] = "";
$template_default["related"]["link_length"] = 0; //if 0 no limit
$template_default["related"]["cut_title_add"] = "…";

// new articles
$template_default["news"]["before"] = '<div class="news">';
$template_default["news"]["after"] = '</div>';
$template_default["news"]["link_before"] = '<p>';
$template_default["news"]["link_after"] = '</p>';
$template_default["news"]["link_symbol"] = '';
$template_default["news"]["link_target"] = '';
$template_default["news"]["link_length"] = 0; //if 0 no limit
$template_default["news"]["cut_title_add"] = "…";
$template_default["news"]["date_language"] = "EN"; // DE=German, IT=Italian, FR=French, ES = Spanish, DA = Danish, NO = Norwegian
$template_default["news"]["date_format"] = "Y/m/d"; //if empty -> no Date
$template_default["news"]["date_before"] = '<span class="datelink">';
$template_default["news"]["date_after"] = ' - </span>';
$template_default["news"]["sort_by"] = 'cdate'; // 'cdate' = Creation date, or 'udate' = update date

// ecards
$template_default["article"]["ecard_table_class"] = "image_table";
$template_default["article"]["ecard_table_bgcolor"] = "";
$template_default["article"]["ecard_bgcolor"] = "";
$template_default["article"]["ecard_align"] = "";
$template_default["article"]["ecard_valign"] = "";
$template_default["article"]["ecard_border"] = 0;
$template_default["article"]["ecard_imgclass"] = "";
$template_default["article"]["ecard_class"] = "image_td";
$template_default["article"]["ecard_caption_class"] = "image_caption";
$template_default["article"]["ecard_caption_bgcolor"] = "";
$template_default["article"]["ecard_caption_valign"] = "";
$template_default["article"]["ecard_caption_align"] = "center";
$template_default["article"]["ecard_caption_before"] = '';
$template_default["article"]["ecard_caption_after"] = '';
$template_default["article"]["ecard_chooser_css"] = 'style="margin:3px 0 3px 0;"';
$template_default["article"]["ecard_chooser_text"] = 'style="font-weight:bold;"';

// default index category name
$template_default["article"]["index_name"] = 'Home';
$template_default["article"]["index_info"] = '';



?>

[culda_a]

Ok now I see that is working but still no extra options... and I want to know if ius possible to show only 1 image in front not all in 1 colomn and when you click on the next to show the next picture... also do I have the option of a slide show?

[breitsch]

I would like to create the image content part and the top image be the one displayed. However on the frontend once clicked, it would open the series of images. [...] Is this possible? Do you know of anybody that is doing this?

Nobody really want's to do this!

OK. Assuming that you have installed the script as described in this thread and it's running then change the lines at the bottom of the script as follows:

if(is_array($match[1])) {
$y=0;
// now loop through the matches and replace them with the custom code from function makelightbox
foreach($match[1] as $i => $imgcell) {
$y++;
$caption=$matchcapt[1][$i]; // get image caption if available - if not, it's empty
$linkfind ='#<a href="image_zoom.php\?show=(.*)".*[^>]>(.*)</a>#Use';
if ($y==1) {
$linkreplacer ="makelightbox('$1','$2','$caption','$pos')";
}else{
$linkreplacer ="makelightbox('$1','','$caption','$pos')";
}
$replace = preg_replace($linkfind,$linkreplacer,$match[1][$i]);
// last thing is replace the exact strings with the new one
$content["all"] = str_replace($match[1][$i], $replace, $content["all"]);
}
}
}
?>

since the lightbox-script (the js) does not use the thumbnail the above changes do write the links (<a>) in the html but not the thumbnails (<img>), exept for the first pic as you desired. you should set the space and border to 0 in backend to avoid empty placeholders around the displayed thumbnail.

validators won't like this hack but it works - what else could you ask for!

[phalancs]

you postet on:
Mon Jan 01, 2007 04:03

wow this is crazy

[pepe]

breitsch is an absolut NORMAL phpwcms fan

[culda_a]

The above poste from breitsch is a solution for my question about the slideshow? ... can I receive more explination about this pls

[breitsch]

@culda_a

not sure if you mix up something here.
extra options in CP Images you do not get with just the installations steps as described in first post of this thread by marcus@localhorst
that needs more changes in the hard-code of phpwcms (PM me if interested)

with my post above you can change the behavior of displaing the thumbs of the Image-CP in Frontend only for the request by anthony.abraira (to display only the first image-thumbnail in frontend but when you click on that it shows all images from the CP with the lightbox-enhancement) you asked for something similar as well if I got that right.
But it does not allow you to show the images in a slide-show. (AFAIK)

Does this help?

[culda_a]

I understand that this is not a solution for the slide show but can show only 1 image ata the time and is possible to have a link that say next picture?

[breitsch]

... and is possible to have a link that say next picture?

NO!
if it'd just be a 'next' link it wouldn't be a big deal but I know then it must be a first|previous|next|last link as well and graphical it should be as well and show the current number and the total number of pics and maybe a autorun function with ability to change the speed and and and...

could you explain grafically what exactly you are thinking about?

[culda_a]

I was thinking on something like this:

[breitsch]

it's pretty close to what lightbox does, isn't it?




or is the overlay the problem?

[culda_a]

the ideea is to put that in the left colomn and the picture to be change there not to apear overlay... only if I press on the picture and to be visible only the first picture not all.

[breitsch]

the idea is to put that in the left column and the picture to be change there not to appear overlay... only if I press on the picture and to be visible only the first picture not all.

OK, Mr. culda_a
I worked hard for you!
I changed the script of marcus@localhorst so you have now:
- a slideshow showing the first image of CP Images within the content of the site (wherever you want it).
- the slideshow has the same appearance as lightbox (transitions)
- I added cursors instead of prev/next images, but you can change this in the css
- instead of popup or overlay as in lightbox I added the highslide-functionality when the actual image is clicked, so you can move it around your page and click it back to where it came from (it's just more fun!)
- I changed the script so you won't have to add the js/css files in the head, the script loads the needed files automatically
- you can use both on your site, lightbox (classic) or the slideshow but not both within the same article
- NO hard-code changes needed, just add a bunch of files to your phpwcms_template/inc_app folder and replace the show_lightbox.php in the frontend_render folder

Examples:
classic-lightbox
http://web.casa-loca.com/index.php?lightbox_vyq
slideshow
http://web.casa-loca.com/index.php?slideshow


Tested with:
- phpwcms 1.2.6
- IE6 and FF2.0

Anyone interested?
I gonna do some bugfixes (key-control), then I'll release it if there is any demand for that.

[pepe]

...... Anyone interested?

What a question???? EVERYONE... i think

[update]

GREAT!
And really all can be done without touching any source code?
EVEN GREATER!
Thank you all!
claus