{{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. **Funktioniert in allen Browsern außer Opera** //(Stand: V10.10 Build 1893)//. 8-O //(Marktanteil: < 2%)// Basis: [[http://www.cssplay.co.uk/menu/clickgallery.html|Click gallery with permanent images-27-09-2009]] \\ **Frontend:** {{:deutsch:phpwcms-system:artikel:contentparts:bilder-div:permanent_image_click_gallery_fe_1.jpg|}} **Backend:** {{:deutsch:phpwcms-system:artikel:contentparts:bilder-div:permanent_image_click_gallery_be_1.gif|}} \\ ---- Docu: -- \\ Forum: -- **Autor:** K.Heermann (flip-flop) http://planmatrix.de //2010/01/12 // \\ - CSS made by http://www.cssplay.co.uk/ \\ **CMS version:** >= V1.40\\ **Version:** V1.0 \\ **Update:** -- **Tag:** -- Dateiename: **cp_trigg_sort_section.php** \\ Verzeichnis: ** /template/inc_script/frontend_init/ ** Dateiename: **permanent_image_click_gallery.tmpl** \\ Verzeichnis: ** /template/inc_cntpart/images/ ** Dateiename: **permanent_image_click_gallery.css** \\ Verzeichnis: ** /template/inc_css/specific/ ** **Bedingung:** -> [[http://www.phpwcms-docu.de/confincphp_de.phtml|/config/phpwcms/conf.inc.php]] * $phpwcms['allow_cntPHP_rt'] = 1; * phpwcms['allow_ext_init'] = 1; ---- ---- \\ \\ ===== Beschreibung ===== Die Möglichkeit um diese Art der Galerie verwenden zu können setzt eine andere Reihenfolge der HTMLausgabe voraus. Die Vorschaubilder und die Großansichten müssen jeweils in einem eigenen Block stehen. \\ Um das zu erreichen wird ein kleines [[deutsch/phpwcms-system/artikel/contentparts/bilder-div/statische-bilder-klick-gallerie#php]]-Script eingesetzt. **Neue Tags im template:** [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
mit deinen Einträgen //(Siehe Beispiel oben)//. * Wähle als Vorlage: **permanent_image_click_gallery.tmpl** * Sichern und das Ergebnis im FE ansehen :-) Der HTML-Kommentar 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
" von diesem Script bearbeitet)//. \\ ==== Template ==== **Datei:** /template/inc_cntpart/images/permanent_image_click_gallery.tmpl === CSS laden: === // ---- 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;}