{{indexmenu_n>20}}
====== Einfache CSS-Galerie (no JS) ======
Eine einfache **CSS basierte** Bildergalerie, bei der das große Bild durch einen Klick auf das kleine Bild //(Thumbnail)// gewechselt wird. \\
Es ist ebenso möglich, das gewünschte Bild im Link zur Seite direkt aufzurufen. Es wird **kein JavaScript** verwendet.
[CP_TRIG_DEFINITION] // Begin Definiton
[THUMBX_PREFIX] .... [/THUMBX_PREFIX] // Thumb-Block before
[THUMBX_PREFIX] .... [/THUMBX_SUFFIX] // Thumb-Block after
[IMAGEX_PREFIX] .... [/IMAGEX_PREFIX] // Image-Block before
[IMAGEX_SUFFIX] .... [/IMAGEX_SUFFIX] // Image-Block after
[/CP_TRIG_DEFINITION] // End Definiton
[CP_TRIG_WRAP_CONTENT] // Begin where the result is placed into
[CP_TRIG_CONTENT] // Begin Content
[THUMBX] .... [/THUMBX] // designated area
[IMAGEX] .... [/IMAGEX] // designated area
[COUNTX] // Running Counter >0
[/CP_TRIG_CONTENT] // End Content
[/CP_TRIG_WRAP_CONTENT] // End where the result is placed into
\\
**1.** Installation:
* Erstelle aus den drei folgenden Texten die drei angegebenen Dateien in den angegebenen Verzeichnissen.
**2.** Im Gebrauch:
* Fülle einen CP Bilder
muss im ausgabefähigen HTML-Text im Template stehen, damit das php-Script diesen CP für die Bearbeitung erkennt. //(Sonst würde jeder CP "Bilder
// ---- Loading the right CSS-file.
$GLOBALS['block']['css']['permanent_image_click_gallery'] = 'specific/permanent_image_click_gallery.css';
\\
=== Template: ===
/* ********************************************************************
permanent_image_click_gallery.tmpl for the CP images div
12.01.10 KH (flip-flop) - http://planmatrix.de Knut Heermann
Idea: http://www.cssplay.co.uk/menu/clickgallery.html
Corresponding with the files
-> /template/inc_css/specific/permanent_image_click_gallery.css
Uses the cp-trigger php file: template/inc_script/frontend_init/cp_trigg_sort_section.php
- Switch in your conf.inc.php:
-> $phpwcms['allow_cntPHP_rt'] = 1;
-> $phpwcms['allow_ext_init'] = 1;
*********************************************************************** */
[TITLE]{TITLE}
[/TITLE]
[SUBTITLE]{SUBTITLE}
[/SUBTITLE]
[TEXT]{TEXT}[/TEXT]
[PHP] // Load the right css classes
$GLOBALS['block']['css']['permanent_image_click_gallery'] = 'specific/permanent_image_click_gallery.css';
[/PHP]
\\
==== PHP: ====
**Datei:** /template/inc_script/frontend_init/cp_trigg_sort_section.php \\
//(Alternativ kann auch dieser Programmteil [[deutsch/ersetzer_rts/frontend_init/cp_trigger/sort-section#php_script_v1.2]] verwendet werden. Die speziellen Tags müssen entsprechend angepasst werden)//.
image CP: 31 => image special CP: 32 => register tabs
if( $data['acontent_type'] == 29 AND strpos($text, '') ) {
// Catch the thumb/image area from template
preg_match_all('/\[CP_TRIG_CONTENT\](.*?)\[\/CP_TRIG_CONTENT\]/ism',$text, $_text['content']);
if ($_text['content'][1][0]) { // is there any content?
// Catch image by image and sort into the right section --------
$_text['thumb'] = '';
$_text['image'] = '';
foreach ( $_text['content'][1] as $key => $value ) {
// parsing THUMBX (Section 1)
preg_match('/\[THUMBX\](.*?)\[\/THUMBX\]/ism',$value, $_temp);
$_temp[1] = str_replace('[COUNTX]', $key+1, $_temp[1]);
$_text['thumb'] .= $_temp[1].LF;
// parsing IMAGEX (Section 2)
preg_match('/\[IMAGEX\](.*?)\[\/IMAGEX\]/ism',$value, $_temp);
$_temp[1] = str_replace('[COUNTX]', $key+1, $_temp[1]);
$_text['image'] .= $_temp[1].LF;
}
// Parsing the definition list ----------------------------------
preg_match_all('/\[CP_TRIG_DEFINITION\](.*?)\[\/CP_TRIG_DEFINITION\]/ism',$text, $_text['definition']);
if ($_text['definition'][1][0]) { // is there any content in definition section?
if (preg_match('/\[THUMBX_PREFIX\](.*?)\[\/THUMBX_PREFIX\]/ism',$_text['definition'][1][0], $_text['pre_suf'][1]))
$_text['thumb'] = $_text['pre_suf'][1][1] . $_text['thumb'];
if (preg_match('/\[THUMBX_SUFFIX\](.*?)\[\/THUMBX_SUFFIX\]/ism',$_text['definition'][1][0], $_text['pre_suf'][2]))
$_text['thumb'] .= $_text['pre_suf'][2][1];
if (preg_match('/\[IMAGEX_PREFIX\](.*?)\[\/IMAGEX_PREFIX\]/ism',$_text['definition'][1][0], $_text['pre_suf'][3]))
$_text['image'] = $_text['pre_suf'][3][1] . $_text['image'];
if (preg_match('/\[IMAGEX_SUFFIX\](.*?)\[\/IMAGEX_SUFFIX\]/ism',$_text['definition'][1][0], $_text['pre_suf'][4]))
$_text['image'] .= $_text['pre_suf'][4][1];
}
// Kill all DEFINITION entries in template
$text = preg_replace('/\[CP_TRIG_DEFINITION\](.*?)\[\/CP_TRIG_DEFINITION\]/ism', '', $text);
// Insert new sorted content ------------------------------------
$text = preg_replace('/\[CP_TRIG_WRAP_CONTENT\](.*?)\[\/CP_TRIG_WRAP_CONTENT\]/ism', ''.LF.$_text['thumb'].LF.$_text['image'], $text); // fill content
}
}
return $text;
} // ---- END function
register_cp_trigger('CP_IMAGES_SORT_THUMBS_AND_IMAGES');
?>
\\
==== CSS: ====
**Datei:** /template/inc_css/specific/permanent_image_click_gallery.css
/* ================================================================
This copyright notice must be untouched at all times.
The original version of this stylesheet and the associated (x)html
is available at http://www.cssplay.co.uk/menu/clickgallery.html
Copyright (c) 2005-2009 Stu Nicholls. All rights reserved.
This stylesheet and the associated (x)html may be modified in any
way to fit your requirements.
12.01.10 Enhanced: KH (flip-flop) - http://planmatrix.de Knut Heermann
=================================================================== */
#gallery {
width:640px;
height:750px;
margin:0 auto;
position:relative;
}
ul#thumbnails {
padding:0 0 0 10px;
margin:0;
list-style:none;
}
ul#thumbnails li {
float:left;
position:relative;
top:430px;
left: 15px;
z-index: 999;
}
ul#thumbnails li a {
height:50px;
width:50px;
padding:3px;
display:block;
text-decoration:none;
background:#eee;
}
ul#thumbnails li a img {width:50px; height:50px; border:0;}
ul#thumbnails li a:hover {
background:#fc0;
}
ul#thumbnails li.close a {
background:#eee;
}
ul#thumbnails li.close a:hover {
background:#FFF2BF;
}
#gallery #fullsize {
position:absolute;
left:0;
top:0;
height:507px;
width:642px;
overflow:hidden;
}
#gallery #fullsize div {width:640px; height:480px; padding-top:25px;}
#gallery #fullsize div img {display:block; margin:0 auto; border: 1px solid #000;}